/* Base layout, ignition screen, finale card, and no-3D fallback. */

:root{
  --navy:#23315f; --sky:#87ceeb; --coral:#ff8a73; --sun:#ffd166; --mint:#7bdcb5; --cream:#fff8ec;
  --ink-soft:#4a5585;      /* body copy on cream */
  --ink-label:#5c668f;     /* small labels on cream (kept dark enough to read) */
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Nunito',sans-serif;background:var(--sky);color:var(--navy);overflow-x:hidden}
body.roaming{overflow:hidden}
#world{position:fixed;inset:0;z-index:0}
canvas{display:block}
#spacer{height:1300vh}
body.no-3d #spacer{height:auto}

#ignition{
  position:fixed;inset:0;z-index:20;overflow:auto;overscroll-behavior:contain;
  min-height:100svh;color:var(--navy);background:#9fdcf5;
  transition:opacity .75s ease,visibility 0s linear 0s;
  isolation:isolate;
}
#ignition.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .75s ease,visibility 0s linear .75s}
.landing-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-1;background:linear-gradient(155deg,#91d5ef 0%,#c9ecfa 52%,#ffe5b9 100%)}
.landing-fx{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.82;mix-blend-mode:multiply}
.landing-atmosphere::before{
  content:"";position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(rgba(35,49,95,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(35,49,95,.22) 1px,transparent 1px);
  background-size:72px 72px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 74%);animation:sky-grid 24s linear infinite;
}
.landing-atmosphere::after{
  content:"";position:absolute;width:min(58vw,760px);aspect-ratio:1;right:-18vw;top:-45%;
  border:2px solid rgba(35,49,95,.14);border-radius:50%;box-shadow:0 0 0 52px rgba(255,248,236,.10),0 0 0 104px rgba(255,248,236,.08);
  animation:halo-breathe 8s ease-in-out infinite;
}
.landing-sun{position:absolute;right:9vw;top:13vh;width:clamp(70px,9vw,128px);aspect-ratio:1;border:3px solid var(--navy);border-radius:50%;background:var(--sun);box-shadow:10px 10px 0 rgba(255,138,115,.72);animation:sun-breathe 4.8s ease-in-out infinite}
.landing-sun::before{content:"";position:absolute;inset:-18px;border:2px dashed rgba(35,49,95,.28);border-radius:50%;animation:sun-orbit 18s linear infinite}
.landing-cloud{position:absolute;width:132px;height:28px;border:2px solid rgba(35,49,95,.6);border-radius:999px;background:rgba(255,248,236,.82);box-shadow:5px 5px 0 rgba(35,49,95,.11)}
.landing-cloud::before,.landing-cloud::after{content:"";position:absolute;bottom:9px;border:2px solid rgba(35,49,95,.6);border-bottom:0;background:var(--cream);border-radius:999px 999px 0 0}
.landing-cloud::before{width:48px;height:35px;left:24px}.landing-cloud::after{width:36px;height:26px;right:23px}
.cloud-one{left:7vw;top:18vh;animation:cloud-drift 7s ease-in-out infinite alternate}.cloud-two{right:27vw;top:8vh;transform:scale(.68);opacity:.72;animation:cloud-drift 9s 1.1s ease-in-out infinite alternate-reverse}
.landing-flight-line{position:absolute;right:17vw;top:26vh;width:min(34vw,460px);height:130px;border-top:2px dashed rgba(35,49,95,.45);border-radius:50%;transform:rotate(-8deg)}
.landing-flight-line::after{content:"✈";position:absolute;left:-5%;top:12px;color:var(--coral);font-size:1.45rem;transform:rotate(14deg);text-shadow:2px 2px 0 var(--cream);animation:plane-route 6.8s linear infinite}
.landing-city{position:absolute;left:-2%;right:-2%;bottom:-1px;height:24vh;min-height:150px;background:#314376;clip-path:polygon(0 65%,4% 65%,4% 39%,7% 39%,7% 57%,10% 57%,10% 28%,12% 28%,12% 49%,16% 49%,16% 14%,18% 14%,18% 52%,22% 52%,22% 35%,25% 35%,25% 61%,29% 61%,29% 22%,32% 22%,32% 54%,36% 54%,36% 44%,39% 44%,39% 16%,42% 16%,42% 58%,46% 58%,46% 29%,50% 29%,50% 48%,54% 48%,54% 8%,57% 8%,57% 55%,61% 55%,61% 31%,65% 31%,65% 60%,69% 60%,69% 20%,72% 20%,72% 46%,76% 46%,76% 34%,80% 34%,80% 57%,84% 57%,84% 26%,88% 26%,88% 51%,92% 51%,92% 37%,96% 37%,96% 61%,100% 61%,100% 100%,0 100%)}
.landing-city::before{content:"";position:absolute;inset:25% 0 0;background:var(--navy);clip-path:polygon(0 54%,7% 54%,7% 28%,11% 28%,11% 60%,18% 60%,18% 43%,24% 43%,24% 70%,33% 70%,33% 35%,40% 35%,40% 62%,48% 62%,48% 21%,54% 21%,54% 72%,62% 72%,62% 47%,69% 47%,69% 66%,78% 66%,78% 32%,84% 32%,84% 60%,92% 60%,92% 46%,100% 46%,100% 100%,0 100%)}
.landing-city::after{content:"";position:absolute;inset:34% 4% 8%;opacity:.5;background:repeating-linear-gradient(90deg,transparent 0 21px,var(--sun) 21px 25px,transparent 25px 41px);mask-image:linear-gradient(to bottom,#000 0 8%,transparent 8% 24%,#000 24% 32%,transparent 32% 48%,#000 48% 56%,transparent 56% 72%,#000 72% 80%,transparent 80%);animation:city-lights 3.6s steps(2,end) infinite}
.landing-sun,.landing-cloud,.landing-flight-line,.landing-city{z-index:2}
.landing-frame{position:relative;z-index:1;min-height:100svh;max-width:1440px;margin:0 auto;padding:clamp(18px,3vw,38px) clamp(20px,5vw,72px) clamp(24px,4vw,48px);display:grid;grid-template-rows:auto 1fr auto}
.landing-nav{width:100%;max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.landing-brand{display:flex;align-items:center;gap:.8rem}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border:3px solid var(--navy);border-radius:13px;background:var(--cream);font-family:'Fredoka',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:.05em;box-shadow:5px 5px 0 var(--coral)}
.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-family:'Fredoka',sans-serif;font-size:1rem}.brand-copy small{margin-top:.3rem;color:var(--ink-soft);font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.landing-location{display:flex;align-items:center;gap:.55rem;padding:.65rem .9rem;border:2px solid var(--navy);border-radius:999px;background:rgba(255,248,236,.86);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px 0 rgba(35,49,95,.16)}
.location-pulse,.note-dot,.market-beacon{display:inline-block;flex:0 0 auto;width:9px;height:9px;border:2px solid var(--navy);border-radius:50%;background:var(--mint)}
.location-pulse,.market-beacon{animation:beacon-pulse 2.2s ease-out infinite}
.location-short{display:none}
.landing-shell{width:100%;max-width:1180px;margin:0 auto;padding:clamp(46px,8vh,96px) 0 clamp(115px,15vh,170px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(42px,7vw,92px);align-items:center}
.landing-copy{max-width:680px;animation:landing-rise .65s ease-out both}
.landing-eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.05rem;font-size:.68rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.landing-eyebrow span{padding:.42rem .66rem;border:2px solid var(--navy);background:var(--cream)}
.landing-eyebrow span:first-child{color:var(--cream);background:var(--navy)}
.landing-role{max-width:62ch;color:#7f2d24;font-size:.78rem;font-weight:900;letter-spacing:.11em;line-height:1.35;text-transform:uppercase;text-wrap:balance}
#ignition h1{margin-top:.75rem;font-family:'Fredoka',sans-serif;font-size:clamp(3.7rem,6.7vw,6.5rem);font-weight:700;letter-spacing:-.055em;line-height:.88;text-wrap:balance;color:var(--navy)}
#ignition h1 span{display:block;font-size:.58em;letter-spacing:-.035em;color:#42548b}
.landing-intro{max-width:59ch;margin-top:1.35rem;color:#364472;font-size:clamp(1rem,1.2vw,1.12rem);font-weight:700;line-height:1.58;text-wrap:pretty}
.landing-actions{display:flex;align-items:center;gap:1.4rem;margin-top:2rem;flex-wrap:wrap}
#startBtn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.4rem;min-width:236px;min-height:58px;padding:.55rem .55rem .55rem 1.35rem;cursor:pointer;border:3px solid var(--navy);border-radius:15px;font-family:'Fredoka',sans-serif;font-weight:700;letter-spacing:.035em;font-size:1.02rem;color:var(--cream);background:var(--navy);box-shadow:8px 8px 0 var(--coral);transition:transform .16s ease,box-shadow .16s ease;animation:runway-charge 4.2s ease-in-out infinite}
.start-icon{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:var(--navy);background:var(--sun);font-size:1.1rem;transition:transform .2s ease;animation:ready-bob 2.8s ease-in-out infinite}
.start-icon::after{content:"";position:absolute;inset:-6px;border:1px dashed rgba(255,248,236,.8);border-radius:13px;animation:icon-orbit 7s linear infinite}
#startBtn:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 var(--coral)}#startBtn:hover .start-icon{transform:translate(3px,-2px) rotate(-7deg)}
#startBtn:active{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--coral)}#startBtn[disabled]{opacity:.7;cursor:progress}
.landing-note{display:flex;align-items:center;gap:.5rem;color:#425077;font-size:.73rem;font-weight:900;line-height:1.35}.note-dot{width:8px;height:8px;border-width:1px;background:var(--coral)}
.flight-card{position:relative;overflow:hidden;border:3px solid var(--navy);border-radius:24px;background:var(--cream);box-shadow:12px 12px 0 rgba(35,49,95,.2);animation:landing-rise .65s .12s ease-out both,card-float 5.5s .9s ease-in-out infinite,card-tilt 8s 1.2s ease-in-out infinite}
.flight-card::before,.flight-card::after{content:"";position:absolute;right:92px;width:24px;height:24px;border:3px solid var(--navy);border-radius:50%;background:#b7e5f4;z-index:2}.flight-card::before{top:-15px}.flight-card::after{bottom:-15px}
.flight-card-head{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.35rem;border-bottom:2px dashed rgba(35,49,95,.42);background:#ffe0a5}
.flight-card-head::after{content:"";position:absolute;inset:-25% auto -25% -32%;width:19%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,248,236,.72),transparent);transform:skewX(-16deg);animation:ticket-scan 4.6s 1.1s ease-in-out infinite}
.flight-card-head>div{display:flex;flex-direction:column}.panel-label{font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#a83d29}.flight-card-head strong{margin-top:.25rem;font-family:'Fredoka',sans-serif;font-size:1.25rem}.flight-code{padding:.48rem .6rem;border:2px solid var(--navy);border-radius:8px;font-family:'Fredoka',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.08em;background:var(--cream)}
.flight-stops{list-style:none;padding:1rem 1.35rem .85rem}.flight-stops li{position:relative;display:grid;grid-template-columns:2.25rem 1fr;gap:.72rem;align-items:center;min-height:51px}.flight-stops li:not(:last-child)::after{content:"";position:absolute;left:17px;top:35px;bottom:-9px;border-left:2px dashed rgba(35,49,95,.3)}
.stop-no{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--navy);border-radius:50%;background:var(--cream);font-family:'Fredoka',sans-serif;font-size:.66rem;font-weight:700;animation:stop-scan 6s ease-in-out infinite}.flight-stops li:nth-child(2) .stop-no{animation-delay:1.2s}.flight-stops li:nth-child(3) .stop-no{color:var(--cream);background:var(--coral);animation-delay:2.4s}.flight-stops li:nth-child(4) .stop-no{animation-delay:3.6s}.flight-stops li:nth-child(5) .stop-no{animation-delay:4.8s}
.stop-copy{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;min-width:0}.stop-copy strong{font-family:'Fredoka',sans-serif;font-size:.92rem}.stop-copy small{color:#626b8f;font-size:.65rem;font-weight:800;text-align:right}
.landing-market{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.85rem 1.35rem;border-top:2px solid var(--navy);background:linear-gradient(110deg,#dff5e9 0 38%,#fff1bd 50%,#dff5e9 62%);background-size:240% 100%;animation:market-flow 5.2s linear infinite}.market-copy{display:flex;flex-direction:column;min-width:0}.market-copy small{color:#4e5c7d;font-size:.58rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.market-copy strong{margin-top:.18rem;font-family:'Fredoka',sans-serif;font-size:.82rem;white-space:nowrap}.market-tag{padding:.34rem .48rem;border:2px solid var(--navy);border-radius:6px;font-size:.54rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;background:var(--cream)}
.market-beacon.is-down{background:var(--coral)}.market-beacon.is-stale{background:var(--sun)}
.landing-ticker{width:100%;max-width:1180px;margin:0 auto;overflow:hidden;border:2px solid var(--navy);border-radius:10px;background:var(--cream);box-shadow:6px 6px 0 var(--coral)}
.landing-ticker-track{display:flex;width:max-content;animation:landing-tape 22s linear infinite}
.landing-ticker-group{display:flex;flex:none;align-items:center;gap:1.15rem;padding:.58rem 1.15rem;font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.landing-ticker-group b{color:var(--coral);font-size:.72rem}
@keyframes landing-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sky-grid{to{background-position:72px 36px}}
@keyframes sun-orbit{to{transform:rotate(360deg)}}
@keyframes cloud-drift{from{translate:-8px 0}to{translate:12px -5px}}
@keyframes plane-route{0%{left:-5%;top:12px;opacity:0}10%{opacity:1}50%{top:-17px}90%{opacity:1}100%{left:101%;top:-8px;opacity:0}}
@keyframes city-lights{0%,100%{opacity:.36;filter:brightness(.9)}50%{opacity:.62;filter:brightness(1.18)}}
@keyframes beacon-pulse{0%,45%{box-shadow:0 0 0 0 rgba(35,49,95,.3)}100%{box-shadow:0 0 0 7px rgba(35,49,95,0)}}
@keyframes ready-bob{0%,100%{translate:0 0}50%{translate:2px -2px}}
@keyframes card-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes landing-tape{to{transform:translateX(-50%)}}
@keyframes halo-breathe{0%,100%{opacity:.64;transform:scale(.95) rotate(0)}50%{opacity:1;transform:scale(1.06) rotate(7deg)}}
@keyframes sun-breathe{0%,100%{translate:0 0;box-shadow:10px 10px 0 rgba(255,138,115,.72)}50%{translate:-3px 3px;box-shadow:15px 7px 0 rgba(255,138,115,.56)}}
@keyframes runway-charge{0%,100%{box-shadow:8px 8px 0 var(--coral),0 0 0 0 rgba(255,209,102,0)}50%{box-shadow:8px 8px 0 var(--coral),0 0 0 7px rgba(255,209,102,.22)}}
@keyframes icon-orbit{to{transform:rotate(360deg)}}
@keyframes card-tilt{0%,100%{rotate:-.22deg}50%{rotate:.32deg}}
@keyframes ticket-scan{0%,18%{left:-32%;opacity:0}35%{opacity:1}62%,100%{left:118%;opacity:0}}
@keyframes stop-scan{0%,12%{color:var(--cream);background:var(--coral);transform:scale(1.12);box-shadow:0 0 0 5px rgba(255,138,115,.24)}21%,100%{color:var(--navy);background:var(--cream);transform:scale(1);box-shadow:0 0 0 0 rgba(255,138,115,0)}}
@keyframes market-flow{to{background-position:-240% 0}}

#finale{
  position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;pointer-events:none;transition:opacity 1s ease;
  background:radial-gradient(ellipse at 50% 60%,rgba(27,42,94,.35),rgba(27,42,94,.7));
}
#finale.on{opacity:1;pointer-events:none}
#finale:not(.on),#finale:not(.on) *{pointer-events:none!important}
.card{
  background:var(--cream);border:4px solid var(--navy);border-radius:28px;
  padding:2.6rem 3rem;max-width:min(88vw,560px);
  box-shadow:0 10px 0 rgba(35,49,95,.35),0 30px 60px rgba(10,16,40,.45);
  pointer-events:none;
}
#finale.on .card{pointer-events:auto}
.card h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.8rem,6vw,3rem);color:var(--navy)}
.card p{margin-top:.9rem;color:var(--ink-soft);font-weight:600;line-height:1.6}
.contact-links{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem}
.contact-links a{
  display:inline-block;padding:.9rem 1.9rem;text-decoration:none;border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.98rem;color:#fff;background:var(--coral);
  box-shadow:0 6px 0 #d96a55;transition:transform .15s ease;min-height:44px;
}
.contact-links a.secondary{color:var(--navy);background:var(--cream);border:3px solid var(--navy);box-shadow:0 6px 0 rgba(35,49,95,.22)}
.contact-links a:hover{transform:translateY(-3px)}
.card .actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.1rem}
.card button{
  padding:.72rem 1.6rem;border:3px solid var(--navy);border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.92rem;color:var(--navy);background:var(--cream);
  cursor:pointer;box-shadow:0 5px 0 rgba(35,49,95,.22);transition:transform .15s ease;min-height:44px;
}
.card button:hover{transform:translateY(-2px)}
.card .updated{display:block;margin-top:1.3rem;font-size:.72rem;font-weight:700;color:var(--ink-label);letter-spacing:.06em}

/* The written tour. Visually hidden but always available to screen readers
   and search engines; becomes the visible page when WebGL/Three.js cannot
   run (body.no-3d, set by src/main.js). Not an error page - the same
   portfolio, just in prose. */
#fallback{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
}
body.no-3d #fallback{
  position:relative;width:auto;height:auto;margin:0;clip:auto;clip-path:none;overflow:visible;
  display:block;z-index:15;min-height:100vh;
  background:linear-gradient(to bottom,#9fdcf5 0%,#c9ecfa 55%,#ffe9c4 100%);
  padding:9vh 6vw 12vh;
}
body.no-3d #ignition,body.no-3d #hud,body.no-3d #hint,body.no-3d #ticker,
body.no-3d #configToggle,body.no-3d #world,body.no-3d #progress{display:none}
#fallback .inner{max-width:720px;margin:0 auto}
#fallback h1{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--navy);font-size:clamp(2rem,6vw,3.4rem);line-height:1.08}
#fallback .lede{margin-top:1rem;color:var(--ink-soft);font-weight:600;font-size:1.05rem;line-height:1.6}
#fallback section{margin-top:2rem;background:var(--cream);border:3px solid var(--navy);border-radius:22px;padding:1.4rem 1.6rem;box-shadow:0 7px 0 rgba(35,49,95,.16)}
#fallback h2{font-family:'Fredoka',sans-serif;font-size:1.25rem;color:var(--navy)}
#fallback h3{font-family:'Fredoka',sans-serif;font-size:1.02rem;color:#c94f36;margin-top:1rem}
#fallback p,#fallback li{margin-top:.5rem;color:#3c4877;font-weight:600;line-height:1.55}
#fallback ul{padding-left:1.2rem}
#fallback a{color:#c94f36;font-weight:800}

/* Screen-reader-only content (also readable by search engines). */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}