/* ==========================================================================
   SIYA — HERO "SCAN TO INSIGHT" SCENE
   A fixed 1080×1080 stage, scaled to fit the hero's right column.
   Sequence: handwritten worksheet flies in → Siya scans it → the raw marks
   dim, "essence" particles drift across, the mascot turns from thinking to
   happy, and insight cards + an effort trend + signal tags settle in.

   The BASE (no .hero-play) state IS the final, fully-visible composition, so
   reduced-motion users and the failsafe both land on a complete scene.
   Entrance motion is layered on only while #hero carries .hero-play.
   ========================================================================== */

.scan-scene {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1 / 0.82;
  --acc: var(--primary-500);
  --acc-soft: var(--primary-100);
  --acc-text: var(--primary-700);
}
.hero-split .hero-scene.scan-scene { aspect-ratio: 1 / 0.82; max-width: 560px; place-items: stretch; }

/* No card frame — the scene floats directly on the hero so it blends in,
   not a boxed-in panel. Only soft glows remain for depth. */
.scan-frame {
  position: absolute;
  inset: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* soft brand glows — the one blessed use of blur; give the scene quiet depth
   and let it dissolve into the hero rather than sit on a card */
.scan-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(26px); animation: siyaGlow 7s var(--ease-in-out) infinite; }
.scan-glow.g1 { top: -8%; left: -6%; width: 56%; height: 56%; background: radial-gradient(circle, rgba(187,168,241,0.42), rgba(187,168,241,0) 70%); }
.scan-glow.g2 { bottom: -10%; right: -8%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(119,225,212,0.36), rgba(119,225,212,0) 70%); animation-duration: 8.5s; animation-delay: .6s; }
.scan-glow.g3 { top: 44%; left: 40%; width: 40%; height: 40%; background: radial-gradient(circle, rgba(247,217,238,0.4), rgba(247,217,238,0) 70%); filter: blur(22px); animation-duration: 9s; animation-delay: 1.2s; }

/* the fixed-design stage, scaled to fit */
.scan-stage {
  position: absolute; top: 0; left: 0;
  width: 1080px; height: 1080px;
  transform-origin: top left;
  transform: scale(var(--scan-scale, 0.5));
}

/* ===================== WORKSHEET ===================== */
.ss-worksheet { position: absolute; left: 90px; top: 166px; width: 450px; height: 540px; transform: rotate(-2.4deg); }
.ss-paper {
  position: relative; width: 100%; height: 100%;
  background: #FFFFFF; border-radius: 14px; overflow: hidden; border: 1px solid #F0ECFB;
  box-shadow: 0 20px 40px -12px rgba(75,44,135,0.18), 0 6px 12px -6px rgba(27,29,30,0.05);
}
.ss-rule { position: absolute; inset: 0; opacity: .7; background: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, #EFEAFB 37px, #EFEAFB 38px); }
.ss-margin { position: absolute; top: 0; bottom: 0; left: 48px; width: 2px; background: #F7C9DF; opacity: .8; }

/* content layer (dims after the scan, focus shifts to insight) */
.ss-content { position: absolute; inset: 0; padding: 28px 28px 28px 64px; opacity: .42; filter: saturate(.7); }
.ss-ws-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ss-ws-subj { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #794DCE; background: #F1ECFD; padding: 5px 10px; border-radius: 999px; }
.ss-ws-no { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: #9A8FB0; }
.ss-ws-name { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 7px; margin-bottom: 18px; font-family: var(--font-body); font-size: 14px; color: #9A8FB0; }
.ss-hand-name { flex-shrink: 0; white-space: nowrap; font-family: 'Caveat', cursive; font-size: 25px; font-weight: 700; color: #2F4FA0; line-height: 1; }
.ss-q { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: #3A3B45; margin-bottom: 6px; }
.ss-hand { font-family: 'Caveat', cursive; font-weight: 600; color: #2A2B2E; }
.ss-tick { display: inline-block; color: #1CBAAA; font-weight: 700; }

/* scan beam (sweeps once during play) */
.ss-beam {
  position: absolute; left: -4%; right: -4%; top: 0; height: 46px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(160,132,232,0) 0%, rgba(160,132,232,0.22) 45%, rgba(44,211,192,0.28) 55%, rgba(160,132,232,0) 100%);
  box-shadow: 0 0 26px 8px rgba(160,132,232,0.35);
}
.ss-beam::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(to right, rgba(160,132,232,0), var(--acc) 30%, #2CD3C0 70%, rgba(44,211,192,0));
  box-shadow: 0 0 12px 2px rgba(160,132,232,0.6);
}

/* drifting "essence" particles: raw marks → insight */
.ss-particle { position: absolute; border-radius: 50%; opacity: 0; }
.ss-particle.p1 { left: 520px; top: 380px; width: 12px; height: 12px; background: #A084E8; box-shadow: 0 0 10px 2px rgba(160,132,232,0.6); --dx: 150px; --dy: 160px; }
.ss-particle.p2 { left: 512px; top: 420px; width: 9px; height: 9px; background: #2CD3C0; box-shadow: 0 0 10px 2px rgba(44,211,192,0.55); --dx: 120px; --dy: 300px; }
.ss-particle.p3 { left: 524px; top: 340px; width: 8px; height: 8px; background: #F2A888; box-shadow: 0 0 9px 2px rgba(242,168,136,0.5); --dx: 200px; --dy: 120px; }

/* ===================== INSIGHT CARD (the focal pop-out) ===================== */
/* Overlaps the worksheet's right edge so it reads as lifting off the page,
   and runs large so the insight stays legible once the stage is scaled. */
.ss-insight { position: absolute; left: 430px; top: 452px; width: 560px; z-index: 5; transform-origin: 0 100%; }
.ss-insight-card {
  position: relative; background: #FFFFFF; border: 1px solid var(--acc-soft); border-radius: 26px; padding: 34px 38px; overflow: hidden;
  box-shadow: 0 36px 70px -22px rgba(75,44,135,0.42), 0 10px 22px -10px rgba(27,29,30,0.10);
}
html[data-theme="dark"] .ss-insight-card,
html[data-theme="dark"] .ss-trend-card { background: #23202E; border-color: rgba(255,255,255,0.07); }
.ss-insight-bar { position: absolute; top: 0; left: 0; bottom: 0; width: 9px; background: linear-gradient(to bottom, var(--acc), #2CD3C0); }
.ss-insight-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.ss-insight-eyebrow .spk { color: var(--acc); font-size: 24px; line-height: 1; }
.ss-insight-eyebrow .lbl { font-family: var(--font-ui); font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-text); }
.ss-insight-text { font-family: var(--font-ui); font-size: 34px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: #1B1D1E; text-wrap: balance; }
html[data-theme="dark"] .ss-insight-text { color: #F4F1FB; }

/* ===================== TREND MINI-CARD ===================== */
.ss-trend { position: absolute; left: 90px; top: 712px; width: 400px; z-index: 4; }
.ss-trend-card { background: #FFFFFF; border: 1px solid #EFEAFB; border-radius: 22px; padding: 22px 26px; box-shadow: 0 20px 42px -16px rgba(75,44,135,0.24), 0 6px 14px -8px rgba(27,29,30,0.06); }
.ss-trend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ss-trend-head .t { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: #65676E; }
.ss-trend-head .b { font-family: var(--font-ui); font-size: 16px; font-weight: 700; white-space: nowrap; color: #0A998E; background: #E6FAF7; padding: 6px 13px; border-radius: 999px; }
.ss-trend-svg { width: 100%; height: 64px; display: block; }
.ss-trend-line { stroke-dasharray: 140; stroke-dashoffset: 0; }
.ss-trend-dot { transform-box: fill-box; transform-origin: center; }

/* ===================== FLOATING TAGS ===================== */
.ss-tag { position: absolute; z-index: 6; }
.ss-tag .chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--font-ui); font-size: 20px; font-weight: 600;
  background: #FFFFFF; border: 1px solid #E8E0FB; padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 12px 26px -8px rgba(75,44,135,0.20);
}
html[data-theme="dark"] .ss-tag .chip { background: #23202E; }
.ss-tag .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ss-tag.t1 { left: 96px; top: 628px; }
.ss-tag.t1 .chip { color: var(--acc-text); }
.ss-tag.t1 .dot { background: var(--acc); }
.ss-tag.t2 { left: 566px; top: 712px; }
.ss-tag.t2 .chip { color: #0A998E; border-color: #C8F5F2; }
.ss-tag.t2 .dot { background: #2CD3C0; }
.ss-tag.t3 { left: 720px; top: 806px; }
.ss-tag.t3 .chip { color: #92400E; border-color: #FADCA8; }
.ss-tag.t3 .dot { background: #F2A888; }

/* ===================== MASCOT ===================== */
.ss-mascot { position: absolute; left: 628px; top: 70px; width: 372px; height: 372px; z-index: 3; }
.ss-mascot-inner { position: relative; width: 100%; height: 100%; animation: siyaIdle 5.5s var(--ease-in-out) 1.4s infinite; }
.ss-mascot-ground { position: absolute; left: 50%; top: 54%; width: 78%; height: 78%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(160,132,232,0.28), rgba(160,132,232,0) 68%); filter: blur(6px); }
.ss-mascot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ss-mascot-think { opacity: 0; }        /* final state: thinking has handed off */
.ss-mascot-happy { opacity: 1; }         /* final state: happy is shown */
.ss-spark { position: absolute; opacity: 0; }
.ss-spark.s1 { left: -2%; top: 30%; color: #FADCA8; font-size: 30px; text-shadow: 0 0 8px rgba(250,220,168,0.7); }
.ss-spark.s2 { right: 4%; top: 6%; color: #BBA8F1; font-size: 24px; text-shadow: 0 0 8px rgba(187,168,241,0.7); }
.ss-spark.s3 { right: -2%; top: 56%; color: #77E1D4; font-size: 18px; text-shadow: 0 0 8px rgba(119,225,212,0.7); }

/* =========================================================================
   ENTRANCE — layered on only while #hero carries .hero-play
   ========================================================================= */
.hero-play .ss-worksheet  { animation: siyaFloatIn .7s var(--ease-out) .15s both; }
.hero-play .ss-content    { animation: siyaDim .7s var(--ease-out) 3.55s both; }
.hero-play .ss-beam       { animation: siyaBeam 1.9s var(--ease-in-out) 1.7s both; }
.hero-play .ss-particle.p1 { animation: siyaDrift 1.6s var(--ease-out) 3.5s both; }
.hero-play .ss-particle.p2 { animation: siyaDrift 1.7s var(--ease-out) 3.75s both; }
.hero-play .ss-particle.p3 { animation: siyaDrift 1.8s var(--ease-out) 4s both; }
.hero-play .ss-insight    { animation: siyaEmerge .7s var(--ease-spring) 3.7s both; }
.hero-play .ss-trend      { animation: siyaFadeUp .65s var(--ease-out) 4.25s both; }
.hero-play .ss-trend-line { animation: siyaDraw 1.1s var(--ease-out) 4.5s both; }
.hero-play .ss-trend-dot  { animation: siyaPop .4s var(--ease-spring) 5.5s both; }
.hero-play .ss-tag.t1     { animation: siyaPop .5s var(--ease-spring) 4.5s both; }
.hero-play .ss-tag.t2     { animation: siyaPop .5s var(--ease-spring) 4.85s both; }
.hero-play .ss-tag.t3     { animation: siyaPop .5s var(--ease-spring) 5.2s both; }
.hero-play .ss-mascot     { animation: siyaSlideRight .85s var(--ease-out) .5s both; }
.hero-play .ss-mascot-think { animation: siyaFadeOut .45s var(--ease-out) 3.5s both; }
.hero-play .ss-mascot-happy { animation: siyaPop .6s var(--ease-spring) 3.55s both; }
.hero-play .ss-spark.s1   { animation: siyaTwinkle 1.3s var(--ease-out) 3.7s 2; }
.hero-play .ss-spark.s2   { animation: siyaTwinkle 1.3s var(--ease-out) 3.95s 2; }
.hero-play .ss-spark.s3   { animation: siyaTwinkle 1.3s var(--ease-out) 4.2s 2; }

/* =========================================================================
   KEYFRAMES
   ========================================================================= */
@keyframes siyaFloatIn   { from { opacity: 0; transform: translateY(34px) scale(.97) rotate(-2.4deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(-2.4deg); } }
@keyframes siyaSlideRight { from { opacity: 0; transform: translateX(80px) scale(.94); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes siyaIdle      { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-15px) rotate(1.2deg); } }
@keyframes siyaGlow      { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.1); } }
@keyframes siyaBeam      { 0% { opacity: 0; transform: translateY(-36px); } 14% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; transform: translateY(520px); } }
@keyframes siyaDim       { from { opacity: 1; filter: saturate(1); } to { opacity: .42; filter: saturate(.7); } }
@keyframes siyaFadeOut   { to { opacity: 0; transform: scale(.88); } }
@keyframes siyaFadeUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes siyaEmerge    { 0% { opacity: 0; transform: translate(-46px, 34px) scale(.8); } 65% { opacity: 1; } 100% { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes siyaPop       { 0% { opacity: 0; transform: scale(.5); } 62% { opacity: 1; transform: scale(1.07); } 100% { opacity: 1; transform: scale(1); } }
@keyframes siyaTwinkle   { 0%,100% { opacity: 0; transform: scale(.5) rotate(0deg); } 35% { opacity: 1; transform: scale(1) rotate(8deg); } 70% { opacity: .6; } }
@keyframes siyaDraw      { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
@keyframes siyaDrift     { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 28% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--dx,120px), var(--dy,-40px)) scale(1); } }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 820px) {
  .scan-scene, .hero-split .hero-scene.scan-scene { max-width: min(520px, 94vw); }
}
/* Mobile: the stage scales down hard, so feature the one big insight and drop
   the tiny supporting chips that would become unreadable. */
@media (max-width: 600px) {
  .scan-scene, .hero-split .hero-scene.scan-scene { max-width: 96vw; aspect-ratio: 1 / 0.78; }
  .ss-tag, .ss-trend { display: none; }
  .ss-insight { left: 296px; top: 486px; width: 710px; }
  .ss-insight-card { padding: 40px 44px; border-radius: 30px; }
  .ss-insight-bar { width: 12px; }
  .ss-insight-eyebrow { margin-bottom: 18px; }
  .ss-insight-eyebrow .spk { font-size: 32px; }
  .ss-insight-eyebrow .lbl { font-size: 21px; }
  .ss-insight-text { font-size: 46px; line-height: 1.26; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-glow, .ss-mascot-inner { animation: none; }
}