/* =========================================================================
   3D scroll FX — cinematic treatment experience.
   Native CSS scroll-driven animations (animation-timeline: view/scroll) give
   real, jank-free 3D depth on modern browsers (Edge/Chrome/Opera). Everything
   is progressive enhancement: gated behind @supports + prefers-reduced-motion,
   so unsupported browsers and reduced-motion users see the full content,
   perfectly legible, with no animation. Scoped to [data-fx-stage] so only the
   opted-in treatment template runs the show.
   ========================================================================= */

/* ---- Base (all browsers): structural, no motion dependency -------------- */
[data-fx="deck"] { perspective: 1500px; }
.txCardWrap { display: flex; }
.txCardWrap > .txCard { flex: 1; width: 100%; }

[data-tilt] {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
  will-change: transform;
}
[data-tilt]:hover { box-shadow: 0 40px 80px -40px rgba(6, 31, 25, .55); }
.txMediaTilt { transform-style: preserve-3d; will-change: transform; }

/* Horizontal scroll-snap carousel (works everywhere; wheel→x via JS). */
.fxCarousel {
  display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 22px; margin: 8px -4px 0; perspective: 1600px;
  scrollbar-width: thin; scrollbar-color: rgba(16, 35, 29, .28) transparent; -webkit-overflow-scrolling: touch;
}
.fxCarousel::-webkit-scrollbar { height: 8px; }
.fxCarousel::-webkit-scrollbar-thumb { background: rgba(16, 35, 29, .22); border-radius: 20px; }
.fxCarousel::-webkit-scrollbar-track { background: transparent; }
.fxCarousel > * { scroll-snap-align: center; flex: 0 0 clamp(270px, 42vw, 380px); }
.fxCarousel.isDragging { cursor: grabbing; scroll-snap-type: none; }
.fxHint { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 12.5px; letter-spacing: .04em; }

/* ---- Native scroll-driven 3D (modern browsers only) --------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Prose + section blocks rise with a hint of 3D tilt. */
    [data-fx-stage] .txOpenProse > *,
    [data-fx-stage] .innerBlockLabel,
    [data-fx-stage] .sectionHead,
    [data-fx-stage] .txSupportCopy,
    [data-fx-stage] .txSupportCall,
    [data-fx-stage] .pfIntro > *,
    [data-fx-stage] .pfCard,
    [data-fx-stage] .asideCard,
    [data-fx-stage] .innerFaq details,
    [data-fx-stage] .locFeature,
    [data-fx-stage] .locBand,
    [data-fx-stage] .metaChips {
      animation: fxRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }

    /* Chapter reveal is driven by GSAP + Lenis (refsite/anim.js), not native
       scroll-timeline — so the chapter rules live there, not here. */

    /* 3D card cascade — each card flips up from depth, staggered. */
    [data-fx="deck"] > * {
      animation: fxCard linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 44%;
      transform-origin: 50% 130%;
    }
    [data-fx="deck"] > *:nth-child(2) { animation-range: entry 6% cover 48%; }
    [data-fx="deck"] > *:nth-child(3) { animation-range: entry 11% cover 52%; }
    [data-fx="deck"] > *:nth-child(4) { animation-range: entry 15% cover 55%; }

    /* Carousel cards pop toward the viewer as they enter. */
    .fxCarousel > * {
      animation: fxPop linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% cover 55%;
    }

    /* Hero: content lifts + fades on exit; background pushes deeper (parallax). */
    [data-fx-hero] .innerHeroInner {
      animation: fxHeroLift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 92%;
    }
    [data-fx-hero] .innerHeroBg {
      animation: fxHeroZoom linear both;
      animation-timeline: view();
      animation-range: entry 100% exit 100%;
    }
  }
}

@keyframes fxRise  { from { opacity: 0; transform: translateY(46px) rotateX(7deg); } to { opacity: 1; transform: none; } }
@keyframes fxCard  { from { opacity: 0; transform: translateY(84px) translateZ(-140px) rotateX(19deg); } to { opacity: 1; transform: none; } }
@keyframes fxPop     { from { opacity: .25; transform: translateY(40px) scale(.93) rotateY(7deg); } to { opacity: 1; transform: none; } }
@keyframes fxHeroLift{ to { transform: translateY(-42px); opacity: .32; } }
@keyframes fxHeroZoom{ from { transform: scale(1.12); } to { transform: scale(1.26) translateY(34px); } }