/* Motion layer: native scroll, decorative light, tactile feedback.
   The underlying V19 layout and all intrinsic image proportions are preserved. */
.hero-studio { --ambient-play:paused; }
.studio-light {
  width:900px;height:650px;top:-25px;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--tone) 25%,transparent),transparent 68%);
}
.studio-arch {overflow:hidden;}
.studio-arch::after {
  content:'';position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(115deg,transparent 28%,color-mix(in srgb,var(--tone) 18%,transparent) 44%,color-mix(in srgb,var(--v19-highlight) 70%,transparent) 50%,transparent 65%);
}
.product-halo {overflow:hidden;}
.product-halo::after {
  content:'';position:absolute;inset:-25%;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--tone) 20%,transparent),transparent 65%);
}
.launch-section {position:relative;isolation:isolate;overflow:clip;}
.launch-section::before {
  content:'';position:absolute;z-index:-1;width:min(620px,110%);height:500px;left:50%;top:0;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--gold) 9%,transparent),transparent 67%);
}
@media(prefers-reduced-motion:no-preference) {
  .hero-product {
    transform:perspective(1400px) translateY(calc((1 - var(--hero-arrival,1))*42px)) rotateY(calc((1 - var(--hero-arrival,1))*-16deg)) rotateZ(calc((1 - var(--hero-arrival,1))*-4deg));
  }
  .studio-arch {translate:0 calc((1 - var(--hero-arrival,1))*55px);}
  .studio-light {animation:studio-breathe 7s ease-in-out infinite alternate;animation-play-state:var(--ambient-play,paused);}
  .studio-arch::after {animation:studio-sweep 9s ease-in-out infinite;animation-play-state:var(--ambient-play,paused);}
  .hero-phone {transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s var(--ease),box-shadow .5s;}
  .feature-phone {transform:perspective(1300px) translateY(calc((1 - var(--product-progress,1))*40px)) rotateY(calc((1 - var(--product-progress,1))*-15deg + var(--tilt-y,0deg))) rotateX(var(--tilt-x,0deg)) rotateZ(calc((1 - var(--product-progress,1))*4deg));transition:box-shadow .4s;}
  .product-halo {scale:calc(.88 + var(--product-progress,1)*.12);transform-origin:50% 100%;}
  .product-halo::after {animation:halo-drift 8s ease-in-out infinite alternate;animation-play-state:var(--ambient-play,paused);}
  .box-invite>span,.button>span,.text-link>span,.nav-cta>span,.round-link b {transition:transform .35s var(--ease);}
  .button,.nav-cta,.store-badge,.hero-pillar-nav button,.currency-options button {transition:translate .3s var(--ease),background .3s,box-shadow .3s;}
  .hero-pillar-nav button svg,.feature-tabs svg {transition:transform .45s var(--ease);}
  .hero-pillar-nav button[aria-pressed=true] svg,.feature-tabs [aria-selected=true] svg {transform:scale(1.09);}
  .button:active,.nav-cta:active,.store-badge:active,.currency-options button:active {translate:0 1px;}
  .launch-section::before {animation:launch-light 8s ease-in-out infinite alternate;animation-play-state:var(--ambient-play,paused);}
  .global-words-track {animation-play-state:var(--ambient-play,paused);}
  [data-in-view=true] {--ambient-play:running;}
  .page-hidden [data-in-view] {--ambient-play:paused;}
  dialog[open] {animation:sheet-arrive .4s var(--ease);}
  dialog[open]::backdrop {animation:backdrop-arrive .4s ease;}
  @media(hover:hover) and (pointer:fine) {
    .button:hover,.nav-cta:hover,.store-badge:hover {translate:0 -3px;}
    .hero-pillar-nav button:hover,.currency-options button:hover {translate:0 -2px;}
    .text-link:hover>span,.box-invite:hover>span {transform:translate(3px,-3px);}
    .round-link:hover b {transform:rotate(90deg);}
    .vector-box:hover {box-shadow:0 22px 50px var(--v19-shadow);}
    .hero-phone:hover,.feature-phone:hover {box-shadow:0 36px 65px var(--v19-shadow),0 0 0 1px color-mix(in srgb,var(--tone) 40%,transparent);}
  }
  @media(max-width:599px) {
    .hero-product {transform:perspective(1200px) translateY(calc((1 - var(--hero-arrival,1))*24px)) rotateY(calc((1 - var(--hero-arrival,1))*-10deg));}
    .feature-phone {transform:perspective(1200px) translateY(calc((1 - var(--product-progress,1))*25px)) rotateY(calc((1 - var(--product-progress,1))*-10deg));}
  }
}
@keyframes studio-breathe {from{opacity:.65;scale:.92;translate:-25px 0}to{opacity:1;scale:1.08;translate:25px 12px}}
@keyframes studio-sweep {0%,15%{translate:-30% 0;opacity:0}40%,65%{opacity:.8}85%,100%{translate:30% 0;opacity:0}}
@keyframes halo-drift {from{translate:-15px 20px;opacity:.45}to{translate:20px -30px;opacity:1}}
@keyframes launch-light {from{scale:.88;opacity:.55}to{scale:1.12;opacity:1}}
@keyframes sheet-arrive {from{opacity:.2;translate:0 24px;scale:.975}to{opacity:1;translate:0 0;scale:1}}
@keyframes backdrop-arrive {from{opacity:0}to{opacity:1}}