/* CodeSwitch Academy landing v3: the page as panels floating over one 3D world (world3d.js).
   Builds on v3.css (slabs, keys, nav) and site.css (dashboard, form, FAQ pieces). */
body {
  background:
    radial-gradient(70% 60% at 70% 30%, #12304a 0%, #0a1a2c 45%, var(--navy-900) 100%) fixed;
}
canvas#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity 1s ease; }
.has3d canvas#world { opacity: 1; }
.no3d canvas#world { display: none; }

/* fixed nav that gains a glass bar once you scroll */
.nav { position: fixed; transition: background 0.3s ease, padding 0.3s ease; }
.nav.solid { background: rgba(5, 12, 22, 0.82); padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 rgba(53, 232, 245, 0.16); }

/* ---------------------------------------------------------------- scenes: each is one camera stop in the world */
.scene {
  position: relative; z-index: 1;
  min-height: 135vh; min-height: 135svh;
  display: flex; align-items: center;
  padding: 14vh clamp(16px, 5vw, 72px);
  pointer-events: none;             /* empty space passes clicks to the world (tap Zuri) */
  perspective: 1400px;
}
.scene > * { pointer-events: auto; }
.scene.left { justify-content: flex-start; }
.scene.right { justify-content: flex-end; }
.scene.center { justify-content: center; }

.panel { width: min(540px, 100%); --cut: 16px; padding: 30px 32px; }
.panel.wide { width: min(620px, 100%); }
.panel h2 { margin-top: 12px; }
.panel .lede { font-size: 17px; margin-bottom: 18px; }
.panel p { color: var(--muted); }
.panel ul.dots { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.panel ul.dots li { display: flex; gap: 12px; color: var(--muted); }
.panel ul.dots li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; background: var(--gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.panel ul.dots b { color: var(--text); font-weight: 600; }
.panel .tag {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyan-soft);
}
.panel .tag i { width: 38px; height: 38px; display: grid; place-items: center; color: var(--cyan); background: rgba(53, 232, 245, 0.12);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.panel .mini { display: grid; gap: 14px; margin-top: 18px; }
.panel .mini > div { --cut: 9px; padding: 16px 18px; }
.panel .mini > div::after { display: none; }
.panel .mini h3 { font-size: 17px; margin: 0 0 4px; }
.panel .mini p { margin: 0; font-size: 15px; }
.panel .row3 { display: grid; gap: 12px; margin-top: 18px; }
.panel .row3 .slab { --cut: 9px; padding: 16px 18px 16px 64px; }
.panel .row3 .slab::after { display: none; }
.panel .row3 svg, .panel .row3 .n { position: absolute; left: 18px; top: 18px; }
.panel .row3 svg { width: 28px; height: 28px; color: var(--cyan); }
.panel .row3 .n {
  width: 34px; height: 30px; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  color: #2a1600; background: linear-gradient(180deg, #ffe08a, #f2a630);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.panel .row3 h3 { font-size: 16.5px; margin: 0 0 2px; }
.panel .row3 p { margin: 0; font-size: 14.5px; }

/* in-game screenshots: shown in the world on wide screens, inside the panel on phones or without 3D */
.inl { display: none; margin: 18px 0 0; --cut: 10px; padding: 0; overflow: hidden; }
.inl::after { display: none; }
.inl img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.no3d .inl { display: block; }

/* the panels lean toward the world, and tilt with the pointer */
.tilt { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transform-style: preserve-3d; transition: transform 0.25s ease-out; }
.left .tilt { --lean: 7deg; }
.right .tilt { --lean: -7deg; }
.tilt { --ry: var(--lean, 0deg); }
.js .reveal.tilt { opacity: 0; transform: translateZ(-160px) rotateY(calc(var(--lean, 0deg) * 3)) rotateX(8deg); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.tilt.in { opacity: 1; transform: rotateY(var(--ry)) rotateX(var(--rx, 0deg)); }
.js .reveal.tilt.in.live { transition: transform 0.25s ease-out; }

/* hero */
.hero-s { min-height: 100vh; min-height: 100svh; flex-direction: column; align-items: stretch; justify-content: center; padding-bottom: 150px; }
.hero-s .card { max-width: 600px; }
.hero-s h1 { font-size: clamp(36px, 5vw, 62px); }
.hero-s h1 em { font-style: normal; color: var(--gold); }
.hero-s .menu { pointer-events: auto; }
.hero-s .tip { position: absolute; z-index: 3; right: clamp(16px, 5vw, 72px); top: 50%; translate: 0 -50%;
  font-size: 12px; color: var(--muted); letter-spacing: 0.06em; writing-mode: vertical-rl; opacity: 0.6; }
.scroll-cue { position: absolute; left: 50%; bottom: 118px; translate: -50% 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.75; }
.scroll-cue::after { content: ""; width: 2px; height: 26px; background: linear-gradient(var(--cyan), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-4px); opacity: 0.4; } 50% { transform: translateY(4px); opacity: 1; } }

/* island minimap (wide screens) */
.minimap {
  position: fixed; right: 18px; bottom: 18px; z-index: 6; width: 150px; --cut: 9px; padding: 10px 10px 6px;
  opacity: 0; transition: opacity 0.4s ease;
}
.minimap::after { display: none; }
.has3d .minimap.on { opacity: 1; }
.minimap small { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.minimap svg { width: 100%; height: auto; display: block; overflow: visible; }
.mm-path { fill: none; stroke: rgba(53, 232, 245, 0.45); stroke-width: 0.5; stroke-dasharray: 1 0.8; }
.mm-st { stroke: #050c16; stroke-width: 0.5; cursor: pointer; }
.mm-st:hover { stroke: #fff; }
.mm-zuri { fill: #f28c28; stroke: #fff; stroke-width: 0.45; }

/* dashboard / form / FAQ inside panels */
.panel .dash { margin-top: 18px; padding: 18px 18px 18px; --rim-col: rgba(53, 232, 245, 0.4); }
.panel .dash::after { display: none; }
.panel .stats { margin: 14px 0; }
.panel .stat b { font-size: 20px; }
.panel .skill { grid-template-columns: 110px 1fr 70px; }
.panel .faq { gap: 10px; margin-top: 16px; }
.panel .faq details { --fill: rgba(255, 255, 255, 0.04); }
.panel .form { padding: 0; background: none; clip-path: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin-top: 18px; }
.panel .form::before, .panel .form::after { display: none; }
.panel .facts { margin-top: 18px; }
.classroom-p { --rim-col: rgba(255, 216, 107, 0.6); }
.classroom-p .key { margin-top: 6px; }

footer { position: relative; z-index: 1; background: rgba(5, 12, 22, 0.88); }

/* panels sit over a moving scene: keep them solid enough to read and skip the costly blur */
.scene .slab { --fill: linear-gradient(160deg, rgba(18, 42, 68, 0.88), rgba(6, 18, 32, 0.92)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-s .slab { --fill: linear-gradient(160deg, rgba(23, 50, 80, 0.7), rgba(8, 22, 38, 0.8)); }

@media (max-width: 1200px) { .hero-s .tip { display: none; } .hero-s .card { max-width: 520px; } }
@media (max-width: 1100px) { .minimap { display: none; } }
@media (max-width: 900px) {
  .scene, .scene.left, .scene.right { justify-content: center; align-items: flex-end; min-height: 0; padding: 62svh 16px 10svh; }
  .scene.first { padding-top: 70svh; }
  .panel, .panel.wide { width: 100%; padding: 24px 20px; }
  .inl { display: block; }
  .tilt, .left .tilt, .right .tilt { --lean: 0deg; }
  .hero-s { min-height: 100svh; justify-content: flex-end; padding: 52svh 16px 32px; }
  .hero-s .menu { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: 1fr; padding: 0; margin-top: 26px; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .panel .skill { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal.tilt { opacity: 1; transform: none; }
}