/* IdeaRevealSection — pinned scrollytelling between #weave ("And your listing
   photos will look like this.") and the logo marquee. Two sequential beats driven
   by a GSAP ScrollTrigger pin:
     1. "The AI Era" (black) blurs IN then blurs OUT (disappears).
     2. The video blurs IN small, then zooms up smoothly to near-full width (16:9,
        contained) as you keep scrolling; its blur clears as it grows.
   Static <link> (not piped through Lightning CSS) so filter:blur + clip survive.
   White background throughout to match the white #weave above and the white logo
   section below. */

/* The section is TALL (its own height = the scroll length); the child is sticky,
   so it stays put while you scroll through that height. This avoids GSAP pin +
   pinSpacing, whose injected spacer mis-measured this pin's start by exactly the
   weare pin-spacer above it (~1767px) under the shared Lenis scrollerProxy — the
   timeline jumped in at ~0.56 and the title beat was skipped. Sticky needs no
   spacer, so start/end are exact. ScrollTrigger here only scrubs (no pin). */
.idea-reveal {
  position: relative;
  background: #ffffff;
  height: 420svh; /* scroll length = ~3.2 viewports of animation + settle */
}

.idea-reveal__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Beat 1: "The AI Era" headline (black, blur in/out) ---- */
.idea-reveal__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6vw;
  text-align: center;
  font-family: var(--font-sf), -apple-system, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(2.594rem, 1.6rem + 2.65vw, 4rem);
  color: #0c0d0f;
  white-space: nowrap;
  will-change: opacity, filter, transform;
  /* JS sets opacity/filter via the scrub timeline; start hidden+blurred so it
     blurs in. A no-JS / reduced-motion fallback below shows it crisply. */
  opacity: 0;
  filter: blur(26px);
  transform: translateZ(0);
}

/* ---- Beat 2: the video, small -> full ---- */
.idea-reveal__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* JS scales this wrapper from small to ~full; start hidden for the blur-in. */
  opacity: 0;
  will-change: transform, opacity, filter;
  filter: blur(30px);
  transform: translateZ(0);
}

.idea-reveal__video-frame {
  position: relative;
  width: min(94vw, calc((100svh - 8vh) * 16 / 9)); /* full target: ~94vw, capped so 16:9 fits the height */
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 2.2vw, 34px);
  overflow: hidden;
  /* White (not black) so the frame's own background never shows as a dark edge
     under the rounded corners / while the stage is blurred — the section is all
     white and the video must blend into it with no dark rim. No box-shadow: its
     dark halo read as an inconsistent grey ring on the white background (the
     "viền đen" the user flagged). */
  background: #ffffff;
}

.idea-reveal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Progressive enhancement / reduced motion: if JS or the pin never runs, don't
   leave the section blank. Show the title crisply and the video at a sensible size. */
@media (prefers-reduced-motion: reduce) {
  .idea-reveal__title { opacity: 1; filter: none; }
  .idea-reveal__stage { opacity: 1; filter: none; transform: scale(0.62); }
}
.no-js .idea-reveal__title { opacity: 1; filter: none; }
.no-js .idea-reveal__stage { opacity: 1; filter: none; transform: scale(0.62); }

@media (max-width: 768px) {
  .idea-reveal__video-frame {
    width: min(92vw, calc((100svh - 6vh) * 16 / 9));
  }
}

/* MOBILE (≤640px): the 420svh scroll length reads as too much empty white
   between the #weave photo-deal and this "The AI Era" beat. The title is a
   TIMED play (scroll-locked, height-independent) and the video zoom is a
   scrub that still completes over a shorter length, so trim the section
   height to tighten the gap. Desktop/tablet keep 420svh. */
@media (max-width: 640px) {
  .idea-reveal {
    height: 288svh;
  }
}