/* ═══════════════════════════════════════════════════════
   INDX — FASHION SHOWCASE ("indx-fashion-showcase", Figma 2:401)

   The light editorial counterpoint to the dark portfolio landing: a magazine
   spread in paper white, with a serif masthead, polaroid frame sequences, a
   frosted pull-quote and a documentary filmstrip that never stops running.

   Palette is straight from the design and lands entirely on existing tokens:
     #f4f4f4 paper · #111 ink · #2f4560 navy body · #ff9124 accent
     #242e3d @25% for the filmstrip cards

   Motion follows the designer's "Fashion World" annotation: one elegant easing
   (cubic-bezier(.25,.1,.25,1)), spreads sliding in from −60px, a scroll-snap
   rail, the quote overlapping its images, and an infinite filmstrip loop.
   ═══════════════════════════════════════════════════════ */

.fx{
  --fx-ease:cubic-bezier(.25,.1,.25,1);
  --fx-navy:var(--accent-2);              /* #2f4560 */
  --fx-gutter:clamp(20px,5.5vw,80px);

  background:var(--paper-000);
  color:var(--ink-000);
  font-family:var(--font-body);
}
.fx ::selection{background:var(--ink-000);color:var(--paper-000);}

.fx-serif{font-family:var(--font-display);font-weight:900;line-height:.9;}
.fx-italic{font-style:normal;}

/* Small bold all-caps label — the page's connective tissue. */
.fx-label{
  font-weight:700;font-size:clamp(10px,.85vw,12px);
  text-transform:uppercase;letter-spacing:.12em;
}
.fx-label-navy{color:var(--fx-navy);font-size:clamp(9px,.8vw,11px);}

.fx-body{
  font-size:clamp(14px,1.05vw,15px);line-height:1.6;color:var(--fx-navy);
  max-width:46ch;
}

/* ── section rhythm: the design uses a flat 120px gap between blocks ── */
.fx main, .fx-masthead, .fx-hero, .fx-sequences, .fx-spread, .fx-reels,
.fx-archive, .fx-doc{
  max-width:1440px;margin-inline:auto;
}
.fx-masthead, .fx-hero, .fx-sequences, .fx-spread, .fx-reels,
.fx-archive, .fx-doc, .fx-next{
  padding-inline:var(--fx-gutter);
  margin-bottom:clamp(64px,9vw,120px);
}

/* Scroll-reveal: everything rises gently, honouring the one easing. */
[data-fx]{opacity:0;transform:translateY(28px);}
[data-fx].is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--fx-ease), transform .9s var(--fx-ease);
}


/* ══════════════ NAV ══════════════ */
.fx-nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:clamp(20px,2.6vw,32px) var(--fx-gutter);
  max-width:1440px;margin-inline:auto;
}
.fx-back, .fx-home{
  font-weight:700;font-size:clamp(9px,.8vw,11px);
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-000);
}
.fx-back:hover{color:var(--accent);}
.fx-home{display:inline-flex;align-items:baseline;gap:8px;}
.fx-home span{font-family:var(--font-mono);font-weight:400;letter-spacing:.24em;color:var(--fx-navy);}


/* ══════════════ 1 · MASTHEAD ══════════════ */
.fx-masthead{text-align:center;padding-block:clamp(24px,4vw,64px) clamp(32px,5vw,64px);}
.fx-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(64px,13vw,180px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.01em;
}
.fx-kicker{
  font-weight:700;font-size:clamp(10px,.85vw,12px);
  text-transform:uppercase;letter-spacing:.22em;margin-top:8px;
}


/* ══════════════ 2 · HERO EDITORIAL ══════════════ */
.fx-hero{
  display:grid;grid-template-columns:minmax(0,860fr) minmax(280px,420fr);
  gap:clamp(28px,3.4vw,48px);align-items:center;
}
.fx-hero-media{
  position:relative;border-radius:8px;overflow:hidden;aspect-ratio:860/600;
  background:rgba(17,17,17,.05);           /* holds the frame while a slide loads */
  touch-action:pan-y;                       /* let vertical scroll through; we own the x */
}
.fx-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* Slides stack; only opacity moves, so the crossfade never reflows the grid. */
.fx-hero-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s var(--fx-ease), visibility 0s linear .9s;
}
.fx-hero-slide.is-active{opacity:1;visibility:visible;transition-delay:0s,0s;}
.fx-hero-media.is-live{cursor:pointer;}

/* Controls sit over the image bottom-left, on a scrim so they stay legible
   whatever the frame underneath is doing. */
.fx-hero-ui{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:14px;
  padding:clamp(46px,5vw,64px) clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px);
  background:linear-gradient(to top, rgba(17,17,17,.62), rgba(17,17,17,.28) 55%, transparent);
  opacity:0;transition:opacity .35s var(--fx-ease);
}
.fx-hero-media:hover .fx-hero-ui,
.fx-hero-media:focus-within .fx-hero-ui,
.fx-hero-ui.is-shown{opacity:1;}

/* Touch has no hover to reveal them, so the controls are simply always there. */
@media (hover: none){
  .fx-hero-ui{opacity:1;}
}

.fx-hero-arrow{
  width:34px;height:34px;flex:0 0 auto;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(244,244,244,.9);color:var(--ink-000);
  font-size:16px;line-height:1;
  transition:background .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.fx-hero-arrow:hover{background:#fff;transform:scale(1.06);}
.fx-hero-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.fx-hero-dots{display:flex;gap:8px;margin-left:auto;}
.fx-hero-dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(244,244,244,.62);
  box-shadow:0 0 0 1px rgba(17,17,17,.35);   /* legible over a blown-out frame */
  transition:background .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.fx-hero-dot:hover{background:rgba(244,244,244,.95);}
.fx-hero-dot[aria-current="true"]{background:var(--accent);transform:scale(1.35);}
.fx-hero-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  .fx-hero-slide{transition-duration:.01ms;}
  .fx-hero-ui{opacity:1;}
}
.fx-hero-meta{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,32px);}
.fx-field{display:flex;flex-direction:column;gap:12px;}
.fx-name{font-size:clamp(32px,3.4vw,48px);text-transform:uppercase;}
.fx-collection{font-size:clamp(24px,2.3vw,32px);}
.fx-rule{border:0;border-top:1px solid rgba(17,17,17,.15);}
.fx-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:clamp(11px,.95vw,13px);
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-000);
  padding-top:12px;
}
.fx-cta img{transition:transform .35s var(--fx-ease);}
.fx-cta:hover img{transform:translateX(5px);}


/* ══════════════ 3 · FRAME SEQUENCES ══════════════ */
.fx-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(28px,3.4vw,48px);}
.fx-h2{font-size:clamp(26px,2.6vw,36px);text-transform:uppercase;}

.fx-rail{
  display:flex;gap:20px;align-items:center;
  padding:24px 16px 32px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  /* bleed to the viewport edge so the rail reads as a strip, not a box */
  margin-inline:calc(var(--fx-gutter) * -1);
  padding-inline:var(--fx-gutter);
  list-style:none;
}
.fx-rail::-webkit-scrollbar{display:none;}
.fx-card{
  flex:none;width:var(--w);scroll-snap-align:center;
  background:#fff;border-radius:6px;padding:16px;
  box-shadow:4px 12px 12px rgba(0,0,0,.06);
  rotate:var(--rot);
  transition:rotate .5s var(--fx-ease), transform .5s var(--fx-ease);
}
.fx-card:hover{rotate:0deg;transform:translateY(-6px);}
.fx-card img{
  display:block;width:100%;aspect-ratio:var(--w)/320;
  object-fit:cover;margin-bottom:12px;
}
.fx-card-t{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.fx-card-c{font-size:9px;color:var(--fx-navy);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;}


/* ══════════════ 4 · PULL QUOTE SPREAD ══════════════ */
.fx-spread{
  position:relative;
  display:grid;grid-template-columns:600fr 540fr;
  gap:clamp(16px,2vw,40px);align-items:center;
  min-height:clamp(360px,44vw,600px);
}
.fx-spread figure{border-radius:8px;overflow:hidden;}
.fx-spread img{width:100%;height:100%;object-fit:cover;display:block;}
.fx-spread-l{aspect-ratio:600/560;}
.fx-spread-r{aspect-ratio:540/440;margin-top:clamp(20px,4vw,60px);}

/* The quote straddles both plates — the annotation's "partially overlaps
   images via negative margin", done with absolute centring so it can't
   disturb the grid. */
.fx-quote{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  z-index:2;width:min(640px,86%);
  padding:clamp(20px,2.4vw,32px);
  text-align:center;border-radius:8px;
  background:rgba(255,255,255,.63);
  border:1px solid #fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.fx-quote p{font-size:clamp(28px,4.6vw,64px);margin-bottom:12px;}
.fx-quote cite{font-style:normal;display:block;}


/* ══════════════ 5 · RUNWAY STORIES ══════════════ */
/* The reels are the loudest thing on the page: full-bleed to the gutter (not
   capped at the 1440 text measure) and a true 9:16 vertical frame, so they read
   as reels rather than cropped stills. */
.fx-reels{max-width:none;}
.fx-reel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);align-items:start;
  max-width:1760px;margin-inline:auto;
}
/* the design steps each column down in turn — softened now they're this tall */
.fx-reel:nth-child(2){padding-top:clamp(16px,3vw,44px);}
.fx-reel:nth-child(3){padding-top:clamp(32px,6vw,88px);}
.fx-reel-media{
  position:relative;display:block;
  border-radius:16px;overflow:hidden;
  aspect-ratio:9/16;
  background:rgba(17,17,17,.06);
}
.fx-reel-media img,
.fx-reel-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--fx-ease);
}
.fx-reel-media:hover img,
.fx-reel-media:hover video{transform:scale(1.03);}
.fx-play{
  position:absolute;left:16px;top:16px;
  display:grid;place-items:center;width:64px;height:64px;border-radius:32px;
  background:rgba(255,255,255,.8);
  border:0;padding:0;cursor:pointer;
  transition:background .35s var(--fx-ease), transform .35s var(--fx-ease), opacity .35s var(--fx-ease);
}
.fx-reel-media:hover .fx-play{background:#fff;transform:scale(1.06);}
/* while a reel is running the control recedes; it returns on hover/focus */
.fx-reel-media.is-playing .fx-play{opacity:0;}
.fx-reel-media.is-playing:hover .fx-play,
.fx-play:focus-visible{opacity:1;}
.fx-reel-foot{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s2);margin-top:16px;
}
.fx-reel-n{font-weight:700;font-size:clamp(12px,1vw,14px);text-transform:uppercase;letter-spacing:.08em;}
.fx-reel-a{font-size:clamp(10px,.9vw,12px);color:var(--fx-navy);text-transform:uppercase;letter-spacing:.1em;}


/* ══════════════ 6 · THE ARCHIVE ══════════════
   Thirty shoots. A quiet, even grid so the photography carries the section —
   the editorial spread above already did the art direction. */
.fx-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:clamp(20px,2.4vw,32px);
}
.fx-shoot{display:flex;flex-direction:column;gap:12px;color:var(--ink-000);}
.fx-shoot-media{
  display:block;overflow:hidden;border-radius:6px;
  aspect-ratio:4/5;background:rgba(17,17,17,.06);
}
.fx-shoot-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--fx-ease), filter .5s var(--fx-ease);
}
.fx-shoot:hover .fx-shoot-media img{transform:scale(1.04);}
.fx-shoot-meta{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px;
}
.fx-shoot-t{
  font-weight:700;font-size:clamp(11px,1vw,13px);
  text-transform:uppercase;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fx-shoot-n{
  font-family:var(--font-mono);font-size:10px;color:var(--fx-navy);opacity:.7;
  white-space:nowrap;
}
.fx-shoot:hover .fx-shoot-t{color:var(--accent);}


/* ══════════════ 7 · DOCUMENTARY FILMSTRIP ══════════════ */
.fx-doc .fx-label{margin-bottom:clamp(20px,2.4vw,32px);}
.fx-strip{
  background:var(--ink-000);border-radius:12px;
  padding-block:24px;overflow:clip;
}
/* Sprocket rows: one repeating gradient beats 28 elements, twice over. */
.fx-perf{
  height:16px;margin-inline:24px;
  background:repeating-linear-gradient(to right,
    rgba(244,244,244,.2) 0 12px, transparent 12px 56px);
  border-radius:2px;
}
.fx-strip-track{
  display:flex;gap:24px;padding:16px 24px;width:max-content;
  animation:fxRoll 44s linear infinite;
}
.fx-strip:hover .fx-strip-track{animation-play-state:paused;}
.fx-strip-set{display:flex;gap:24px;}
@keyframes fxRoll{
  /* one full set + its trailing gap, so the seam is invisible */
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 12px));}
}
.fx-frame{
  display:flex;align-items:center;gap:16px;flex:none;
  background:rgba(36,46,61,.25);border-radius:4px;padding:12px;
}
.fx-frame img{width:220px;height:140px;object-fit:cover;display:block;}
.fx-frame figcaption{
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--font-mono);font-size:11px;
}
.fx-frame b{font-weight:400;color:var(--accent);}
.fx-frame span{color:var(--ink-100);}


/* ══════════════ FOOT NAV ══════════════ */
.fx-next{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  max-width:1440px;margin-inline:auto;
  padding-block:clamp(28px,4vw,48px);
  border-top:1px solid rgba(17,17,17,.15);
  font-weight:700;font-size:clamp(10px,.9vw,12px);
  text-transform:uppercase;letter-spacing:.14em;
}
.fx-next a{color:var(--ink-000);}
.fx-next a:hover{color:var(--accent);}
.fx-next-cta{color:var(--accent) !important;}




/* the album cards and reels are now genuinely clickable */
.fx-shoot,.fx-reel-media{cursor:pointer;}


/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1000px){
  .fx-hero{grid-template-columns:1fr;}
  .fx-reel-grid{grid-template-columns:1fr 1fr;}
  .fx-reel:nth-child(3){padding-top:0;}
}
@media (max-width:760px){
  /* The overlapping spread stops working once the plates are narrow: stack
     them and let the quote sit in the flow between. */
  .fx-spread{grid-template-columns:1fr;min-height:0;}
  .fx-spread-r{margin-top:0;}
  .fx-quote{
    position:static;translate:none;width:100%;
    margin-block:calc(clamp(16px,2vw,40px) * -1) 0;
  }
  .fx-reel-grid{grid-template-columns:1fr;gap:32px;}
  .fx-reel:nth-child(2){padding-top:0;}
  .fx-frame img{width:160px;height:104px;}
  .fx-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .fx-shoot-meta{grid-template-columns:1fr;}
  .fx-shoot-n{display:none;}   /* frame count is the first thing to go */
}


/* ══════════════ REDUCED MOTION ══════════════ */
@media (prefers-reduced-motion: reduce){
  [data-fx]{opacity:1;transform:none;transition:none;}
  .fx-strip-track{animation:none;}
  .fx-card{transition:none;}
  .fx-card:hover{rotate:var(--rot);transform:none;}
  .fx-reel-media img,.fx-play,.fx-cta img{transition:none;}
}