/* =========================================================
   Artora Academy OS — Cinematic layer
   Film grain, opening titles and scroll-driven academy scenes.
   Plain CSS; all art is drawn with CSS / inline SVG.
   ========================================================= */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Film grain + vignette over the whole page ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}
.vignette { position: fixed; inset: 0; z-index: 89; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(13, 13, 13, 0.05) 100%); }

/* ---------- Opening titles ---------- */
.intro { position: fixed; inset: 0; z-index: 200; background: #fff; display: grid; place-items: center; overflow: hidden; }
.no-js .intro { display: none; }
.intro.done { animation: intro-out 0.9s var(--ease) forwards; }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
html.intro-lock, html.intro-lock body { overflow: hidden; }
.intro-bar { position: absolute; left: 0; right: 0; height: 50%; background: #f7f7f8; z-index: 3; animation: bars-open 1.4s var(--ease) 0.2s forwards; }
.intro-bar.top { top: 0; } .intro-bar.bottom { bottom: 0; }
@keyframes bars-open { to { height: 11vh; } }
.intro-rays {
  position: absolute; inset: -40%; opacity: 0;
  background: conic-gradient(from 200deg at 50% 0%, transparent 0 8deg, rgba(16, 163, 127, 0.08) 12deg, transparent 18deg, rgba(25, 185, 143, 0.07) 26deg, transparent 34deg, rgba(13, 138, 106, 0.06) 42deg, transparent 50deg);
  animation: rays-in 6s ease forwards;
}
@keyframes rays-in { 30% { opacity: 1; } 100% { opacity: 0.8; transform: rotate(8deg); } }
.intro-text { position: relative; z-index: 4; width: 100%; height: 100%; }
.it {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, 90vw); text-align: center;
  opacity: 0; color: #0d0d0d; font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.02em;
}
.it1 { font-size: clamp(1.6rem, 4vw, 3rem); font-style: italic; animation: title-in 1.9s ease 0.5s forwards; }
/* Academy icons: one badge at a time, cross-fading (starts 2.2s, 0.38s apart) */
.intro-icons { opacity: 1; height: clamp(180px, 30vh, 240px); font-family: var(--font); letter-spacing: 0; }
.ii {
  position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 14px;
  opacity: 0; animation: ii-in 0.55s var(--ease) calc(2.2s + var(--i) * 0.38s) both;
}
.ii b {
  position: relative; width: clamp(110px, 18vw, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-size: clamp(3.2rem, 7vw, 4.4rem); font-weight: 400; background: #fff; border: 2px solid var(--accent-100);
  box-shadow: 0 20px 50px -18px rgba(16, 163, 127, 0.55), 0 0 0 10px rgba(16, 163, 127, 0.05);
}
.ii b::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px dashed rgba(16, 163, 127, 0.45); animation: rotate 6s linear infinite; }
.ii small { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink); }
@keyframes ii-in {
  0% { opacity: 0; transform: scale(0.6); filter: blur(8px); }
  25%, 70% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.12) translateY(-8px); filter: blur(4px); }
}
.it3 { font-family: var(--font); font-weight: 800; font-size: clamp(2.6rem, 8vw, 6rem); color: #0d0d0d; animation: logo-in 1.4s var(--ease) 4.8s forwards; }
/* Landing frame: every academy type lined up under the logo */
.it4 {
  top: calc(50% + clamp(56px, 8vw, 96px)); display: flex; justify-content: center; gap: clamp(8px, 2vw, 16px);
  font-family: var(--font); animation: row-in 0.9s var(--ease) 5.3s forwards;
}
.it4 i {
  font-style: normal; width: clamp(38px, 6vw, 50px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 20px -12px rgba(16, 163, 127, 0.6);
}
@keyframes row-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.it3 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes title-in {
  0% { opacity: 0; filter: blur(8px); letter-spacing: 0.3em; }
  30%, 70% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(4px); }
}
@keyframes logo-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); filter: blur(12px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}
.intro-skip {
  position: absolute; right: 24px; bottom: 24px; z-index: 5; font: inherit; font-size: 0.85rem; letter-spacing: 0.08em;
  color: var(--muted); background: #fff; border: 1px solid var(--border-2);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all 0.2s;
}
.intro-skip:hover { color: var(--text); background: var(--bg-2); }

/* ---------- Scenes: scroll-driven pinned stage ---------- */
.scenes { position: relative; height: 520vh; margin-top: 40px; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #fff; isolation: isolate; }
.lbox {
  position: absolute; left: 0; right: 0; height: 9vh; min-height: 48px; background: #fff; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 48px);
  font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--muted);
}
.lbox.top { border-bottom: 1px solid var(--border); } .lbox.bottom { border-top: 1px solid var(--border); }
.lbox.top { top: 0; } .lbox.bottom { bottom: 0; gap: 20px; padding-right: 88px; }
.rec i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; margin-right: 6px; animation: blink 1.2s steps(1) infinite; }
.reel { flex: 1; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.reel-fill { height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.scroll-hint { white-space: nowrap; transition: opacity 0.4s; }
.stage.moved .scroll-hint { opacity: 0; }

.scene {
  --p: 0; --accent: #0d8a6a; --ray: rgba(16, 163, 127, 0.06);
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center;
  gap: 4vw; padding: 12vh clamp(16px, 6vw, 96px); opacity: 0; visibility: hidden; overflow: hidden;
  transition: opacity 1.1s ease, visibility 1.1s; background: var(--scene-bg);
}
.scene.active { opacity: 1; visibility: visible; z-index: 1; }
.scene > * { min-width: 0; }
.scene::before { /* god rays */
  content: ""; position: absolute; inset: -30% -10% auto; height: 120%; pointer-events: none; opacity: 0.55;
  background: conic-gradient(from 195deg at 30% 0%, transparent 0 6deg, var(--ray) 10deg, transparent 16deg, var(--ray) 24deg, transparent 32deg, var(--ray) 38deg, transparent 46deg);
  animation: rays 14s ease-in-out infinite alternate;
}
@keyframes rays { to { transform: rotate(6deg) translateX(3%); } }
.scene .art {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; max-height: 70vh;
  transform: scale(calc(1.02 + var(--p) * 0.08)) translateY(calc(var(--p) * -24px));
  transition: transform 0.25s linear;
}
.cap { position: relative; z-index: 2; max-width: 520px; }
.cap .sn { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.cap h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.05; margin: 14px 0 16px; color: var(--text); }
.cap p { color: var(--muted); font-size: 1.06rem; }
.cap .tie { display: block; margin-top: 22px; padding: 12px 16px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.85); border-radius: 0 12px 12px 0; font-size: 0.95rem; color: var(--ink-700); box-shadow: 0 1px 0 var(--border); backdrop-filter: blur(6px); }
.cap .tie b { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.scene.active .cap > * { animation: cap-in 1.1s var(--ease) both; }
.scene.active .cap > :nth-child(2) { animation-delay: 0.15s; }
.scene.active .cap > :nth-child(3) { animation-delay: 0.3s; }
.scene.active .cap > :nth-child(4) { animation-delay: 0.45s; }
@keyframes cap-in { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.scene-dots { position: absolute; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 7; display: grid; gap: 12px; }
.scene-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--dim); background: transparent; cursor: pointer; transition: all 0.3s; }
.scene-dots button.on { background: var(--violet); border-color: var(--violet); height: 28px; border-radius: 6px; }

/* ---------- Scene 1 — Chess ---------- */
.s-chess { --scene-bg: radial-gradient(ellipse at 35% 45%, #fbf0e1 0%, #fdf8f1 45%, #ffffff 80%); --accent: #9a5b12; --ray: rgba(183, 121, 31, 0.06); }
.board-wrap { perspective: 1100px; width: min(420px, 90%); }
.board {
  position: relative; aspect-ratio: 1; border-radius: 6px; transform-style: preserve-3d;
  background: repeating-conic-gradient(#e8cfa0 0 25%, #6e4322 0 50%) 0 0 / 25% 25%;
  box-shadow: 0 0 0 10px #3b220f, 0 0 0 12px #8a5a2c, 0 60px 90px -20px rgba(13, 13, 13, 0.28), 0 0 140px rgba(255, 180, 90, 0.25);
  transform: rotateX(52deg) rotateZ(-18deg);
}
.pc {
  position: absolute; left: calc(var(--x) * 12.5%); top: calc(var(--y) * 12.5%); width: 12.5%; height: 12.5%;
  display: grid; place-items: center; font-size: min(46px, 8vw); line-height: 1;
  transform-origin: 50% 90%; transform: rotateZ(18deg) rotateX(-60deg) translateY(-30%);
}
.pc.w { color: #fffaf0; text-shadow: 0 2px 0 #b99a6a, 0 10px 14px rgba(0, 0, 0, 0.6); }
.pc.b { color: #1b1209; text-shadow: 0 0 1px #d8b27a, 0 10px 14px rgba(0, 0, 0, 0.6); }
.knight { animation: knight 7s var(--ease) infinite; }
@keyframes knight {
  0%, 12% { translate: 0 0; }
  22%, 40% { translate: 100% -200%; }
  50%, 68% { translate: 200% -400%; }
  78%, 100% { translate: 0 0; }
}

/* ---------- Scene 2 — Swimming ---------- */
.s-swim { --scene-bg: radial-gradient(ellipse at 40% 40%, #e3f3f9 0%, #f3fafc 50%, #ffffff 85%); --accent: #0e6c95; --ray: rgba(14, 108, 149, 0.05); }
.s-swim .art { perspective: 1000px; }
.pool {
  width: min(540px, 100%); height: auto; aspect-ratio: 3 / 2; border-radius: 14px; transform: rotateX(38deg) rotateZ(-6deg);
  box-shadow: 0 0 0 10px #d9eef5, 0 0 0 12px #9cc7d4, 0 60px 90px -30px rgba(13, 13, 13, 0.28), 0 0 120px rgba(25, 185, 143, 0.25);
}
.caustics circle { fill: rgba(170, 240, 255, 0.1); animation: caustic 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.caustics circle:nth-child(2n) { animation-delay: -2s; }
.caustics circle:nth-child(3n) { animation-delay: -4s; }
@keyframes caustic { to { transform: scale(1.5) translate(10px, -6px); opacity: 0.4; } }
.ropes line { stroke: #ff5a5a; stroke-width: 5; stroke-dasharray: 12 12; }
.ropes.alt line { stroke: #fff; stroke-dashoffset: 12; }
.swimmer ellipse { fill: rgba(255, 210, 170, 0.85); }
.swimmer .arm { fill: none; stroke: rgba(255, 210, 170, 0.9); stroke-width: 5; stroke-linecap: round; animation: stroke-arm 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 90% 90%; }
@keyframes stroke-arm { 50% { transform: rotate(-60deg); } }
.cap-r { fill: #ff4d6d; } .cap-y { fill: #ffd23f; } .cap-b { fill: #4dd2ff; }
.sw1 { animation: swim 9s linear infinite; }
.sw2 { animation: swim 11s linear -4s infinite; }
.sw3 { animation: swim 13s linear -8s infinite; }
@keyframes swim { from { transform: translateX(-60px); } to { transform: translateX(660px); } }
.waves use { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; }
.waves .w1 { animation: wave 5s linear infinite; }
.waves .w2 { animation: wave 7s linear infinite reverse; }
@keyframes wave { to { transform: translateX(-150px); } }
.chip-float {
  position: absolute; bottom: 10%; right: 6%; padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.92); border: 1px solid #9cc7d4; color: #0e6c95; backdrop-filter: blur(6px); animation: bob 5s ease-in-out infinite;
}

/* ---------- Scene 3 — Music ---------- */
.s-music { --scene-bg: radial-gradient(ellipse at 40% 30%, #f3e8fa 0%, #faf5fd 48%, #ffffff 85%); --accent: #7a2fa8; --ray: rgba(122, 47, 168, 0.05); }
.spot {
  position: absolute; top: -20%; left: 50%; width: 70%; height: 130%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 230, 255, 0.28), transparent 60%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(6px); animation: spot 5s ease-in-out infinite alternate;
}
@keyframes spot { to { opacity: 0.6; transform: translateX(-46%); } }
.piano {
  position: relative; display: flex; width: min(520px, 100%); height: min(190px, 30vw); padding: 10px; border-radius: 10px;
  background: linear-gradient(#1a0b22, #0b0410); box-shadow: 0 40px 80px -20px rgba(13, 13, 13, 0.28), 0 0 100px rgba(229, 155, 255, 0.2);
  transform: perspective(900px) rotateX(28deg);
}
.piano .wk { flex: 1; margin: 0 1px; border-radius: 0 0 6px 6px; background: linear-gradient(#fff, #e9e3ee); animation: press 4.8s ease-in-out infinite; animation-delay: var(--d); }
.piano .bk { position: absolute; top: 10px; width: 4.2%; height: 58%; border-radius: 0 0 4px 4px; background: linear-gradient(#2a2130, #050307); z-index: 2; transform: translateX(-50%); }
@keyframes press {
  0%, 8%, 100% { background: linear-gradient(#fff, #e9e3ee); box-shadow: none; }
  3% { background: linear-gradient(#f3d4ff, #d58cff); box-shadow: 0 0 24px #d58cff; }
}
.notes { position: absolute; inset: 0; pointer-events: none; }
.notes span { position: absolute; bottom: 35%; font-size: clamp(1.4rem, 3vw, 2.4rem); color: #9b4fd0; text-shadow: 0 0 14px rgba(200, 107, 255, 0.35); opacity: 0; animation: note-rise 6s ease-in infinite; }
.notes span:nth-child(1) { left: 18%; }
.notes span:nth-child(2) { left: 34%; animation-delay: 1s; }
.notes span:nth-child(3) { left: 50%; animation-delay: 2s; }
.notes span:nth-child(4) { left: 64%; animation-delay: 3s; }
.notes span:nth-child(5) { left: 78%; animation-delay: 4s; }
.notes span:nth-child(6) { left: 26%; animation-delay: 5s; }
@keyframes note-rise {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-260px) rotate(-20deg) translateX(30px); }
}

/* ---------- Scene 4 — Tuition ---------- */
.s-tuition { --scene-bg: radial-gradient(ellipse at 40% 40%, #e3f4ea 0%, #f4faf6 48%, #ffffff 85%); --accent: #0d8a6a; --ray: rgba(16, 163, 127, 0.06); }
.chalkboard {
  position: relative; width: min(500px, 100%); aspect-ratio: 16 / 10; border-radius: 6px; padding: 7% 8%;
  background: radial-gradient(ellipse at 30% 30%, #2f5a43, #1a3a29 70%); border: 14px solid #6b4424;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 50px 80px -24px rgba(13, 13, 13, 0.28); transform: perspective(1000px) rotateY(-12deg);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: rgba(245, 245, 235, 0.92);
}
.chalk { display: block; max-width: 0; overflow: hidden; font-size: clamp(1rem, 2.6vw, 1.8rem); margin-bottom: 4%; white-space: nowrap; }
.s-tuition.active .chalk { animation: write 1.6s steps(18) forwards; }
.s-tuition.active .ch2 { animation-delay: 1.4s; }
.s-tuition.active .ch3 { animation-delay: 2.8s; }
@keyframes write { to { max-width: 100%; } }
.tri { position: absolute; right: 8%; bottom: 12%; width: 26%; fill: none; stroke: rgba(245, 245, 235, 0.85); stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; }
.s-tuition.active .tri { animation: draw 2s ease 3.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chalk-dust { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.5px); background-size: 38px 42px; opacity: 0.18; animation: dust 12s linear infinite; }
@keyframes dust { to { background-position: 0 -200px; } }
.books { position: absolute; bottom: 4%; left: 6%; display: grid; gap: 3px; transform: rotate(-3deg); }
.books i { display: block; height: 16px; border-radius: 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.books i:nth-child(1) { width: 120px; background: #c0392b; }
.books i:nth-child(2) { width: 132px; background: #2980b9; margin-left: -8px; }
.books i:nth-child(3) { width: 112px; background: #f1c40f; margin-left: 6px; }
.books i:nth-child(4) { width: 126px; background: #8e44ad; }

/* ---------- Scene 5 — Sports ---------- */
.s-sports { --scene-bg: radial-gradient(ellipse at 45% 30%, #e4eef7 0%, #f4f8fb 50%, #ffffff 85%); --accent: #2e7d32; --ray: rgba(37, 99, 235, 0.05); }
.flood { position: absolute; top: -10%; width: 50%; height: 120%; filter: blur(4px); animation: flicker 6s infinite; }
.flood.l { left: -5%; background: conic-gradient(from 150deg at 0% 0%, transparent 0 4deg, rgba(37, 99, 235, 0.06) 8deg 18deg, transparent 24deg); }
.flood.r { right: -5%; background: conic-gradient(from 192deg at 100% 0%, transparent 0 18deg, rgba(37, 99, 235, 0.06) 22deg 32deg, transparent 36deg); animation-delay: -3s; }
@keyframes flicker { 0%, 47%, 100% { opacity: 0.9; } 48% { opacity: 0.6; } 49% { opacity: 0.95; } }
.field {
  position: relative; width: min(540px, 100%); aspect-ratio: 16 / 10; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #2e7d32 0 10%, #276b2b 10% 20%); border: 3px solid rgba(255, 255, 255, 0.85);
  transform: perspective(900px) rotateX(55deg); box-shadow: 0 0 120px rgba(157, 255, 122, 0.18), 0 60px 80px -30px rgba(13, 13, 13, 0.3);
}
.field i { position: absolute; border: 3px solid rgba(255, 255, 255, 0.8); }
.field .mid { left: 50%; top: 0; bottom: 0; width: 0; border-width: 0 0 0 3px; }
.field .circle { left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.field .box { top: 28%; bottom: 28%; width: 14%; }
.field .box.l { left: 0; border-left: 0; }
.field .box.r { right: 0; border-right: 0; }
.ball-wrap { position: absolute; left: 22%; bottom: 40%; animation: ball-x 3.2s linear infinite; }
.ball { display: block; font-size: clamp(2rem, 5vw, 3.4rem); animation: ball-y 3.2s cubic-bezier(0.3, 0, 0.7, 1) infinite, spin 3.2s linear infinite; filter: drop-shadow(0 6px 10px rgba(13, 13, 13, 0.2)); }
@keyframes ball-x { from { transform: translateX(0); } to { transform: translateX(min(300px, 46vw)); } }
@keyframes ball-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 -150px; } }
@keyframes spin { to { rotate: 720deg; } }
.ball-shadow { position: absolute; left: 23%; bottom: 37%; width: 50px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); filter: blur(3px); animation: ball-x 3.2s linear infinite, shadow 3.2s cubic-bezier(0.3, 0, 0.7, 1) infinite; }
@keyframes shadow { 50% { scale: 0.4; opacity: 0.3; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .scene { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 11vh 20px 12vh; gap: 10px; }
  .scene .art { max-height: 40vh; }
  .cap h3 { font-size: clamp(1.7rem, 7vw, 2.4rem); margin: 8px 0; }
  .cap p { font-size: 0.95rem; }
  .cap .tie { margin-top: 12px; font-size: 0.86rem; }
  .scroll-hint, .books { display: none; }
  @keyframes ball-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 -90px; } }
}
@media (max-width: 560px) {
  .cap p { display: none; }
  .scene-dots { right: 6px; }
  .intro-skip { right: 12px; bottom: 16px; }
}

/* ---------- Reduced motion: no intro, scenes stacked without pinning ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro, .grain { display: none; }
  .scenes { height: auto; }
  .stage { position: relative; height: auto; }
  .scene { position: relative; opacity: 1; visibility: visible; min-height: 90vh; }
  .lbox, .scene-dots { display: none; }
  .chalk { max-width: none; }
  .tri { stroke-dashoffset: 0; }
}

/* =========================================================
   WHY ARTORA ACADEMY OS — cinematic Before → After chapters
   A light-wipe sweeps each noir "before" frame into the
   colour "after" frame as the visitor scrolls (--w: 0 → 1).
   ========================================================= */
.pain { padding-top: 100px; }
.pain-head { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.pain-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 800; margin: 12px 0 14px; }
.pain-head p { color: var(--muted); font-size: 1.08rem; }
.pain-track { position: relative; height: 680vh; }
.ba em { font-style: normal; transition: color 0.4s; }
.ba .b-on { color: #dc2626; }
.pain-stage.solved .ba .b-on { color: var(--dim); }
.ba .a-on { color: var(--dim); }
.pain-stage.solved .ba .a-on { color: var(--pink); }

.chap {
  --w: 0; --accent: #dc2626;
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center;
  gap: 4vw; padding: 12vh clamp(16px, 6vw, 96px); opacity: 0; visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s; background: #fff;
}
.chap > * { min-width: 0; }
.chap.active { opacity: 1; visibility: visible; z-index: 1; }
.chap::before, .chap::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.3s; }
.chap::before { background: radial-gradient(ellipse at 30% 50%, rgba(220, 38, 38, 0.07), transparent 65%); opacity: calc(1 - var(--w)); }
.chap::after { background: radial-gradient(ellipse at 30% 50%, rgba(16, 163, 127, 0.08), transparent 65%), radial-gradient(ellipse at 80% 70%, rgba(25, 185, 143, 0.08), transparent 60%); opacity: var(--w); }
.chap.solved { --accent: #0d8a6a; }
.chap .cap h3 { font-size: clamp(1.6rem, min(4.2vw, 6.4vh), 3.2rem); }
.chap.active .cap > * { animation: cap-in 1s var(--ease) both; }
.chap.active .cap > :nth-child(2) { animation-delay: 0.12s; }
.chap.active .cap > :nth-child(3) { animation-delay: 0.24s; }

/* The film frame */
.frame {
  position: relative; z-index: 1; width: min(640px, 100%); aspect-ratio: 16 / 10; justify-self: center; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(13, 13, 13, 0.35), 0 0 0 1px var(--border);
  transform: perspective(1200px) rotateY(calc(8deg - var(--w) * 8deg)) scale(calc(0.97 + var(--w) * 0.03));
  --hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}
.before {
  position: absolute; inset: 0; overflow: hidden;
  background: repeating-linear-gradient(0deg, #2b2824 0 2px, #26231f 2px 4px);
  filter: grayscale(0.75) sepia(0.35) contrast(1.05); animation: noir 4s steps(1) infinite;
}
@keyframes noir { 0%, 100% { filter: grayscale(0.75) sepia(0.35) contrast(1.05) brightness(1); } 50% { filter: grayscale(0.75) sepia(0.35) contrast(1.05) brightness(0.9); } 52% { filter: grayscale(0.75) sepia(0.35) contrast(1.05) brightness(1.05); } }
.before > * { position: absolute; }
.after {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 9% 7% 6%;
  background: radial-gradient(ellipse at 30% 20%, #eaf7f2, #f7f7f8 75%);
  clip-path: inset(0 0 0 calc(100% - var(--w) * 100%));
}
.wipe-line {
  position: absolute; top: 0; bottom: 0; left: calc(100% - var(--w) * 100%); width: 3px; z-index: 4; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 18px 4px rgba(16, 163, 127, 0.9), 0 0 60px 14px rgba(25, 185, 143, 0.45);
  opacity: min(1, calc(var(--w) * (1 - var(--w)) * 12));
}
.tag-before, .tag-after {
  position: absolute; top: 10px; z-index: 3; padding: 3px 9px; border-radius: 4px; font-family: ui-monospace, Consolas, monospace;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; background: #fff;
}
.tag-before { left: 12px; color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.5); }
.tag-after { right: 12px; color: #0d8a6a; border: 1px solid rgba(16, 163, 127, 0.5); }

/* "Before" props */
.note {
  width: 36%; padding: 9px 11px; background: #f3e27a; color: #2b2616; font-family: var(--hand);
  font-size: clamp(0.62rem, 1.35vw, 0.9rem); line-height: 1.3; transform: rotate(var(--r, 0deg)); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55);
}
.note::before { content: ""; position: absolute; top: -7px; left: 40%; width: 34px; height: 12px; background: rgba(255, 255, 255, 0.45); transform: rotate(-4deg); }
.note.small { width: auto; font-weight: 700; }
.bubble {
  max-width: 42%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #ececec; color: #222;
  font-size: clamp(0.6rem, 1.3vw, 0.84rem); line-height: 1.35; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
  animation: pop 5s ease-in-out infinite;
}
.bubble small { display: block; margin-top: 3px; color: #777; font-size: 0.78em; }
@keyframes pop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.missed {
  padding: 8px 12px; border-radius: 12px; background: #171717; color: #ff7070; font-weight: 700; border: 1px solid #444;
  font-size: clamp(0.62rem, 1.3vw, 0.88rem); transform: rotate(var(--r, 0deg)); animation: buzz 1.6s infinite;
}
@keyframes buzz {
  0%, 84%, 100% { transform: rotate(var(--r, 0deg)); }
  87% { transform: rotate(calc(var(--r, 0deg) + 4deg)) translateX(2px); }
  90% { transform: rotate(calc(var(--r, 0deg) - 4deg)) translateX(-2px); }
  93% { transform: rotate(calc(var(--r, 0deg) + 3deg)); }
}
.ledger {
  list-style: none; margin: 0; width: 40%; padding: 10px 14px; background: #efe8d6; color: #333; font-family: var(--hand);
  font-size: clamp(0.6rem, 1.3vw, 0.86rem); transform: rotate(var(--r, 0deg)); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
  background-image: repeating-linear-gradient(transparent 0 1.55em, rgba(80, 110, 160, 0.35) 1.55em calc(1.55em + 1px));
}
.ledger li { line-height: 1.55em; }
.ledger li.x { text-decoration: line-through; color: #a33; }
.register {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 42%; padding: 8px; background: #efe8d6;
  transform: rotate(var(--r, 0deg)); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}
.register span { aspect-ratio: 1.4; display: grid; place-items: center; border: 1px solid #b9ae95; font-family: var(--hand); font-size: clamp(0.6rem, 1.3vw, 0.9rem); color: #444; }
.register::after { content: ""; position: absolute; right: -12%; bottom: -18%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 5px solid rgba(110, 70, 30, 0.35); } /* coffee ring */
.groups { display: grid; gap: 6px; width: 44%; }
.groups span { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 10px; background: #1d1d1d; color: #ddd; font-size: clamp(0.58rem, 1.2vw, 0.8rem); }
.groups b { background: #25d366; color: #0b2a17; border-radius: 999px; padding: 0 7px; font-size: 0.9em; }
.whiteboard {
  display: grid; gap: 8px; width: 62%; padding: 14px 16px; background: #f4f4f1; border: 6px solid #9a9a9a; border-radius: 4px;
  font-family: var(--hand); color: #1d3fa8; font-size: clamp(0.62rem, 1.35vw, 0.92rem); transform: rotate(var(--r, 0deg)); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}
.whiteboard s { color: #b3261e; }
.sheet {
  display: grid; grid-template-columns: 1.3fr 0.7fr 1fr; width: 56%; background: #fff; transform: rotate(var(--r, 0deg));
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5); font-family: Consolas, monospace; font-size: clamp(0.56rem, 1.15vw, 0.8rem);
}
.sheet span { padding: 5px 7px; border: 1px solid #d8d8d8; color: #222; }
.sheet span:nth-child(-n + 3) { background: #e8f0e8; font-weight: 700; }
.sheet span:nth-child(3n):not(:nth-child(-n + 3)) { color: #c62828; font-weight: 700; }

/* "After" UI */
.after .ui, .phone-ui {
  width: 100%; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border);
  font-size: clamp(0.6rem, 1.25vw, 0.84rem); color: var(--text); box-shadow: 0 20px 40px -20px rgba(16, 163, 127, 0.6);
}
.phone-ui { width: 58%; border-radius: 22px; padding: 16px 12px; background: #fff; border: 2px solid var(--border-2); }
.ui-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: 6px; }
.ui-h small, .ui-foot { color: var(--muted); font-weight: 500; }
.ui-foot { display: block; margin-top: 8px; font-size: 0.9em; }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; margin-top: 5px; border-radius: 9px; background: var(--bg-2); }
.dotname { flex: 1; height: 7px; border-radius: 4px; background: #e3e3e6; position: relative; margin-left: 20px; }
.dotname::before { content: ""; position: absolute; left: -20px; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%); background: var(--grad-cool); }
.st { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 0.86em; white-space: nowrap; background: #ececf1; color: var(--ink-700); }
.st.ok { background: #dcf1ea; color: #0d8a6a; }
.st.warn { background: #f7ecd9; color: #b7791f; }
.st.info { background: #e2ebfd; color: #2563eb; }
.st.bad { background: #fbe3e3; color: #dc2626; }
.kan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kan > div { padding: 6px; border-radius: 10px; background: var(--bg-2); min-height: 5.5em; }
.kan b { display: block; font-size: 0.82em; color: var(--muted); margin-bottom: 2px; }
.kan i { display: block; font-style: normal; margin-top: 4px; padding: 4px 6px; border-radius: 6px; background: #fff; border: 1px solid var(--border); font-size: 0.86em; }
.kan i.win { background: #dcf1ea; border-color: #b6e3d3; color: #0d8a6a; font-weight: 700; }
.meter { height: 7px; margin-top: 10px; border-radius: 4px; background: #ececf1; overflow: hidden; }
.meter span { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--grad-cool); }
.p-notif { padding: 8px 10px; border-radius: 12px; background: #f7ecd9; color: #8a5a1f; font-weight: 600; animation: pop 3s ease-in-out infinite; }
.tt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.blk { padding: 7px 8px; border-radius: 8px; font-weight: 600; font-size: 0.9em; border-left: 3px solid; }
.tb1 { background: rgba(25, 185, 143, 0.14); border-color: var(--cyan); }
.tb2 { background: rgba(16, 163, 127, 0.18); border-color: var(--violet); }
.tb3 { background: rgba(13, 138, 106, 0.14); border-color: var(--pink); }
.tb4 { background: rgba(16, 163, 127, 0.14); border-color: var(--teal); }
.toast { margin-top: 8px; padding: 7px 10px; border-radius: 9px; background: #fbe3e3; border: 1px solid rgba(220, 38, 38, 0.35); color: #b91c1c; font-weight: 600; font-size: 0.9em; }
.flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); margin: 4px 0 10px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kpis div { padding: 7px 8px; border-radius: 9px; background: var(--bg-2); }
.kpis small { display: block; color: var(--muted); font-size: 0.8em; }
.kpis b { color: #0d8a6a; }

/* Captions: problem → solution */
.pair { display: grid; gap: 12px; margin-top: 6px; }
.chap .cap p.prob, .chap .cap p.sol {
  margin: 0; padding: 12px 16px; border-radius: 0 12px 12px 0; font-size: clamp(0.85rem, 2.1vh, 1rem); line-height: 1.5;
  background: var(--bg-2); transition: opacity 0.5s, filter 0.5s, box-shadow 0.5s;
}
.chap .cap p.prob { border-left: 3px solid #dc2626; color: var(--ink-700); }
.chap .cap p.sol { border-left: 3px solid #10a37f; color: var(--text); opacity: 0.3; filter: grayscale(1); }
.pair b { display: block; margin-bottom: 2px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.prob b { color: #dc2626; }
.sol b { color: #0d8a6a; }
.chap.solved .cap p.prob { opacity: 0.35; filter: grayscale(1); }
.chap.solved .cap p.sol { opacity: 1; filter: none; box-shadow: 0 0 40px -14px rgba(16, 163, 127, 0.45); background: #fff; }

/* Summary table */
.compare { padding: 80px 0 20px; }
.compare h3 { text-align: center; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 24px; }
.table-wrap { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.compare table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.compare thead th:nth-child(2) { color: #dc2626; }
.compare thead th:nth-child(3) { color: #0d8a6a; }
.compare tbody th { font-weight: 700; white-space: nowrap; }
.compare tbody td:nth-child(2) { color: var(--muted); }
.compare tbody td:nth-child(3) { color: var(--text); }
.compare tbody td:nth-child(3)::before { content: "✓ "; color: var(--teal); font-weight: 800; }
.compare tbody tr { transition: background 0.2s; }
.compare tbody tr:hover { background: rgba(16, 163, 127, 0.06); }
.compare .hero-actions { margin-top: 32px; }

@media (max-width: 860px) {
  .chap { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; padding: 11vh 20px 11vh; gap: 16px; }
  .frame { width: min(560px, 100%); }
  .chap .cap h3 { font-size: clamp(1.4rem, 6vw, 2rem); margin: 6px 0; }
  /* Show problem, then solution, in the same spot */
  .pair > * { grid-area: 1 / 1; }
  .chap .cap p.prob, .chap .cap p.sol { font-size: 0.9rem; padding: 10px 12px; }
  .chap .cap p.sol { opacity: 0; }
  .chap.solved .cap p.prob { opacity: 0; }
}
@media (max-width: 560px) {
  .chap .cap p.prob, .chap .cap p.sol { display: block; }
}
@media (max-width: 640px) {
  .compare thead { display: none; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
  .compare tbody th { grid-column: 1 / -1; padding-bottom: 4px; border: 0; }
  .compare td { border: 0; padding-top: 4px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pain-track { height: auto; }
  .pain-stage { position: relative; height: auto; }
  .chap { --w: 0.5; position: relative; opacity: 1; visibility: visible; min-height: 90vh; }
  .chap .cap p.sol { opacity: 1; filter: none; }
  .pair > * { grid-area: auto; }
}