/* =============================================================================
   FADEHAUS — gradient-carousel.css  (issue #4317)

   A 3D card carousel that showcases the app's features, with a dynamic radial
   gradient backdrop whose colour is EXTRACTED from the active card's image at
   runtime and crossfades as the deck moves.

   Hand port of React Bits Pro "Gradient Carousel"
   (https://pro.reactbits.dev/docs/components/gradient-carousel). apps/web has
   NO build step and a self-only CSP, so this is plain CSS + vanilla JS — no
   React, no Tailwind, no motion lib, no CDN, no licence key. Behaviour is
   ported faithfully from the reference defaults.

   NAMESPACE: everything here is `.fhcar-*` / `[data-fh-carousel]`, deliberately
   distinct from the older dormant `.gcar-*` port in site.css §32 so the two can
   never double-init or share styles.

   PARAMETERS (React Bits reference defaults, mirrored as JS constants in
   js/gradient-carousel.js):
     Card Layout   Max Rotation 28deg · Max Depth 140px · Min Scale 0.92
                   Card Gap 15px · Card Aspect 3/4 (portrait) · Initial Index 0
     Interaction   Friction 0.95/frame · Drag Sens 1.0 · Wheel Sens 0.75 · keys
     Background    Blur 24px · Gradient Size 0.65 · Gradient Intensity 0.7
   ============================================================================= */

/* Registered custom properties: the ONLY way to get the radial-gradient colour
   to CROSSFADE. Un-registered vars snap; a registered <number> interpolates, so
   transitioning --fhcar-r/g/b animates the backdrop hue smoothly. Browsers
   without @property just snap the colour (still correct, just not animated). */
@property --fhcar-r { syntax: "<number>"; inherits: true; initial-value: 254; }
@property --fhcar-g { syntax: "<number>"; inherits: true; initial-value: 108; }
@property --fhcar-b { syntax: "<number>"; inherits: true; initial-value: 26; }

.fhcar{
  position:relative;
  margin-top:56px;
  --fhcar-blur: 24px;          /* Background Blur */
  --fhcar-size: 0.65;          /* Gradient Size (0-1, radial radius spread) */
  --fhcar-alpha: 0.7;          /* Gradient Intensity (0-1, peak opacity) */
  /* live tone, set by js/gradient-carousel.js from the active card's image */
  --fhcar-r: 254; --fhcar-g: 108; --fhcar-b: 26;
}

/* The backdrop: two radial pools in the extracted colour, heavily blurred,
   sitting behind the deck. Radius scales off --fhcar-size exactly as the
   reference's `gradientSize` prop. The colour channels crossfade via @property;
   the whole layer also eases its opacity in on ready. */
.fhcar-bg{
  position:absolute; inset:-6% 0 4%;
  border-radius:var(--radius-block, 32px);
  filter:blur(var(--fhcar-blur));
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:
    opacity .6s ease,
    --fhcar-r .6s ease, --fhcar-g .6s ease, --fhcar-b .6s ease;
  background:
    radial-gradient(circle at 32% 34%,
      rgba(var(--fhcar-r), var(--fhcar-g), var(--fhcar-b), var(--fhcar-alpha)) 0%,
      rgba(var(--fhcar-r), var(--fhcar-g), var(--fhcar-b), 0) calc(62% * var(--fhcar-size))),
    radial-gradient(circle at 70% 68%,
      rgba(var(--fhcar-r), var(--fhcar-g), var(--fhcar-b), calc(var(--fhcar-alpha) * .78)) 0%,
      rgba(var(--fhcar-r), var(--fhcar-g), var(--fhcar-b), 0) calc(68% * var(--fhcar-size)));
}
.fhcar.is-ready .fhcar-bg{ opacity:1; }

/* ---- The 3D stage ---------------------------------------------------------
   perspective + preserve-3d live here. tabindex=0 (in markup) makes arrows
   work; nothing calls focus() on load, so it never steals focus. */
.fhcar-stage{
  position:relative;
  height:clamp(360px, 52vw, 452px);
  perspective:1200px;
  perspective-origin:50% 45%;
  touch-action:pan-y;                 /* vertical page scroll always wins */
  outline:none;
  z-index:1;
}

/* ---- Base (no-JS) fallback: a plain horizontal scroll strip of cards. -----
   Fully usable with JS blocked/failed; JS swaps this for the 3D layout by
   adding `.fhcar--enhanced` on the root. */
.fhcar-track{
  list-style:none; margin:0; padding:0 8px;
  height:100%;
  display:flex; gap:15px; align-items:center;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.fhcar-card{
  flex:0 0 auto;
  scroll-snap-align:center;
  width:clamp(230px, 30vw, 300px);
  aspect-ratio:3 / 4;                  /* Card Aspect Ratio (portrait) */
}

/* ---- Enhanced (JS on): absolute-positioned 3D deck ------------------------ */
.fhcar--enhanced .fhcar-stage{ cursor:grab; }
.fhcar--enhanced .fhcar-stage.is-dragging{ cursor:grabbing; }
.fhcar--enhanced .fhcar-stage:focus-visible{
  outline:2px solid var(--orange, #FE6C1A); outline-offset:6px; border-radius:var(--radius-card, 24px);
}
.fhcar--enhanced .fhcar-track{
  position:absolute; inset:0;
  display:block; padding:0; overflow:visible;
  transform-style:preserve-3d;
  scroll-snap-type:none;
}
.fhcar--enhanced .fhcar-card{
  position:absolute; top:50%; left:50%;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform, opacity;
  /* transform/opacity are written every frame by JS, so NO transition here —
     the momentum model owns the motion. */
}

/* ---- The card itself: image-forward, title + one line over a bottom scrim -- */
.fhcar-card{
  border-radius:var(--radius-card, 24px);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line, #E8E2D8);
  box-shadow:var(--shadow-soft, 0 30px 80px -20px rgba(23,22,19,.18));
  user-select:none;
  -webkit-user-drag:none;
}
.fhcar-media{ position:absolute; inset:0; }
.fhcar-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  -webkit-user-drag:none;
  pointer-events:none;
}
/* legibility scrim so cream text always clears the saturated art */
.fhcar-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(14,12,10,.78) 0%,
    rgba(14,12,10,.34) 30%,
    rgba(14,12,10,0) 56%);
}
.fhcar-body{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:20px 20px 22px;
  color:var(--cream, #F2EDE6);
}
.fhcar-kicker{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream, #F2EDE6); opacity:.82;
  margin-bottom:8px;
}
.fhcar-title{
  font-family:var(--display, "Maven Pro", system-ui, sans-serif);
  font-weight:700; font-size:22px; line-height:1.08; letter-spacing:-.03em;
  margin:0;
}
.fhcar-line{
  margin:8px 0 0;
  font-size:14.5px; line-height:1.35; letter-spacing:-.01em;
  color:var(--cream, #F2EDE6); opacity:.9;
}

/* ---- Controls: siblings of the stage — nothing interactive is nested inside
   anything else interactive. Hidden in the no-JS strip (scroll IS the nav). --- */
.fhcar-controls{
  display:none;
  align-items:center; justify-content:center; gap:16px;
  margin-top:28px;
}
.fhcar--enhanced .fhcar-controls{ display:flex; }
.fhcar-nav{
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line, #E8E2D8); color:var(--ink, #171613);
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fhcar-nav:hover{
  border-color:var(--ink-decor, #98907F);
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft, 0 30px 80px -20px rgba(23,22,19,.18));
}
.fhcar-nav:disabled{ opacity:.4; cursor:default; transform:none; box-shadow:none; }
.fhcar-nav svg{ width:18px; height:18px; }
.fhcar-dots{ display:flex; align-items:center; gap:8px; }
.fhcar-dot{
  width:8px; height:8px; padding:0; border-radius:999px;
  border:0; background:var(--ink-decor, #98907F); cursor:pointer;
  transition:background .2s ease, width .2s ease;
}
.fhcar-dot[aria-current="true"]{ width:22px; background:var(--orange, #FE6C1A); }

.fhcar-hint{
  text-align:center; margin-top:14px;
  color:var(--ink-faint, #706A5C); font-size:14px; letter-spacing:-.01em;
}

@media (max-width:600px){
  .fhcar-stage{ height:clamp(340px, 96vw, 400px); }
  .fhcar--enhanced .fhcar-card{ width:min(74vw, 280px); }
  .fhcar-title{ font-size:20px; }
}

/* ---- Reduced motion -------------------------------------------------------
   No momentum, no parallax coasting, no colour crossfade. JS skips the rAF
   physics and jumps to the target card; the backdrop still recolours, just
   instantly. A short opacity nudge on the active card stands in for the glide. */
@media (prefers-reduced-motion: reduce){
  .fhcar-bg{ transition:opacity .3s ease; opacity:1; }
}