/* ═══════════════════════════════════════════════════════════════
   VoiceCalc AI — live demo, video reel, motion layer
   ═══════════════════════════════════════════════════════════════ */

/* ---------- scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent-gold), #fff6b0 60%, var(--accent-cyan)); box-shadow: 0 0 12px var(--accent-gold-glow); pointer-events: none; }

/* ---------- hero number universe */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 40%, transparent 100%); opacity: 0.8; }
.hero > .container { position: relative; z-index: 1; }

/* ---------- heading word reveal */
.split-reveal .sw { display: inline-block; opacity: 0; transform: translateY(0.45em) rotateX(40deg); filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s; }
.split-reveal.in .sw { opacity: 1; transform: none; filter: none; }

/* ---------- 3D tilt + spotlight */
[data-tilt] { transition: transform 0.25s ease-out; transform-style: preserve-3d; will-change: transform; }
.spot { position: relative; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 229, 0, 0.09), transparent 60%); }
.spot:hover::after { opacity: 1; }
.btn-primary.btn-lg, .btn-primary.btn-md { transition: transform 0.2s ease-out, box-shadow 0.2s; }

/* ---------- live demo */
.live-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; margin-top: 48px; }
.live-copy h3 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 18px; }
.live-note { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-top: 22px; padding: 14px 16px; border-left: 3px solid var(--accent-gold); background: rgba(255, 229, 0, 0.04); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.live-card { background: linear-gradient(160deg, #161a25 0%, #0d1017 100%); border: 1px solid var(--border-highlight); border-radius: var(--radius-xl);
  padding: 22px; box-shadow: var(--shadow-card), 0 0 40px rgba(255, 229, 0, 0.08); }
.live-card.hit { animation: liveHit 0.6s ease-out; }
@keyframes liveHit { 0% { box-shadow: var(--shadow-card), 0 0 0 0 rgba(255, 229, 0, 0.55); } 100% { box-shadow: var(--shadow-card), 0 0 0 26px rgba(255, 229, 0, 0); } }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: 14px; color: #fff; }
.live-head .lbl { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); animation: livePulse 1.6s infinite; }
@keyframes livePulse { 50% { opacity: 0.35; } }
.group-toggle { display: inline-flex; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 3px; }
.group-toggle button { font: 600 12px var(--font-sans); color: var(--text-muted); background: none; border: 0; padding: 6px 12px; border-radius: var(--radius-full); cursor: pointer; }
.group-toggle button.active { background: var(--accent-gold); color: #0a0c10; }
.live-screen { margin-top: 16px; background: #0b0d12; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px 18px 18px; text-align: center; min-height: 210px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.live-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #d8c86a; background: rgba(255, 229, 0, 0.08); border: 1px solid rgba(255, 229, 0, 0.28); border-radius: var(--radius-full); padding: 4px 6px 4px 12px; }
.live-chip b { color: #fff; }
.live-chip button { font: 700 11px var(--font-sans); color: #0a0c10; background: #fff; border: 0; border-radius: var(--radius-full); padding: 3px 9px; cursor: pointer; }
.live-quote { font-style: italic; color: var(--text-muted); font-size: 15px; max-width: 100%; overflow-wrap: anywhere; opacity: 0.8; }
.live-quote.on { color: #e9e3c4; }
.live-result { font-weight: 900; font-size: clamp(44px, 7vw, 68px); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #fff6c2 0%, #FFE14D 35%, #E6C200 60%, #fffbe6 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 214, 0, 0.35)); max-width: 100%; overflow-wrap: anywhere; }
.live-result.pop { animation: livePop 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes livePop { 0% { transform: scale(1.18); filter: drop-shadow(0 0 40px rgba(255, 214, 0, 0.8)) blur(2px); } 100% { transform: scale(1); } }
.live-expr { color: var(--text-muted); font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
.live-msg { color: #fda4af; font-size: 13px; min-height: 1em; }
.live-wave { display: block; width: 100%; height: 56px; margin: 10px 0 6px; }
.live-input { display: flex; gap: 10px; align-items: center; }
.live-input input { flex: 1; min-width: 0; font: 500 16px var(--font-sans); color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 14px 18px; outline: none; }
.live-input input:focus { border-color: var(--border-highlight); box-shadow: 0 0 0 3px var(--accent-gold-glow); }
.live-mic, .live-go { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; display: grid; place-items: center; }
.live-mic { background: rgba(255, 255, 255, 0.07); color: #fff; border: 1px solid var(--border-subtle); position: relative; }
.live-mic.on { background: #ef4444; border-color: #ef4444; }
.live-mic.on::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(239, 68, 68, 0.6); animation: micRing 1.2s ease-out infinite; }
@keyframes micRing { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.live-go { background: var(--accent-gold); color: #0a0c10; font-weight: 900; font-size: 24px; box-shadow: var(--shadow-glow); }
.live-langs { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.live-langs select { font: 600 12px var(--font-sans); color: #fff; background: #12151d; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 5px 8px; }
.live-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.live-chips .lab { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.live-chips button { font: 600 13px var(--font-sans); color: #e8e8e8; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 8px 14px; cursor: pointer; transition: all 0.2s; }
.live-chips button:hover { border-color: var(--border-highlight); color: #fff; background: rgba(255, 229, 0, 0.08); transform: translateY(-1px); }
.live-chips .deva { font-family: 'Noto Sans Devanagari', var(--font-sans); }
.live-chips .seq { border-style: dashed; border-color: rgba(127, 231, 255, 0.4); }
.live-tape { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.live-tape li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); animation: tapeIn 0.35s ease-out; }
.live-tape li .q { color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-tape li .arrow { color: var(--text-dim); }
.live-tape li .r { color: var(--accent-gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.live-tape li.bad .r { color: var(--text-dim); }
@keyframes tapeIn { from { opacity: 0; transform: translateY(-6px); } }
.live-privacy { font-size: 12px; color: var(--text-dim); margin-top: 14px; line-height: 1.5; }

/* ---------- video reel */
.reel-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; }
.reel-card { margin: 0; text-align: center; }
.reel-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 34px; padding: 9px; cursor: pointer;
  background: linear-gradient(145deg, #3a3d44, #121318 45%, #2a2c33); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 40px rgba(255, 229, 0, 0.06); }
.reel-phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: #000; display: block; }
.reel-sound { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 16px; display: grid; place-items: center; backdrop-filter: blur(6px); pointer-events: none; }
.reel-sound::before { content: '🔇'; }
.reel-card.sound .reel-sound { background: var(--accent-gold); border-color: var(--accent-gold); }
.reel-card.sound .reel-sound::before { content: '🔊'; }
.reel-card.sound .reel-phone { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 2px var(--accent-gold), 0 0 50px rgba(255, 229, 0, 0.25); }
.reel-card figcaption { margin-top: 16px; display: grid; gap: 4px; }
.reel-card figcaption b { color: #fff; font-size: 17px; font-weight: 800; }
.reel-card figcaption span { color: var(--text-muted); font-size: 14px; }
.reel-card figcaption .tag { color: var(--accent-cyan); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.film-cta { display: flex; justify-content: center; margin-top: 26px; }

/* ---------- film modal */
.film-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; opacity: 0; transition: opacity 0.25s; }
.film-modal.open { opacity: 1; }
.film-modal[hidden] { display: none; }
.film-backdrop { position: absolute; inset: 0; background: rgba(3, 4, 7, 0.88); backdrop-filter: blur(8px); }
.film-box { position: relative; width: min(92vw, 1200px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 229, 0, 0.25); transform: scale(0.96); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.film-modal.open .film-box { transform: none; }
.film-modal.tall .film-box { width: auto; height: min(86vh, 160vw); aspect-ratio: 9 / 16; }
.film-box video { width: 100%; height: 100%; display: block; background: #000; }
.film-close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; cursor: pointer; z-index: 2; }

/* ---------- responsive */
@media (max-width: 1024px) {
  .live-grid { grid-template-columns: 1fr; gap: 32px; }
  .reel-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reel-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 36px -20px 0; padding: 0 20px 12px; scrollbar-width: none; }
  .reel-row::-webkit-scrollbar { display: none; }
  .reel-card { flex: 0 0 72%; scroll-snap-align: center; }
  .live-card { padding: 16px; border-radius: 24px; }
  .live-screen { min-height: 180px; padding: 18px 12px 14px; }
  .live-mic, .live-go { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .split-reveal .sw { opacity: 1; transform: none; filter: none; transition: none; }
  .live-dot, .live-mic.on::before { animation: none; }
}

@media (max-width: 600px) { .hero-canvas { opacity: 0.4; } }