/* ZoraMath visual-first journey. Extends landing.css without replacing original artwork. */
/* The only marketing copy is the path selection; discoveries live inside native details. */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { position:relative; z-index:3; }
.hero-copy { padding:1.6rem var(--space-3) 1.4rem; }
.hero-copy h1 { font-size:clamp(2rem,8vw,3.2rem); }
.hero-copy .lede { margin:.5rem auto 1rem; font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.02em; }
.hero-copy .cta-row { gap:.65rem; }
.hero-copy .btn { min-height:3rem; padding:.65rem 1.05rem; font-size:1rem; box-shadow:0 5px 0 rgb(11 20 55 / .12); }
.hero-copy .btn:active { transform:translateY(2px); box-shadow:0 2px 0 rgb(11 20 55 / .12); }
@media (min-width:768px) {
  .hero { min-height:700px; }
  .hero-copy { max-width:32rem; padding:1.45rem 1.65rem; background:rgb(250 251 255 / .96); }
  .hero-copy h1 { font-size:clamp(2.3rem,4vw,3.1rem); }
}
@media (min-width:1024px) {
  .hero { min-height:min(780px,max(590px,calc(100svh - var(--header-h)))); }
  .hero-copy { max-width:33rem; }
}
.world-journey { position:relative; isolation:isolate; overflow:hidden; padding:clamp(2.5rem,5vw,4.75rem) 0 clamp(3rem,6vw,5.25rem); }
.world-earth { background:linear-gradient(180deg,#91d8ff 0%,#e0f5ff 51%,#c6eddd 100%); color:#163355; }
.world-space { background:radial-gradient(ellipse at 85% 10%,#283c84 0%,#151f55 45%,#0b1437 95%); color:#eef1ff; }
.world-backdrop { position:absolute; pointer-events:none; z-index:-1; top:0; left:50%; transform:translateX(-50%); width:1600px; min-width:100%; max-width:none; height:auto; opacity:.8; }
.world-space .world-backdrop { opacity:.5; }
.world-content { position:relative; }
.world-heading { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.1rem; padding:0 .15rem; }
.world-heading h2 { font-size:clamp(2rem,5vw,3.25rem); line-height:1.07; }
.world-heading h2 span { color:#eb762a; font-size:.7em; }
.world-space .world-heading h2 span { color:#8ef2c6; }
.world-kicker { font-size:.75rem; font-weight:900; letter-spacing:.2em; margin-bottom:.4rem; }
.world-space .world-kicker { color:#b5cdfc; }
.world-route-label { align-self:center; white-space:nowrap; font:700 1.1rem var(--font-display); letter-spacing:.1em; opacity:.85; }
.world-route-label span { opacity:.55; padding-inline:.2rem; }
.journey-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:1rem; position:relative; margin-top:1.9rem; }
.journey-grid::before { content:""; position:absolute; inset:2rem 1rem auto; border-top:3px dashed currentColor; opacity:.25; z-index:-1; }
.journey-stop { --scene-from:#9ce8ef; --scene-to:#deffd9; --vehicle:#174f67; --orb:#ffe794; --vehicle-animation:road-trip;
  position:relative; min-width:0; isolation:isolate; border:2px solid rgb(255 255 255 / .75);
  border-radius:var(--radius-l); background:#fffdf8; color:#173a5c;
  box-shadow:0 10px 25px rgb(21 64 108 / .14); transition:border-color .2s ease,box-shadow .2s ease;
}
.journey-stop[open] { z-index:2; border-color:#f29437; box-shadow:0 14px 36px rgb(21 64 108 / .20); }
.world-space .journey-stop { border:1px solid rgb(140 185 255 / .35); border-radius:22px; background:#202c68; color:#f8f9ff; box-shadow:0 14px 30px rgb(0 0 25 / .25); }
.world-space .journey-stop[open] { border-color:#8ef2c6; box-shadow:0 16px 36px rgb(0 0 22 / .32); }
.grade-summary { display:flex; flex-direction:column; align-items:stretch; gap:.4rem; min-height:15rem; padding:.85rem; list-style:none; cursor:pointer; user-select:none; }
.grade-summary::-webkit-details-marker { display:none; }
.grade-summary::marker { content:""; }
.grade-index { align-self:flex-start; display:inline-grid; place-items:center; min-width:2.45rem; height:2.45rem; padding:0 .45rem; border-radius:13px; font:700 1.15rem/1 var(--font-display); color:#16436b; background:#ffe8ad; box-shadow:0 3px 0 rgb(16 37 68 / .12); }
.world-space .grade-index { color:#0b1437; background:#8ef2c6; border-radius:11px; }
.stop-scene { position:relative; display:grid; place-items:center; width:100%; height:6.85rem; flex:none; border-radius:16px; overflow:hidden; isolation:isolate; background:linear-gradient(150deg,var(--scene-from),var(--scene-to)); }
.stop-scene::before { content:""; position:absolute; z-index:-1; inset:auto -9% -32% -9%; height:70%; background:rgb(43 139 119 / .24); border-radius:50% 50% 0 0; transform:rotate(-7deg); }
.stop-scene::after { content:""; position:absolute; inset:auto -10% 17% -10%; border-top:3px dashed rgb(255 255 255 / .85); transform:rotate(-5deg); }
.scene-orb { position:absolute; border-radius:50%; pointer-events:none; background:var(--orb); }
.orb-a { width:3.75rem; height:3.75rem; left:-.9rem; top:-1rem; opacity:.6; }
.orb-b { width:2.25rem; height:2.25rem; right:7%; top:12%; opacity:.78; }
.scene-route { position:absolute; width:80%; height:75%; left:11%; border-radius:50%; border:2px dotted rgb(255 255 255 / .6); transform:rotate(-18deg); }
.stop-vehicle { position:relative; z-index:1; width:4.9rem; height:4.9rem; padding:.95rem; border-radius:50%; background:rgb(255 255 255 / .85); color:var(--vehicle); filter:drop-shadow(0 8px 5px rgb(10 35 62 / .15)); transform-origin:50% 75%; }
.grade-place { display:block; margin-top:.15rem; font:700 clamp(1.05rem,2.2vw,1.35rem)/1.15 var(--font-display); min-height:2.3rem; overflow-wrap:normal; }
.grade-peek { display:flex; align-items:center; justify-content:space-between; gap:.15rem; margin-top:auto; font-size:.78rem; font-weight:900; letter-spacing:.01em; color:#3b5989; }
.world-space .grade-peek { color:#b5e9fd; }
.peek-arrow { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; color:white; background:#325cc6; font-size:1.3rem; transition:transform .23s ease; }
.world-space .peek-arrow { background:#8ef2c6; color:#132051; }
.peek-open, .journey-stop[open] .peek-closed { display:none; }
.journey-stop[open] .peek-open { display:inline; }
.journey-stop[open] .peek-arrow { transform:rotate(135deg); }
.grade-preview { padding:.85rem .9rem 1rem; border-top:2px dashed rgb(22 80 135 / .16); }
.world-space .grade-preview { border-color:rgb(151 216 255 / .23); }
.preview-label { font-size:.73rem; text-transform:uppercase; letter-spacing:.08em; font-weight:900; color:#596579; }
.world-space .preview-label { color:#b8d0ff; }
.preview-topics { display:grid; list-style:none; gap:.45rem; padding:.65rem 0 0; margin:0; }
.preview-topics li { position:relative; padding-left:1.12rem; font-size:.89rem; font-weight:700; line-height:1.35; }
.preview-topics li::before { content:"✦"; position:absolute; left:0; color:#d7782c; }
.world-space .preview-topics li::before { color:#8ef2c6; }
/* Every grade gets a distinct animated vehicle and scene, not interchangeable cards. */
.stop-harbor { --scene-from:#85d9e8; --scene-to:#c8ffe9; --vehicle:#23578f; }
.stop-town { --scene-from:#f6c78d; --scene-to:#fff0b7; --vehicle:#995125; }
.stop-ocean { --scene-from:#4fa9da; --scene-to:#afeefa; --vehicle:#09588d; }
.stop-world { --scene-from:#b2a2ec; --scene-to:#f9d6f0; --vehicle:#8c3866; }
.stop-moon { --scene-from:#454eae; --scene-to:#775dc8; --vehicle:#222e82; --orb:#f5e5ba; }
.stop-solar { --scene-from:#332a79; --scene-to:#675ac0; --vehicle:#275f89; --orb:#f4b06a; }
.stop-deep { --scene-from:#1e3762; --scene-to:#3b618a; --vehicle:#273e7a; --orb:#a5f5f6; }
.world-space .stop-scene::before { background:rgb(13 19 74 / .58); }
.world-space .stop-scene::after { border-color:rgb(184 215 255 / .48); }
.stop-ocean .stop-scene::before { background:rgb(10 105 184 / .5); }
.stop-town .stop-scene::before { background:rgb(193 127 56 / .2); }
.stop-world .stop-scene::before { background:rgb(105 143 195 / .25); }
.stop-vehicle.vehicle-balloon { transform-origin:50% 65%; }
.stop-vehicle.vehicle-station { border:2px solid rgb(142 242 198 / .8); }
.launch-bridge { background:linear-gradient(180deg,#c6eddd 0%,#94b5e8 25%,#444b99 69%,#151f55 100%); overflow:hidden; }
.launch-scene { position:relative; height:clamp(10rem,18vw,13.5rem); color:rgb(255 255 255 / .76); isolation:isolate; }
.launch-path { position:absolute; inset:1rem 0 0; width:100%; height:calc(100% - 1rem); overflow:visible; }
.launch-badge { position:absolute; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; z-index:1; background:#fff1bd; color:#173858; font:700 1.35rem var(--font-display); box-shadow:0 4px 0 rgb(31 39 82 / .2); }
.launch-from { left:4%; bottom:15%; }
.launch-to { right:2%; top:6%; background:#8ef2c6; color:#1a2858; }
.launch-vehicle { position:absolute; top:29%; left:calc(50% - 2.25rem); width:4.5rem; height:4.5rem; display:grid; place-items:center; background:#f9fbff; border:4px solid #ffe28f; border-radius:50%; box-shadow:0 0 0 11px rgb(255 255 255 / .18),0 14px 25px rgb(17 22 67 / .28); color:#404099; transform:rotate(34deg); z-index:2; }
.launch-vehicle svg { width:2.8rem; height:2.8rem; }
.launch-flame { position:absolute; width:.65rem; height:1.6rem; bottom:-1.45rem; left:calc(50% - .325rem); border-radius:20% 20% 55% 55%; background:#ffb13a; opacity:.85; filter:drop-shadow(0 0 5px #ffd165); }
.launch-spark { position:absolute; font-size:2.6rem; color:#ffe5a4; opacity:.85; }
.launch-spark-one { top:13%; left:25%; }
.launch-spark-two { bottom:12%; right:22%; color:#8ef2c6; }
.coming-banner { background:#fbf9f2; border-top:1px solid rgb(21 53 86 / .13); }
.coming-banner-inner { display:flex; gap:1rem; align-items:center; justify-content:center; padding:2.2rem 0; color:#273a70; }
.banner-icon { flex:none; width:3rem; height:3rem; color:#ee8c27; }
.coming-banner h2 { font-size:clamp(1.35rem,3vw,1.8rem); }
.coming-banner p { margin-top:.3rem; font-size:.92rem; }
/* Responsive map stops. Final space station becomes the wider destination on compact screens. */
@media (max-width:380px) {
  .journey-grid { gap:.6rem; }
  .grade-summary { padding:.65rem; min-height:14rem; }
  .stop-scene { height:5.5rem; }
  .stop-vehicle { width:4.25rem; height:4.25rem; }
  .grade-place { font-size:1rem; }
  .grade-peek { font-size:.72rem; }
  .world-route-label { display:none; }
}
@media (min-width:381px) and (max-width:767px) { .world-route-label { font-size:.95rem; } }
@media (max-width:767px) {
  .journey-grid-space .journey-stop:last-child { grid-column:1/-1; }
  .journey-grid-space .journey-stop:last-child .grade-summary { min-height:11rem; }
  .journey-grid-space .journey-stop:last-child .stop-scene { height:5.4rem; }
  .world-heading h2 { font-size:clamp(1.85rem,8vw,2.65rem); }
}
@media (min-width:768px) {
  .world-heading { padding-bottom:.35rem; }
  .journey-grid { gap:1.1rem; }
  .grade-summary { padding:1.05rem; min-height:15.8rem; }
  .stop-scene { height:8rem; }
}
@media (min-width:1024px) {
  .journey-grid-earth { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .journey-grid-space { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .journey-grid { gap:1.3rem; }
  .grade-summary { min-height:17rem; padding:1.1rem; }
  .stop-scene { height:9rem; }
  .grade-place { font-size:1.4rem; }
  .world-route-label { font-size:1.3rem; }
  .launch-vehicle { width:5.5rem; height:5.5rem; left:calc(50% - 2.75rem); }
}
@media (prefers-reduced-motion:no-preference) {
  .world-backdrop { animation:backdrop-breathe 17s ease-in-out infinite alternate; }
  .stop-vehicle { animation:vehicle-journey 5.5s ease-in-out infinite; }
  .stop-town .stop-vehicle { animation:train-ride 5.5s ease-in-out infinite; }
  .stop-ocean .stop-vehicle { animation:boat-bob 4.4s ease-in-out infinite; }
  .stop-world .stop-vehicle { animation:balloon-float 5.1s ease-in-out infinite; }
  .stop-moon .stop-vehicle { animation:rocket-rise 5.4s ease-in-out infinite; }
  .stop-solar .stop-vehicle { animation:spaceship-orbit 6s ease-in-out infinite; }
  .stop-deep .stop-vehicle { animation:station-spin 15s linear infinite; }
  .scene-orb { animation:orb-breathe 6s ease-in-out infinite alternate; }
  .orb-b { animation-delay:-3s; }
  .launch-scene.in-view .launch-vehicle { animation:launch-ride 2.8s var(--ease-out) both; }
  .launch-scene.in-view .launch-flame { animation:flame-glow .34s ease-in-out 8 alternate; }
  .launch-scene.in-view .launch-path { animation:path-arrive 2.8s ease-out 1 both; }
  .launch-scene.in-view .launch-spark { animation:orb-breathe 2s ease-in-out 2 alternate; }
  .motion-ready [data-reveal] { opacity:.92; translate:0 13px; transition:translate .65s var(--ease-out),opacity .65s ease-out; }
  .motion-ready [data-reveal].in-view { opacity:1; translate:0 0; }
  .journey-stop { transition:transform .25s var(--ease-out),box-shadow .25s ease-out,border-color .2s; }
  .grade-summary:active .stop-vehicle { animation-play-state:paused; }
  .journey-stop[open] .preview-topics li { animation:peek-in .36s ease-out both; }
  .journey-stop[open] .preview-topics li:nth-child(2) { animation-delay:.07s; }
  .journey-stop[open] .preview-topics li:nth-child(3) { animation-delay:.14s; }
  .hero .fx-balloon { animation:hero-balloon 7s ease-in-out infinite; }
  .hero .fx-plane { animation:hero-plane 9s ease-in-out infinite; }
  .hero .fx-rocket { animation:hero-rocket 8s ease-in-out infinite; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .journey-stop:hover { transform:translateY(-5px); box-shadow:0 17px 30px rgb(21 64 108 / .22); }
  .journey-stop:hover .stop-vehicle { animation-duration:2.7s; }
}
@media (prefers-reduced-motion:reduce) {
  .stop-vehicle, .world-backdrop, .scene-orb, .launch-vehicle, .launch-flame, .launch-path, .launch-spark, .hero .fx-balloon, .hero .fx-plane, .hero .fx-rocket { animation:none!important; }
  .motion-ready [data-reveal] { opacity:1!important; translate:none!important; transition:none!important; }
}
@keyframes vehicle-journey { 0%,100% { transform:translateX(-5px) rotate(-3deg); } 50% { transform:translateX(8px) rotate(2deg); } }
@keyframes train-ride { 0%,100% { transform:translateX(-8px); } 50% { transform:translateX(12px); } }
@keyframes boat-bob { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-7px) rotate(6deg); } }
@keyframes balloon-float { 0%,100% { transform:translateY(9px) rotate(-4deg); } 50% { transform:translateY(-12px) rotate(5deg); } }
@keyframes rocket-rise { 0%,100% { transform:translateY(8px) rotate(-3deg); } 50% { transform:translateY(-15px) rotate(3deg); } }
@keyframes spaceship-orbit { 0%,100% { transform:translate(-9px,5px) rotate(-12deg); } 50% { transform:translate(11px,-6px) rotate(14deg); } }
@keyframes station-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes orb-breathe { from { opacity:.4; scale:.95; } to { opacity:.88; scale:1.1; } }
@keyframes backdrop-breathe { from { opacity:.58; } to { opacity:.85; } }
@keyframes path-arrive { from { opacity:.2; stroke-dashoffset:210; } to { opacity:1; stroke-dashoffset:0; } }
@keyframes launch-ride { from { transform:translate(-115px,34px) rotate(-35deg) scale(.72); opacity:.65; } 75% { opacity:1; } to { transform:translate(0,0) rotate(34deg) scale(1); opacity:1; } }
@keyframes flame-glow { from { transform:scaleY(.75); } to { transform:scaleY(1.3); } }
@keyframes peek-in { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-balloon { 0%,100% { transform:translateY(3px); } 50% { transform:translateY(-11px); } }
@keyframes hero-plane { 0%,100% { transform:translateX(-9px); } 50% { transform:translateX(12px); } }
@keyframes hero-rocket { 0%,100% { transform:translate(-6px,9px); } 50% { transform:translate(7px,-10px); } }