@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;600;700&family=DM+Sans:wght@400;500;700&family=Shadows+Into+Light&family=Homemade+Apple&family=Press+Start+2P&display=swap");

:root{
  --bgTop:#fce4ef;
  --bgMid:#f4d5e1;
  --bgBot:#fdebf2;

  --fg:#2a0f1c;
  --muted:#7b4b61;
  --accent:#e08aa5;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100%}

body{
  font-family:"DM Sans",sans-serif;
  color:var(--fg);
  background: linear-gradient(
    180deg,
    var(--bgTop) 0%,
    #fbe1ea 35%,
    var(--bgMid) 70%,
    var(--bgBot) 100%
  );
  overflow-y:auto;
  overflow-x:hidden;
}

p{
  color:#fff;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("media/background.png") center/cover no-repeat;
  opacity:.22;
  z-index:0;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:-10%;
  background:
    radial-gradient(600px 320px at 20% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
    radial-gradient(700px 360px at 80% 65%, rgba(224,138,165,.28), rgba(224,138,165,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity:.55;
  mix-blend-mode:screen;
  z-index:0;
  pointer-events:none;
}

/* BLOBS */
.blobs{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.blob{
  position:absolute;
  width:420px;height:420px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.70),
    rgba(224,138,165,0.34) 46%,
    rgba(224,138,165,0.00) 72%
  );
  filter: blur(26px);
  opacity:.55;
  mix-blend-mode:soft-light;
  animation: blobFloat 18s ease-in-out infinite;
  transform: translate3d(0,0,0);
}
.b1{top:8%;left:6%;width:520px;height:520px;animation-duration:20s}
.b2{top:56%;left:10%;width:360px;height:360px;animation-duration:22s;opacity:.45}
.b3{top:18%;right:8%;width:460px;height:460px;animation-duration:24s;opacity:.42}
.b4{bottom:10%;right:18%;width:600px;height:600px;animation-duration:26s;opacity:.35}
.b5{top:40%;left:55%;width:320px;height:320px;animation-duration:21s;opacity:.40}

@keyframes blobFloat{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(28px,-22px,0) scale(1.08)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

/* PAGE FLOW */
.scroller{
  position:relative;
  z-index:2;
}

/* Works page: blend intro gif into bg2 for seamless transition */

/* PANELS (NO SEAMS) */
.panel{
  min-height:100vh;
  width:100%;
  padding:190px 120px 120px;
  display:flex;
  align-items:center;
  position:relative;

  background: transparent;
}

.panel:not(.intro){
  background:
    url("media/bg3.png") center/cover no-repeat;
}

.panel > *{
  position:relative;
  z-index:1;
}

/* subtle readability haze (continuous, not a “card”) */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.6;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18)),
    radial-gradient(
      900px 420px at 18% 18%,
      rgba(255,255,255,.45),
      rgba(255,255,255,.10) 55%,
      rgba(255,255,255,0) 78%
    );
}

@keyframes panel-sheen{
  0%{transform:translate3d(-1%, -1%, 0) scale(1)}
  50%{transform:translate3d(1.5%, 1%, 0) scale(1.02)}
  100%{transform:translate3d(-1%, -1%, 0) scale(1)}
}

/* TYPOGRAPHY */
h1,h2{
  font-family:"Playfair Display",serif;
  font-weight:600;
  letter-spacing:-0.02em;
}
.intro h1{
  font-size: clamp(4.8rem, 11vw, 11.5rem);
  line-height:0.95;
  text-shadow: 0 10px 30px rgba(42,15,28,.12);
}
.intro p{
  margin-top:22px;
  max-width:460px;
  font-size:16px;
  line-height:1.6;
  color:#fff;
  font-family:"Shadows Into Light",cursive;
  font-weight:400;
}

.intro{
  gap:60px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.intro > div{
  flex:0 1 520px;
}

.intro-hero{
  justify-content:center;
  align-items:center;
  text-align:center;
}

.intro-hero > div{
  flex:0 1 520px;
}

.intro .works-intro-note{
  margin-top:0;
  max-width:520px;
  font-family:"Shadows Into Light",cursive;
  font-weight:400;
  font-size:clamp(1.6rem, 3vw, 2.6rem);
  line-height:1.2;
  color:#fff;
  transform:translateY(-1in);
}

/* Handwriting title (intro panels) */
.script-title{
  position:relative;
  display:inline-block;
  font-family:"Press Start 2P",monospace;
  font-weight:700;
  font-size: clamp(4.8rem, 11vw, 11.5rem);
  line-height:0.95;
  color:#fff;
}

.script-title--single{
  font-size: clamp(4rem, 9vw, 9.5rem);
}

.script-title--small{
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
}

.script-title--tiny{
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
}

.script-paragraph{
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height:1.05;
  max-width:520px;
}

.script-fallback{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.script-svg{
  width:min(760px, 88vw);
  height:auto;
  display:block;
  overflow:visible;
  shape-rendering:crispEdges;
}

.script-title--single .script-svg{
  width:min(620px, 84vw);
}

.script-title--small .script-svg{
  width:min(540px, 80vw);
}

.script-title--tiny .script-svg{
  width:min(360px, 70vw);
}

.script-paragraph .script-svg{
  width:min(520px, 80vw);
}

.script-line{
  fill:transparent;
  stroke:rgba(255,255,255,.95);
  stroke-width:2.4;
  stroke-linecap:square;
  stroke-linejoin:miter;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  text-shadow:0 10px 30px rgba(42,15,28,.12);
  font-family:"Press Start 2P",monospace;
}

.script-paragraph .script-line{
  stroke-width:1.6;
}

.script-title--small .script-line{
  stroke-width:2;
}

.script-title--tiny .script-line{
  stroke-width:1.6;
}

.script-title{
  --write-duration:2.6s;
  --write-delay:0s;
  --fill-delay:2s;
  --line-gap:.35s;
}

.script-title.is-writing .script-line{
  animation:
    script-write var(--write-duration) ease forwards,
    script-fill .7s ease forwards;
  animation-timing-function:
    steps(36, end),
    steps(6, end);
  animation-delay:
    var(--write-delay),
    calc(var(--write-delay) + var(--fill-delay));
}

.script-title.is-writing .script-line:nth-of-type(2){
  animation-delay:
    calc(var(--write-delay) + var(--line-gap)),
    calc(var(--write-delay) + var(--fill-delay) + var(--line-gap));
}

@keyframes script-write{
  to{stroke-dashoffset:0}
}

@keyframes script-fill{
  from{fill:transparent}
  to{fill:rgba(255,255,255,.98)}
}

/* Intro panels across pages */
.intro{
  position:relative;
  overflow:hidden;
  background:
    url("media/background.gif") center/cover no-repeat;
}

/* Works page panels (match intro glass + bg2.png) */
.works-page .panel:not(.intro){
  background:
    linear-gradient(120deg, rgba(255,247,250,.65), rgba(255,247,250,.2)),
    url("media/bg3.png") center/cover no-repeat;
}


@keyframes intro-sheen{
  0%{transform:translate3d(-2%, -2%, 0) scale(1)}
  50%{transform:translate3d(2%, 1%, 0) scale(1.02)}
  100%{transform:translate3d(-2%, -2%, 0) scale(1)}
}

/* PILL NAV (DM Sans locked) */
.pill-nav{
  position:fixed;
  top:26px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:26px;
  padding:14px 26px;
  border-radius:999px;
  z-index:100;

  font-family:"DM Sans",sans-serif;

  background: rgba(255,250,252,.50);

  border:1px solid rgba(224,138,165,.32);
  box-shadow:
    0 12px 48px rgba(42,15,28,.12),
    inset 0 1px 0 rgba(255,255,255,.65);

  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.pill-nav.is-hidden{
  opacity:0;
  transform:translateX(-50%) translateY(-16px);
  pointer-events:none;
}
.pill-nav a{
  font-family:"DM Sans",sans-serif;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--fg);
  opacity:.65;
  transition: opacity .25s ease, transform .25s ease;
  padding:2px 2px;
}
.pill-nav a:hover{opacity:1}
.pill-nav a.active{opacity:1}

.pill-active{
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  height:36px;width:80px;
  border-radius:999px;
  opacity:.95;
  pointer-events:none;

  background: rgba(224,138,165,.20);
  border: 1px solid rgba(224,138,165,.26);
  box-shadow:
    0 8px 20px rgba(42,15,28,.08),
    inset 0 1px 0 rgba(255,255,255,.55);

  transition: width .45s cubic-bezier(.2,.8,.2,1),
              transform .45s cubic-bezier(.2,.8,.2,1),
              opacity .25s ease;
}

/* REVEAL TEXT (slower + softer) */
.reveal-text{display:inline-block}
.reveal-wrap{display:inline}
.reveal-word{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  filter:blur(8px);
  transition:
    opacity 1.15s cubic-bezier(.2,.8,.2,1),
    transform 1.35s cubic-bezier(.2,.8,.2,1),
    filter 1.35s cubic-bezier(.2,.8,.2,1);
}
.is-revealed .reveal-word{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* WORKS: horizontal rail */
.works-panel{
  flex-direction:column;
  align-items:stretch;
  gap:22px;
}
.works-head{
  width:min(1100px, 100%);
}
.works-head h2{
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  line-height:1.05;
}
.works-sub{
  margin-top:10px;
  color:#fff;
  max-width:560px;
  line-height:1.6;
}

/* the horizontal scroll area */
.works-rail{
  width:100%;
  display:flex;
  gap:18px;
  padding: 18px 6px 6px;

  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar (still scrollable) */
  scrollbar-width:none;
}
.works-rail::-webkit-scrollbar{display:none}

.work-tile{
  flex: 0 0 auto;
  width: min(460px, 78vw);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow:hidden;
  scroll-snap-align:start;

  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 18px 60px rgba(42,15,28,.10);

  transition: transform .55s cubic-bezier(.2,.8,.2,1),
              box-shadow .55s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
.work-tile:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 26px 86px rgba(42,15,28,.14);
}
.work-tile img,
.work-tile video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}

/* MODAL */
.work-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}
.work-modal.is-open{display:block}

.work-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(12, 6, 9, 0.22);
}

.work-modal__card{
  position:relative;
  width:min(980px, 92vw);
  margin: 90px auto;
  border-radius: 22px;
  overflow:hidden;

  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 40px 140px rgba(42,15,28,.18);
}

.work-modal__close{
  position:absolute;
  top:12px;right:12px;
  width:38px;height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.28);
  color: var(--fg);
  font-size:22px;
  cursor:pointer;
}

.work-modal__media{
  width:100%;
  max-height: 68vh;
  background: rgba(255,255,255,.10);
}
.work-modal__media img,
.work-modal__media video{
  width:100%;
  height:100%;
  max-height:68vh;
  object-fit:contain;
  display:block;
}

.work-modal__meta{
  padding: 18px 18px 22px;
  color: #fff;
}
.work-modal__titleRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}
.work-modal__titleRow h3{
  font-family:"Playfair Display",serif;
  font-weight:600;
  font-size: 22px;
}
.work-modal__titleRow span{
  color: var(--muted);
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.work-modal__meta p{
  margin-top:10px;
  color: #fff;
  line-height:1.6;
}

/* RESPONSIVE */
@media (max-width:768px){
  .panel{padding:140px 24px 80px}
  .b4{display:none}
  .intro h1{font-size:clamp(4.2rem, 14vw, 9rem)}
  .work-modal__card{margin: 70px auto;}
}
/* =========================
   WORKS (HORIZONTAL GALLERY)
========================= */

.works-panel {
  /* keep vertical section spacing, but let gallery breathe */
  padding: 140px 0 90px;
  align-items: flex-start;
}

.works-head {
  width: min(1100px, 100% - 48px);
  margin: 0 auto 22px;
  padding: 0 24px;
}

.works-sub {
  max-width: 60ch;
}

.contact-icons{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  justify-content:center;
  transform: translateY(-25px);
}

.contact-icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.contact-icons img{
  width:35px;
  height:auto;
  filter: drop-shadow(0 10px 30px rgba(42,15,28,.18));
  opacity:.9;
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}

.contact-icons a:hover img{
  opacity:1;
  transform: translateY(-2px) scale(1.05);
  filter:
    drop-shadow(0 0 12px rgba(255,214,230,.6))
    drop-shadow(0 12px 30px rgba(42,15,28,.24));
}

/* The horizontal rail */
.works-rail {
  /* big tiles, smooth scroll */
  display: flex;
  gap: 22px;
  align-items: flex-end;

  padding: 26px 6vw 42px;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: auto;                 /* JS handles smoothing */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  /* hide scrollbar (still scrolls) */
  scrollbar-width: none;
}
.works-rail::-webkit-scrollbar { height: 0; }

/* Each tile is BIG */
.work-tile {
  flex: 0 0 auto;
  width: clamp(320px, 70vw, 980px);      /* 👈 bigger tiles */
  height: min(74vh, 720px);              /* 👈 tall tiles */

  border-radius: 22px;
  overflow: hidden;

  /* subtle glassy frame so it looks premium but not “card separated” */
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 22px 70px rgba(42,15,28,0.10);

  scroll-snap-align: center;

  position: relative;
  cursor: pointer;
  transform: translateZ(0);
}

.work-tile img,
.work-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;                     /* 👈 fills the tile */
  display: block;
  transform: scale(1.02);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), filter 600ms ease;
  filter: contrast(1.02) saturate(1.04);
}

.work-tile:hover img,
.work-tile:hover video {
  transform: scale(1.06);
  filter: contrast(1.06) saturate(1.10);
}

/* optional: a soft gradient at bottom for readability if you add labels later */
.work-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 65%, rgba(0,0,0,0.08), transparent 60%);
  opacity: 0.75;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .works-panel { padding: 120px 0 70px; }
  .works-head { width: calc(100% - 28px); padding: 0 14px; }
  .works-rail { gap: 14px; padding: 18px 18px 34px; }
  .work-tile { width: 88vw; height: 66vh; border-radius: 18px; }
}

.works-rail{
  position: relative;
  overflow: hidden;         /* no native scrolling */
  width: 100%;
  margin-top: 22px;
  touch-action: pan-y;      /* allow vertical page scroll outside drag */
}

.works-track{
  display: flex;
  gap: 22px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.work-tile{
  flex: 0 0 auto;
  width: min(72vw, 980px);  /* BIG tiles */
  height: min(70vh, 720px);
  border-radius: 22px;
  overflow: hidden;
}

.work-tile img,
.work-tile video{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* change to contain if you prefer */
  display: block;
}

.works-rail{ cursor: grab; }
.works-rail.is-dragging{ cursor: grabbing; }
.works-rail { overflow: hidden; }
.works-track { display: flex; gap: 22px; will-change: transform; }
/* ============================
   EXPERIENCE PAGE
   (add at bottom of styles.css)
============================ */

.exp-panel {
  align-items: flex-start;
  padding-top: 140px;
  padding-bottom: 140px;
}

.exp-stack {
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vh, 120px);
}

/* alternating layout */
.exp-item {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  position: relative;
}

.exp-item.exp-right {
  grid-template-columns: 1fr 1.35fr;
}
.exp-item.exp-right .exp-media { order: 2; }
.exp-item.exp-right .exp-text  { order: 1; }

/* big media card */
.exp-media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(320px, 46vh, 520px);
  display: grid;
  place-items: center;
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  filter: blur(10px);
  transition:
    transform 1.05s cubic-bezier(.2,.8,.2,1),
    opacity 1.05s cubic-bezier(.2,.8,.2,1),
    filter 1.05s cubic-bezier(.2,.8,.2,1);
}

/* same “glass” vibe, but not a separate white panel */
.exp-glass {
  background: radial-gradient(1200px 600px at 20% 18%, rgba(255,255,255,.55), rgba(255,255,255,.10) 55%, rgba(255,255,255,0) 75%);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    0 30px 90px rgba(42,15,28,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.exp-media img,
.exp-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.exp-media video {
  background: rgba(255,255,255,.15);
}

/* year pill on media */
.exp-pill {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: "DM Sans", sans-serif; /* keep clean */
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,250,252,.70);
  border: 1px solid rgba(224,138,165,.28);
  box-shadow: 0 10px 30px rgba(42,15,28,.10);
}

/* text side */
.exp-text {
  max-width: 520px;
}

/* small category label */
.exp-kicker {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* title matches your serif */
.exp-title {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  margin-bottom: 16px;
  color: var(--fg);
}

.exp-title.script-title{
  font-family:"Shadows Into Light",cursive;
  font-weight:700;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height:1.05;
  color:#fff;
}

/* body copy blends with background */
.exp-desc {
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
  max-width: 52ch;
}

/* link */
.exp-actions { margin-top: 22px; }
.exp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", sans-serif;
  text-decoration: none;
  color: var(--fg);
  opacity: .78;
  transition: opacity .25s ease, transform .25s ease;
}
.exp-link:hover { opacity: 1; transform: translateX(2px); }

/* reveal trigger for exp media */
.panel.is-revealed .exp-media {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* optional: tiny hover life */
.exp-media:hover img,
.exp-media:hover video {
  transform: scale(1.04);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

/* responsive */
@media (max-width: 900px) {
  .exp-item,
  .exp-item.exp-right {
    grid-template-columns: 1fr;
  }
  .exp-item.exp-right .exp-media,
  .exp-item.exp-right .exp-text {
    order: unset;
  }
  .exp-text { max-width: 100%; }
  .exp-media { min-height: 42vh; }
}