/* ZoraMath v3: connected Ocean → Earth → Space. Visual-first without external assets. */
.journey-hero {
  position:relative;
  padding:clamp(1.2rem,3vw,2rem) 0 clamp(2.2rem,5vw,4rem);
  background:linear-gradient(180deg,#f8fcff 0%,#e6f9fd 65%,#caf3ef 100%);
  isolation:isolate;
}
.journey-hero::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 11% 15%,rgb(91 219 237 / .25),transparent 24%),
    radial-gradient(circle at 83% 10%,rgb(149 126 255 / .13),transparent 27%);
}
.hero-intro { text-align:center; color:#173657; margin-bottom:clamp(1.15rem,3vw,1.8rem); }
.hero-eyebrow {font-size:.73rem;letter-spacing:.19em;font-weight:900;color:#3c6092;}
.hero-intro h1 {font-size:clamp(2rem,5vw,3.35rem);letter-spacing:-.035em;margin:.15rem auto .15rem;max-width:54rem;}
.hero-lede {font-size:clamp(.95rem,1.65vw,1.15rem);font-weight:800;line-height:1.25;color:#3b5374;}
.portal-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,2vw,1.25rem);}
.world-portal {
  display:block;position:relative;isolation:isolate;overflow:hidden;min-width:0;
  height:clamp(305px,32vw,425px);border-radius:clamp(20px,2vw,30px);
  border:3px solid rgb(255 255 255 / .8);
  box-shadow:0 14px 34px rgb(21 57 107 / .16),inset 0 0 0 1px rgb(21 57 107 / .08);
  text-decoration:none; color:#fff;transition:transform .3s var(--ease-out),box-shadow .3s ease;
}
.world-portal img {position:absolute;display:block;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s var(--ease-out);}
.world-portal::after {content:"";position:absolute;z-index:0;inset:42% 0 0;background:linear-gradient(180deg,transparent,rgb(7 39 73 / .88));pointer-events:none;}
.portal-earth::after {background:linear-gradient(180deg,transparent,rgb(27 63 48 / .9));}
.portal-space::after {background:linear-gradient(180deg,transparent,rgb(9 10 46 / .96));}
.portal-label {position:absolute;z-index:1;bottom:1.2rem;left:1.25rem;right:3.6rem;display:flex;flex-direction:column;gap:.05rem;text-shadow:0 2px 10px rgb(0 20 40 / .5);}
.portal-label strong {font:700 clamp(1.7rem,3vw,2.45rem)/1.06 var(--font-display);letter-spacing:.01em;}
.portal-label small {font-size:clamp(.77rem,1.2vw,.98rem);font-weight:900;line-height:1.4;}
.portal-arrow {position:absolute;z-index:1;right:1.2rem;bottom:1.28rem;display:grid;place-items:center;width:2.65rem;height:2.65rem;background:rgb(255 255 255 / .94);border-radius:50%;font-size:1.55rem;font-weight:900;color:#153b66;box-shadow:0 3px 8px rgb(0 20 40 / .2);transition:transform .25s;}
.portal-ocean .portal-arrow {color:#007b9f;}
.portal-space .portal-arrow {color:#303582;}
.world-portal:focus-visible {outline:4px solid #173b76;outline-offset:4px;}
.world-portal:active {transform:translateY(2px);}
.world-ocean {
  padding-top:clamp(2.75rem,5vw,4.75rem);
  color:#0a3a53;
  background:radial-gradient(ellipse at 8% 10%,rgb(225 255 235 / .7),transparent 35%),
    radial-gradient(ellipse at 90% 80%,rgb(42 140 212 / .3),transparent 45%),
    linear-gradient(180deg,#8ae6ec 0%,#6ad6dc 47%,#42b6d1 100%);
}
.world-ocean .world-kicker {color:#0b5267;}
.world-ocean .world-heading h2 span {color:#f4906b;}
.world-ocean .world-route-label {font-size:.99rem;}
.world-ocean .journey-stop {border:2px solid rgb(255 255 255 / .8);background:#f9fffb;}
.world-ocean .journey-stop[open] {border-color:#ffb56b;}
.world-ocean .grade-index {min-width:3.2rem;background:#fff0af;color:#124a66;}
.world-ocean .grade-peek {color:#225d83;}
.world-ocean .peek-arrow {background:#0679a5;color:#fff;}
.world-ocean .preview-topics li::before {color:#ff8465;}
.ocean-decor {position:absolute;pointer-events:none;border-radius:50%;z-index:-1;opacity:.32;}
.decor-one {width:19rem;height:19rem;border:2.2rem solid #c4fff0;top:7%;right:-7rem;}
.decor-two {width:12rem;height:12rem;border:1.6rem solid #d9feff;bottom:7%;left:-5rem;}
.journey-grid-ocean {grid-template-columns:repeat(2,minmax(0,1fr));}
.stop-coral {--scene-from:#8bead6;--scene-to:#c7fff1;--vehicle:#d8784b;}
.stop-lagoon {--scene-from:#76c9e9;--scene-to:#d2fff0;--vehicle:#14897a;}
.stop-reef {--scene-from:#368fd0;--scene-to:#a8f5ee;--vehicle:#1878a4;}
.stop-coral .stop-scene::before {background:rgb(255 138 127 / .5);}
.stop-lagoon .stop-scene::before {background:rgb(27 157 132 / .35);}
.stop-reef .stop-scene::before {background:rgb(10 104 159 / .3);}
.stop-mountain {--scene-from:#afe8ff;--scene-to:#e7f2bc;--vehicle:#b66b2a;}
.stop-mountain .stop-scene::before {background:rgb(72 153 91 / .28);}
.surface-bridge {height:clamp(6rem,13vw,10rem);position:relative;overflow:hidden;background:linear-gradient(#3ab3d3 0%,#8de0ef 42%,#cbf3ed 43%,#c6eddd 100%);}
.surface-wave {position:absolute;inset:31% -10% auto;height:45%;border-top:8px solid rgb(255 255 255 / .75);border-radius:50%;transform:rotate(-3deg);}
.surface-sun {position:absolute;right:12%;top:15%;height:3.2rem;width:3.2rem;border-radius:50%;background:#ffd779;box-shadow:0 0 0 18px rgb(255 244 191 / .28);}
.surface-island {position:absolute;left:8%;bottom:-35%;width:23%;height:60%;border-radius:50% 50% 0 0;background:#71bf83;transform:rotate(7deg);}
.surface-bubble {position:absolute;width:1.2rem;height:1.2rem;border:2px solid rgb(239 255 255 / .8);border-radius:50%;bottom:13%;}
.bubble-one {left:32%;}.bubble-two {left:36%;width:.65rem;height:.65rem;bottom:42%;}.bubble-three {left:40%;width:.9rem;height:.9rem;bottom:24%;}
/* Three stops per world: no hidden fourth grade, no orphan columns. */
@media (min-width:768px) {
  .journey-grid-ocean,.journey-grid-earth,.journey-grid-space {grid-template-columns:repeat(3,minmax(0,1fr));}
  .journey-grid .journey-stop:last-child {grid-column:auto;}
  .grade-summary {min-height:15.4rem;}
}
@media (min-width:1024px) {
  .journey-grid-earth {grid-template-columns:repeat(3,minmax(0,1fr));}
  .grade-summary {min-height:16.4rem;}
}
@media (max-width:767px) {
  .journey-hero {padding:1.05rem 0 1.9rem;}
  .hero-intro {margin-bottom:1.05rem;}
  .hero-intro h1 {font-size:clamp(1.9rem,6.8vw,2.55rem);}
  .portal-grid {grid-template-columns:1fr;gap:.65rem;}
  .world-portal {height:clamp(125px,21vh,164px);border-radius:20px;border-width:2px;}
  .world-portal img {object-position:center 54%;}
  .portal-label {left:1.1rem;bottom:.78rem;right:3.5rem;}
  .portal-label strong {font-size:clamp(1.4rem,5vw,1.85rem);}
  .portal-label small {font-size:.78rem;}
  .portal-arrow {width:2.35rem;height:2.35rem;right:.85rem;bottom:.85rem;}
  .journey-grid-ocean .journey-stop:last-child,.journey-grid-earth .journey-stop:last-child {grid-column:1/-1;}
  .journey-grid-ocean .journey-stop:last-child .grade-summary,.journey-grid-earth .journey-stop:last-child .grade-summary {min-height:11.5rem;}
  .journey-grid-ocean .journey-stop:last-child .stop-scene,.journey-grid-earth .journey-stop:last-child .stop-scene {height:5.5rem;}
}
@media (max-width:380px) {
  .nav-list {gap:0 .45rem;}
  .nav-list a {font-size:.78rem;}
  .world-portal {height:125px;}
  .hero-eyebrow {letter-spacing:.13em;font-size:.65rem;}
  .portal-label small {font-size:.72rem;}
  .portal-label strong {font-size:1.45rem;}
  .world-ocean .world-route-label {display:none;}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .world-portal:hover {transform:translateY(-6px);box-shadow:0 20px 39px rgb(21 57 107 / .25);}
  .world-portal:hover img {transform:scale(1.07);}
  .world-portal:hover .portal-arrow {transform:rotate(40deg);}
}
@media (prefers-reduced-motion:no-preference) {
  .world-ocean .vehicle-fish {animation:fish-swim 4.4s ease-in-out infinite;}
  .world-ocean .vehicle-turtle {animation:turtle-glide 5.8s ease-in-out infinite;}
  .world-ocean .vehicle-submarine {animation:submarine-bob 5.1s ease-in-out infinite;}
  .world-earth .vehicle-bus {animation:vehicle-journey 5.5s ease-in-out infinite;}
  .world-earth .vehicle-train {animation:train-ride 5.5s ease-in-out infinite;}
  .surface-bubble {animation:bubble-rise 4s ease-in infinite;}
  .bubble-two {animation-delay:-1.9s;}.bubble-three {animation-delay:-3.1s;}
  .surface-wave {animation:surface-swell 6s ease-in-out infinite alternate;}
}
@media (prefers-reduced-motion:reduce) {
  .world-portal,.world-portal img,.portal-arrow,.surface-bubble,.surface-wave,.world-ocean .stop-vehicle {animation:none!important;transition:none!important;}
}
@keyframes fish-swim {0%,100%{transform:translateX(-10px) rotate(-7deg)}50%{transform:translateX(11px) rotate(6deg)}}
@keyframes turtle-glide {0%,100%{transform:translate(-8px,5px) rotate(-6deg)}50%{transform:translate(8px,-6px) rotate(5deg)}}
@keyframes submarine-bob {0%,100%{transform:translateY(7px)}50%{transform:translateY(-8px)}}
@keyframes bubble-rise {0%{transform:translateY(22px);opacity:.75}100%{transform:translateY(-100px);opacity:0}}
@keyframes surface-swell {0%{transform:rotate(-3deg) translateY(1px)}100%{transform:rotate(-1deg) translateY(-3px)}}

/* Live lesson link inside a grade preview (only rendered when the hub exists). */
.preview-cta { display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:.9rem; padding:.6rem 1.25rem; border-radius:var(--radius-pill); background:var(--cta); color:var(--cta-ink); font-family:var(--font-display); font-weight:700; font-size:1.05rem; text-decoration:none; box-shadow:0 6px 18px var(--shadow-card); }
.preview-cta:hover, .preview-cta:focus-visible { filter:brightness(1.06); outline:3px solid var(--brand); outline-offset:3px; }