/* "Live" motion layer for / and /try (js/live.js). Only active when html.live is set,
   which js/live.js skips for reduced-motion visitors. */

/* Floating petals drifting up through dark sections */
.petal-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.petal-field i {
  position: absolute; bottom: -60px; width: var(--s); height: calc(var(--s) * 1.9); border-radius: 50%; opacity: 0;
  animation: drift var(--d) linear infinite; animation-delay: var(--delay);
}
.petal-field i.g { background: linear-gradient(135deg, #F6D27A, #C8902E); }
.petal-field i.s { background: linear-gradient(135deg, #B5D08F, #3F5F3A); }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: var(--o); }
  90% { opacity: var(--o); }
  100% { transform: translate3d(var(--x), -115vh, 0) rotate(var(--r)); opacity: 0; }
}

/* 3D tilt with a moving gold glare */
.live .tiltable { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .18s ease-out, box-shadow .16s ease; will-change: transform; }
.live .tiltable::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(246,210,122,.22), transparent 55%); opacity: 0; transition: opacity .2s; }
.live .tiltable:hover::after, .live .tiltable:active::after { opacity: 1; }
.live .feature.tiltable, .live .doc-tile.tiltable, .live .sample-card.tiltable, .live details.tiltable { position: relative; }

/* Petal burst from the finger */
.tap-burst { position: fixed; width: 0; height: 0; z-index: 999; pointer-events: none; }
.tap-burst i { position: absolute; width: 12px; height: 26px; margin: -13px 0 0 -6px; border-radius: 50%; animation: tapBurst .65s cubic-bezier(.2,.8,.3,1) forwards; }
.tap-burst i:nth-child(odd) { background: linear-gradient(135deg, #F6D27A, #C8902E); }
.tap-burst i:nth-child(even) { background: linear-gradient(135deg, #B5D08F, #3F5F3A); }
@keyframes tapBurst { from { transform: rotate(var(--a)) translateY(0) scale(.5); opacity: 1; } to { transform: rotate(var(--a)) translateY(-90px) scale(1.1); opacity: 0; } }

/* Scroll progress bar */
.scroll-bar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #B5D08F, #F6D27A, #C8902E); box-shadow: 0 0 12px rgba(246,210,122,.6); pointer-events: none; }

/* Scroll-linked parallax and spin */
.live [data-parallax] { translate: 0 var(--py, 0); }
.live [data-spin] { rotate: var(--spin, 0deg); transition: rotate .1s linear; }

/* Magnetic buttons */
.live [data-magnetic], .live .final .btn-gold, .live .cta .btn-gold { translate: var(--mx, 0) var(--my, 0); transition: translate .2s ease-out, transform .14s ease, box-shadow .14s ease; }

/* Generic reveal */
.live .live-reveal { opacity: 0; transform: translateY(26px) rotateX(-12deg); transform-origin: 50% 100%; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.live .live-reveal.live-in { opacity: 1; transform: none; }

/* ---------- website extras ---------- */
/* Ticker band of what you can scan */
.ticker { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); border-top: 3px solid var(--gold-l); border-bottom: 3px solid var(--gold-l); margin-top: 72px; transform: rotate(-1.2deg) scale(1.02); }
.ticker-track { display: flex; width: max-content; animation: tick 26s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 22px; padding: 16px 22px; font: 400 20px 'Archivo Black', 'Noto Sans Devanagari', sans-serif; text-transform: uppercase; white-space: nowrap; }
.ticker span::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #FBFAF4 0 25%, #C8902E 26% 60%, #3F5F3A 61%); }
:lang(hi) .ticker span { text-transform: none; font-weight: 900; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* Step connector that draws itself */
.live .steps { position: relative; }
.live .step { transition: transform .3s; }
.live .step .n { transition: transform .4s cubic-bezier(.2,.9,.3,1.4); }
.live .step:hover .n { transform: scale(1.25) rotate(-8deg); }

/* Final call to action: the petal tunnel from demo mode */
.final { position: relative; overflow: hidden; }
.final .tunnel-bg { position: absolute; inset: 0; perspective: 600px; perspective-origin: 50% 50%; pointer-events: none; }
.final .tunnel { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.final .ring-t { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: tunnelFly 9s linear infinite; animation-delay: calc(var(--k) * -1s); opacity: 0; }
.final .petal-t { position: absolute; width: 26px; height: 54px; margin: -27px 0 0 -13px; border-radius: 50%; transform: rotate(var(--a)) translateY(-150px); opacity: .5; }
.final .petal-t:nth-child(odd) { background: linear-gradient(135deg, #F6D27A, #C8902E); }
.final .petal-t:nth-child(even) { background: linear-gradient(135deg, #B5D08F, #3F5F3A); }
@keyframes tunnelFly { 0% { transform: translateZ(-1400px) rotate(0); opacity: 0; } 15% { opacity: .8; } 85% { opacity: .45; } 100% { transform: translateZ(520px) rotate(120deg); opacity: 0; } }
.final-in { z-index: 1; }

/* Hero headline glow breathing */
.live .hero h1 .serif, .live .hero h1 em { filter: drop-shadow(0 0 0 rgba(246,210,122,0)); animation: glow 4s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 14px rgba(246,210,122,.45)); } }

/* App: home buttons float gently, result cards rise in */
.live .home-actions .btn-gold { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -4px; } }
.live .sample-card .thumb-inner { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.live .sample-card:hover .thumb-inner { transform: translateX(-50%) scale(.46) rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .final .tunnel-bg { display: none; }
}

/* Keep the final headline readable over the tunnel: gold-only gradient, softer petals. */
.final h2 .serif.gtext { background: linear-gradient(110deg, #F6D27A 0%, #FFE9A8 45%, #C8902E 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.final .petal-t { opacity: .3; }
.final .final-in::before { content: ""; position: absolute; inset: 10% 5%; z-index: -1; background: radial-gradient(closest-side, rgba(15,22,14,.85), transparent); }