/* =====================================================================
   SERRES DRIVE — featured.css
   "Split-reveal studio carousel" for the three flagship cars on the
   home page (#featured). Two layout modes, gated on .fc-on:

   1) DEFAULT (no JS / reduced motion / GSAP failed): the markup in
      index.html renders as three stacked, static, readable photo links.
      Nothing is sticky, nothing is 320vh, nothing is hidden — the
      progress dots and the "keep scrolling" hint are the only things
      suppressed, because they are carousel chrome that would lie
      without the carousel behind them.

   2) ENHANCED (.fc-on, added only by js/featured.js): the section grows
      to 320vh, .fc-pin becomes a sticky full-viewport stage and the
      slides stack absolutely; featured.js drives the clip-path wipes
      off scroll progress.

   Everything here is scoped under .fc- (per site convention: never
   restyle .oa-* / .sd-* / .pl-* / .wp-* / .swc-* / .ink-*).

   NB on specificity: home.css ships `.home-exp .oa-exp p{font-size:13px}`
   (0,2,1). The eyebrow/hint rules below use `p.fc-…` selectors to tie
   that (this file loads after home.css, so the tie resolves our way).
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * Shared (both modes)                                                 *
 * ------------------------------------------------------------------ */
.fc-sec{background:var(--bg)}

/* "Destacados" is the section's marquee, not a whisper: big condensed caps
   in the brand's chrome gradient, with a heavier rule before it. It overlays
   the photos top-left while the carousel runs (.fc-on .fc-head), where the
   size + gradient keep it legible over any paintwork. */
.fc-sec p.fc-eyebrow{
  display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  font-family:var(--font-head);font-size:clamp(1.6rem,4.2vw,3rem);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.55));
}
.fc-sec p.fc-eyebrow::before{
  content:"";width:clamp(30px,4.5vw,58px);height:2px;flex:none;
  background:var(--gold-grad);opacity:.9;
}

.fc-slide{display:block;color:var(--white)}

/* Bottom scrim: keeps the big title readable over any paintwork, in
   both the static fallback and the fullscreen stage. */
.fc-slide::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(10,10,11,.86) 0%,rgba(10,10,11,.42) 46%,transparent 100%);
  pointer-events:none;z-index:2;
}

.fc-slide .fc-title{
  position:absolute;z-index:3;left:clamp(16px,4vw,52px);
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.9;white-space:nowrap;
  color:var(--white);
}
/* the make, as a small eyebrow above the big model name — keeps the heading
   (and its link's anchor text) "Lamborghini Urus" instead of a bare "Urus" */
.fc-slide .fc-title .fc-brand{
  display:block;font-size:clamp(.72rem,1.8vw,1.05rem);font-weight:600;
  letter-spacing:.32em;color:var(--gold);margin-bottom:.5em;
}

/* Character spans created by featured.js. inline-block so transforms
   apply; spaces are emitted as NBSP so they keep their width. */
.fc-ch{display:inline-block}

/* ------------------------------------------------------------------ *
 * Mode 1 — static stacked fallback (no .fc-on)                        *
 * ------------------------------------------------------------------ */
.fc-sec:not(.fc-on) .fc-pin{
  max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--nav-h) + 28px) var(--gutter) clamp(48px,8vh,84px);
  display:flex;flex-direction:column;gap:clamp(20px,3.5vh,34px);
}
.fc-sec:not(.fc-on) .fc-stage{
  display:flex;flex-direction:column;gap:clamp(18px,3vw,32px);
}
.fc-sec:not(.fc-on) .fc-slide{
  position:relative;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg-2);
}
.fc-sec:not(.fc-on) .fc-slide img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
}
.fc-sec:not(.fc-on) .fc-title{
  bottom:clamp(14px,3vw,26px);
  font-size:clamp(2.2rem,7vw,4.5rem);
}
/* Carousel chrome is meaningless without the carousel. */
.fc-sec:not(.fc-on) .fc-progress,
.fc-sec:not(.fc-on) .fc-hint{display:none}

/* ------------------------------------------------------------------ *
 * Mode 2 — sticky fullscreen stage (.fc-on, JS only)                  *
 * ------------------------------------------------------------------ */
/* section.fc-sec.fc-on out-specifies home.css's generic
   `.home-exp .oa-exp section{min-height:100vh}` for height purposes;
   320vh of section = 220vh of pinned travel for the two wipes. */
section.fc-sec.fc-on{height:320vh}

.fc-on .fc-pin{
  position:sticky;top:0;
  /* dvh, not svh: mid-page the mobile toolbar is collapsed and the visual
     viewport is TALLER than 100svh — an svh pin left a flat background
     strip under the photos for the whole pinned travel. dvh tracks the
     bar; vh is the no-dvh fallback. */
  height:100vh;height:100dvh;
  overflow:hidden;               /* imgs counter-translate ±500px — clip them */
}
.fc-on .fc-stage{position:absolute;inset:0}

/* Opaque background so the hidden car never ghosts through the wipe
   (the fixed WebGL canvas behind fades out elsewhere, but slides must
   stand alone). Initial clip/visibility handled by featured.js. */
.fc-on .fc-slide{
  position:absolute;inset:0;margin:0;border:0;border-radius:0;
  background:var(--bg);overflow:hidden;
}
.fc-on .fc-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;
}
.fc-on .fc-slide .fc-title{
  bottom:clamp(84px,13vh,128px);          /* clears hint + dots below */
  font-size:clamp(3rem,15vw,9.5rem);
}

.fc-on .fc-head{
  position:absolute;z-index:5;pointer-events:none;
  top:calc(var(--nav-h) + 6px);left:clamp(16px,4vw,52px);
}

.fc-on .fc-progress{
  position:absolute;z-index:5;pointer-events:none;
  left:50%;bottom:clamp(18px,4vh,34px);transform:translateX(-50%);
  display:flex;gap:9px;
}
.fc-on .fc-progress i{
  width:26px;height:2px;background:var(--line-2);
  transition:background .45s var(--ease),width .45s var(--ease);
}
.fc-on .fc-progress i.is-on{width:46px;background:var(--gold)}

.fc-sec.fc-on p.fc-hint{
  position:absolute;z-index:5;pointer-events:none;
  left:50%;bottom:clamp(40px,8.2vh,66px);transform:translateX(-50%);
  font-family:var(--font-head);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  color:var(--text-dim);
}

/* ------------------------------------------------------------------ *
 * Portrait (phones): the photo shows WHOLE, never cropped             *
 * ------------------------------------------------------------------ *
 * object-fit:cover of a ~3:2 landscape photograph in a portrait
 * viewport throws away two thirds of the car. In portrait the slide
 * box (and its wipe) stays fullscreen, but the photograph inside
 * becomes a full-width band at its own intrinsic ratio (the width/
 * height attributes), sitting just above centre with the title below
 * it over the plain background. Nothing is cropped, nothing overlaps.
 * The bottom scrim is dropped: the title no longer sits on the image,
 * and black-on-black gradient would only dull the photo's lower edge. */
@media (orientation:portrait){
  .fc-on .fc-slide img{
    inset:auto;left:0;right:0;
    top:44%;
    /* the CSS `translate` property, NOT transform: featured.js animates
       the wipe's counter-slide through GSAP's transform x, which would
       overwrite a transform-based centring. The two properties compose.
       (Engines without `translate` support just show the band a touch
       lower — nothing breaks.) */
    translate:0 -50%;
    width:100%;height:auto;
    object-fit:contain;
  }
  .fc-on .fc-slide::after{display:none}
  .fc-on .fc-slide .fc-title{
    top:auto;bottom:clamp(96px,15vh,150px);
    font-size:clamp(2.6rem,12.5vw,5rem);
  }
}