/* Immersive layer for v2 pages. Every effect is opt-in through html.immersive, which
   immersive.js sets only when motion is allowed; without it pages show their final frame.
   Scroll progress arrives as --p (0 → 1) on elements marked data-scroll. */

/* Hero: the grid is centred so pointer light and beams sit on its lines. */
.v2-hero-grid { background-position: 50% 0; }
.v2-hero-spot, .v2-hero-beams { position: absolute; inset: 0 0 auto; height: 720px; z-index: -1; pointer-events: none; }
.v2-hero-spot { display: none; }
.v2-hero-beams { display: none; overflow: hidden; mask-image: radial-gradient(60% 70% at 50% 0%, #000 30%, transparent 75%); }
html.immersive .v2-hero-spot { display: block; opacity: 0; background-image: linear-gradient(color-mix(in srgb, var(--accent) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent) 1px, transparent 1px); background-size: 56px 56px; background-position: 50% 0; mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, -400px), #000, transparent 75%); transition: opacity .5s var(--ease); }
html.immersive .v2-hero.is-pointing .v2-hero-spot { opacity: .55; }
html.immersive .v2-hero-beams { display: block; }
.v2-hero-beams i { position: absolute; top: -140px; width: 1px; height: 140px; background: linear-gradient(180deg, transparent, var(--accent) 70%, #ffd8bf); opacity: 0; animation: beam 7s linear infinite; }
.v2-hero-beams i:nth-child(1) { left: calc(50% - 28px - 56px * 7); animation-delay: .6s; }
.v2-hero-beams i:nth-child(2) { left: calc(50% - 28px - 56px * 3); animation-delay: 3.4s; animation-duration: 8.5s; }
.v2-hero-beams i:nth-child(3) { left: calc(50% - 28px + 56px * 4); animation-delay: 1.8s; animation-duration: 6.5s; }
.v2-hero-beams i:nth-child(4) { left: calc(50% - 28px + 56px * 8); animation-delay: 5s; animation-duration: 9s; }
@keyframes beam { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 60% { opacity: .7; } 100% { transform: translateY(860px); opacity: 0; } }

/* Headlines arrive word by word, out of focus and settling into place. Units stay inline,
   so Chinese headings keep breaking only at punctuation and spaces. */
html.immersive h1.is-split[data-rise] { opacity: 1; animation: none; }
html.immersive h1.is-split .w { position: relative; opacity: 0; }
html.immersive h1.is-split.is-in .w { opacity: 1; animation: word-in 1.1s var(--ease) backwards; animation-delay: calc(var(--i) * 60ms + 60ms); }
.v2-hero h1.is-split { background: none; color: var(--ink); }
.v2-hero h1.is-split .w { background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 62%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes word-in { from { opacity: 0; top: .32em; filter: blur(12px); } }

/* The hero copy recedes as the page moves on. */
html.immersive [data-scroll='lift'] { opacity: calc(1 - var(--p, 0) * 1.1); transform: translateY(calc(var(--p, 0) * -48px)) scale(calc(1 - var(--p, 0) * .04)); transform-origin: 50% 100%; }

/* The product panel starts tilted back and lies flat as it reaches the reader. */
html.immersive .v2-stage { perspective: 1800px; }
html.immersive .v2-stage > .v2-run { transform: rotateX(calc((1 - var(--p, 1)) * 26deg)) scale(calc(.9 + var(--p, 1) * .1)); transform-origin: 50% 0; will-change: transform; }

/* Statements light up as they are read, Apple-style. */
.v2 .v2-statement { max-width: 980px; margin: 0 0 var(--v2-head); color: var(--ink); font-size: clamp(26px, 3.6vw, 44px); font-weight: 650; line-height: 1.35; letter-spacing: -.03em; text-wrap: pretty; }
:lang(zh) .v2-statement { word-break: keep-all; overflow-wrap: anywhere; }
html.immersive .v2-statement .hl { opacity: clamp(.16, (var(--p, 1) * 1.2 - var(--f)) * 8 + .16, 1); transition: opacity .25s linear; }

/* Process: a line draws once from the first step onward, lighting each number as it
   passes, so the three steps read as one journey. Without motion everything is lit. */
.v2-rail { display: none; }
@media (min-width: 721px) {
  .v2-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-grid); height: 9px; margin: 0 0 clamp(20px, 2.4vw, 32px); }
  .v2-rail::before, .v2-rail i { content: ''; position: absolute; left: 4px; right: 0; top: 4px; height: 1px; }
  .v2-rail::before { background: var(--hairline-strong); }
  .v2-rail i { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); transform-origin: 0 50%; }
  .v2-rail b { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
}
html.immersive .v2-journey .v2-rail i { transform: scaleX(0); }
html.immersive .v2-journey .v2-rail b { background: var(--surface-3); box-shadow: none; }
html.immersive .v2-journey .v2-step-no { opacity: .28; }
html.immersive .v2-journey.is-in .v2-rail i { animation: rail-draw 1.7s .35s cubic-bezier(.45, 0, .2, 1) forwards; }
html.immersive .v2-journey.is-in .v2-rail b { animation: dot-light .6s var(--ease) forwards; }
html.immersive .v2-journey.is-in .v2-step-no { animation: number-light .6s var(--ease) forwards; }
html.immersive .v2-journey.is-in .v2-rail b:nth-of-type(1), html.immersive .v2-journey.is-in .v2-step:nth-child(1) .v2-step-no { animation-delay: .35s; }
html.immersive .v2-journey.is-in .v2-rail b:nth-of-type(2), html.immersive .v2-journey.is-in .v2-step:nth-child(2) .v2-step-no { animation-delay: .9s; }
html.immersive .v2-journey.is-in .v2-rail b:nth-of-type(3), html.immersive .v2-journey.is-in .v2-step:nth-child(3) .v2-step-no { animation-delay: 1.45s; }
@keyframes rail-draw { to { transform: scaleX(1); } }
@keyframes dot-light { to { background: var(--accent); box-shadow: 0 0 0 4px var(--glow), 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); } }
@keyframes number-light { to { opacity: 1; } }

/* Screens and illustrations rise and un-tilt as they scroll into view. */
html.immersive .v2-shot { perspective: 1600px; }
html.immersive .v2-shot .v2-frame { transform: rotateX(calc((1 - var(--p, 1)) * 16deg)) scale(calc(.86 + var(--p, 1) * .14)); transform-origin: 50% 100%; will-change: transform; }
html.immersive .v2-shot::before { opacity: var(--p, 1); }
html.immersive .v2-scene-visual { perspective: 1400px; }
html.immersive .v2-scene-visual .v2-io { transform: translateY(calc((1 - var(--p, 1)) * 56px)) rotateX(calc((1 - var(--p, 1)) * 12deg)); transform-origin: 50% 100%; }

/* Cards lean toward the pointer with a moving sheen. */
@media (hover: hover) and (pointer: fine) {
  html.immersive [data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), border-color var(--duration-base) var(--ease); }
  html.immersive [data-tilt].is-tilting { transition-duration: .15s, var(--duration-base); }
  html.immersive :is(.v2-product, .v2-plan)[data-tilt]::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 0%), #ffffff14, transparent 60%); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
  html.immersive :is(.v2-product, .v2-plan)[data-tilt].is-tilting::before { opacity: 1; }
}