/* Approved homepage motion; loaded only by the five localized homepages. */
.reveal, .in .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
.hero__title .word { animation: none; transform: none; }
.hero { isolation: isolate; }
.hero__copy { position: relative; z-index: 3; }
.hero .field__blob { animation: none; }
.hero__stack {
  display: block; width: calc(100% + 56px); height: 580px;
  margin: 4px -28px 44px; align-self: center; isolation: isolate;
}
.phone-scene { position: absolute; inset: -16px -12px; z-index: 2; pointer-events: none; }
.phone-scene canvas { display: block; width: 100%; height: 100%; visibility: hidden; }
.phone-poster { position: absolute; inset: -16px -12px; z-index: 2; pointer-events: none; }
.phone-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.has-webgl .phone-poster, .has-fallback .phone-poster { visibility: hidden; }
.has-webgl .phone-scene canvas { visibility: visible; }
.stage-light {
  position: absolute; left: -7%; right: -9%; top: -4%; bottom: -5%; z-index: 0;
  background: radial-gradient(ellipse at 55% 48%, rgba(255,249,227,.66) 0%, rgba(255,228,213,.34) 29%, rgba(255,203,226,.08) 55%, transparent 68%);
  pointer-events: none;
}
.stage-shadow {
  position: absolute; width: 85%; height: 74px; bottom: 6px; left: 7.5%; z-index: 1;
  background: radial-gradient(ellipse, rgba(96,34,59,.24), rgba(126,35,69,.09) 38%, transparent 69%);
  /* Hidden from first paint; the existing intro owns the fade-in. */
  transform: scaleX(.88); opacity: 0; pointer-events: none;
}
.phone-fallback { position: absolute; inset: 30px 0; display: flex; justify-content: center; align-items: center; gap: 0; visibility: hidden; }
.has-fallback .phone-fallback { visibility: visible; }
.phone-fallback .hphone { animation: none; max-height: 100%; width: 31.9%; flex-shrink: 1; }
.phone-fallback .hphone--front { width: 36%; z-index: 3; }
.phone-fallback .hphone--left { transform: rotate(-6deg); }
.phone-fallback .hphone--right { transform: rotate(6deg); }
.has-webgl .phone-fallback { opacity: 0; visibility: hidden; }
.hero-chip { animation: none; z-index: 4; opacity: 0; visibility: hidden; transform: scale(.9); }
.hero-chip--left { left: 3%; top: 0; transform-origin: top left; }
.hero-chip--right { right: 2%; bottom: -8px; transform-origin: bottom right; }
.hero-motion-controls { position: absolute; right: max(24px, calc((100vw - 1220px)/2)); bottom: 12px; display: flex; align-items: center; gap: 4px; z-index: 5; }
.hero-motion-controls button { display: inline-flex; gap: 6px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-soft); padding: 8px; font: 600 11px var(--font); min-height: 36px; border-radius: 20px; transition: background .2s ease; }
.hero-motion-controls button:hover { background: rgba(255,255,255,.32); }
.hero-motion-controls svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-motion-controls .play-icon { display: none; }
.motion-paused .hero-motion-controls .pause-icon { display: none; }
.motion-paused .hero-motion-controls .play-icon { display: block; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.hero-offscreen .hero__stack *, .hero-offscreen .hero__stack *::before { animation-play-state: paused !important; }
.card { transition: box-shadow .3s ease; }
.card:hover { transform: none; }
.gallery__track { scroll-behavior: smooth; }
@media (min-width: 1450px) {
  .hero__stack { height: 610px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hero__stack { height: 530px; width: calc(100% + 32px); margin-inline: -16px; }
}
@media (max-width: 900px) {
  .hero__stack { width: min(660px, calc(100% + 24px)); height: calc(clamp(390px, 78vw, 580px) + 110px); margin: 35px auto 60px; }
  .phone-scene, .phone-poster { inset: 43px -8px; }
  .hero-chip--left { left: 3%; top: -10px; }
  .hero-chip--right { right: 3%; bottom: clamp(20px, calc(156.5px - 35vw), 44px); }
  .hero-motion-controls { right: 14px; bottom: 12px; }
}
@media (max-width: 480px) {
  .hero .eyebrow { font-size: clamp(10px, 2.9vw, 12.5px); letter-spacing: .11em; padding-inline: 14px; }
  .hero__stack { width: calc(100% + 16px); margin-inline: -8px; height: 505px; margin-top: 30px; }
  .stage-shadow { bottom: 6px; height: 56px; }
  .hero-motion-controls button { min-height: 38px; }
}
@media (prefers-color-scheme: dark) {
  .stage-light { background: radial-gradient(ellipse at 55% 48%, rgba(150,76,141,.34), rgba(100,72,167,.16) 39%, transparent 68%); }
  .stage-shadow { background: radial-gradient(ellipse, rgba(0,0,0,.7), transparent 67%); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-scene canvas { transition: none; }
  .hero-motion-controls { display: none; }
  .reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* Controls become interactive when the scene or complete fallback is ready. */
.hero-motion-controls { visibility: hidden; }
.motion-ready .hero-motion-controls { visibility: visible; }
.motion-failed .hero-chip { opacity: 1 !important; visibility: visible !important; transform: scale(.9) !important; }
.motion-failed .phone-fallback { visibility: hidden; }
.motion-failed .phone-poster { visibility: visible; }
.motion-unavailable .reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* Text starts at first paint, independent of the 3D download. */
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(var(--copy-y, 16px)); } to { opacity: 1; transform: none; } }
@keyframes hero-word-in { from { opacity: 0; transform: translateY(115%); } to { opacity: 1; transform: none; } }
.hero__copy:not(.copy-replayed) .eyebrow { --copy-y: 14px; animation: hero-copy-in .75s cubic-bezier(.22,1,.36,1) .12s backwards; }
.hero__copy:not(.copy-replayed) .word { animation: hero-word-in 1.04s cubic-bezier(.16,1,.3,1) calc(.24s + var(--word-delay, 0s)) backwards; }
.hero__copy .word:nth-child(2) { --word-delay: .07s; }
.hero__copy .word:nth-child(3) { --word-delay: .14s; }
.hero__copy .word:nth-child(4) { --word-delay: .21s; }
.hero__copy .line:nth-child(2) .word:nth-child(1) { --word-delay: .21s; }
.hero__copy .line:nth-child(2) .word:nth-child(2) { --word-delay: .28s; }
.hero__copy .line:nth-child(2) .word:nth-child(3) { --word-delay: .35s; }
.hero__copy:not(.copy-replayed) .hero__sub { animation: hero-copy-in .9s cubic-bezier(.22,1,.36,1) .68s backwards; }
.hero__copy:not(.copy-replayed) .hero__cta { --copy-y: 14px; animation: hero-copy-in .85s cubic-bezier(.22,1,.36,1) .86s backwards; }
.hero__copy:not(.copy-replayed) .hero__proof { --copy-y: 10px; animation: hero-copy-in .8s cubic-bezier(.22,1,.36,1) 1.02s backwards; }
.motion-paused .hero__copy .reveal, .motion-paused .hero__copy .word { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero__copy .reveal, .hero__copy .word { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Static fallback shadows appear only after the complete phones are ready. */
.has-fallback .stage-shadow, .motion-failed .stage-shadow { opacity: .7; }