/* ================= Cosmic intro: galaxy → planets → Earth → Om ================= */
#intro{position:fixed;inset:0;z-index:100;background:#02030b;overflow:hidden;transition:opacity .9s ease,visibility .9s ease;touch-action:manipulation}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro canvas{position:absolute;inset:0;width:100%;height:100%}
#intro .skip{position:absolute;right:16px;top:calc(14px + env(safe-area-inset-top,0px));z-index:3;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);
  border-radius:999px;padding:7px 14px;font:600 .8rem -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.04em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}
#intro .stage{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none;perspective:900px}
#intro .wheels{position:absolute;width:min(92vmin,620px);height:min(92vmin,620px);opacity:0;transition:opacity 1.4s ease}
#intro .wheels i{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,140,.55) 0 2deg,transparent 2deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61%,#000 63.5%,transparent 64.5%);mask:radial-gradient(circle,transparent 60%,#000 61%,#000 63.5%,transparent 64.5%);
  animation:spin 26s linear infinite}
#intro .wheels i:nth-child(2){inset:9%;animation-direction:reverse;animation-duration:18s;
  background:repeating-conic-gradient(from 0deg,rgba(255,180,90,.6) 0 4deg,transparent 4deg 15deg)}
#intro .wheels i:nth-child(3){inset:-8%;animation-duration:44s;opacity:.55;
  -webkit-mask:radial-gradient(circle,transparent 66%,#000 67%,#000 68%,transparent 69%);mask:radial-gradient(circle,transparent 66%,#000 67%,#000 68%,transparent 69%)}
#intro.show-wheels .wheels{opacity:1}
#intro .omwrap{position:relative;opacity:0;transform:scale(.4) translateZ(-200px);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
#intro.show-om .omwrap{opacity:1;transform:scale(1) translateZ(0)}
#intro .title{position:absolute;bottom:calc(14% + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;opacity:0;transform:translateY(12px);transition:all 1.1s ease .3s;
  font:400 2.1rem/1.1 "Tiro Devanagari Sanskrit",Georgia,serif;color:#fff6df;letter-spacing:.02em;text-shadow:0 0 30px rgba(244,187,79,.5)}
#intro .title small{display:block;margin-top:8px;font:500 .85rem -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,230,180,.7)}
#intro.show-om .title{opacity:1;transform:none}

/* Bold 3D Om: gold face, layered bronze extrusion, specular sheen, slow turn */
.om3d{position:relative;display:inline-block;font:400 clamp(8rem,42vmin,15rem)/1 "Tiro Devanagari Sanskrit","Noto Serif Devanagari",serif;
  color:#ffd36b;transform-style:preserve-3d;animation:omturn 7s ease-in-out infinite;
  text-shadow:
    0 1px 0 #f0b54a,0 2px 0 #e3a43e,0 3px 0 #d69434,0 4px 0 #c8842b,0 5px 0 #b97423,0 6px 0 #a9651c,0 7px 0 #985716,0 8px 0 #864a11,
    0 10px 6px rgba(0,0,0,.45),0 18px 24px rgba(0,0,0,.45),0 0 60px rgba(255,190,90,.55),0 0 120px rgba(255,150,60,.35)}
.om3d::after{content:attr(data-g);position:absolute;inset:0;color:transparent;pointer-events:none;text-shadow:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.85) 45%,rgba(255,250,230,.2) 52%,transparent 62%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;animation:sheen 4.5s ease-in-out infinite}
@keyframes omturn{0%,100%{transform:rotateY(-14deg) rotateX(6deg)}50%{transform:rotateY(14deg) rotateX(-4deg)}}
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
#gate .om.om3d{background:none;-webkit-background-clip:initial;background-clip:initial;color:#ffd36b;filter:none;font-size:6.6rem}
@media (prefers-reduced-motion:reduce){.om3d,.om3d::after,#intro .wheels i{animation:none}}
/* Planetary atlas replaces the old oversized Om overlay during loading. */
#intro .stage{display:none}#intro{background:#050812;transition:opacity .65s,visibility .65s}
#intro>canvas{opacity:.48}
.atlas-heading{position:absolute;top:7%;left:8%;right:8%;color:#f6ecdd}
.atlas-heading>span,.atlas-foot>span{font:500 10px/1.5 system-ui;letter-spacing:.23em}
.atlas-heading>span{color:#c2ad87}.atlas-heading h2{font:400 clamp(25px,3vw,44px)/1.2 Georgia,serif;margin:15px 0 0}
.planet-atlas{position:absolute;inset:24% 8% 19%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 7%;align-content:center}
.planet-atlas figure{margin:0;min-width:0;animation:planet-arrive 1.4s both;animation-delay:calc(var(--order)*.1s)}
.planet-orb{position:relative;width:min(100%,155px);aspect-ratio:1;margin:auto;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--planet-color) 12%,transparent))}
#intro .planet-orb canvas{position:relative;display:block;width:100%;height:100%}
.planet-orb.texture-unavailable{border-radius:50%;background:radial-gradient(circle at 28% 25%,var(--planet-color),#04050b 85%)}
.saturn-ring{position:absolute;inset:35% -28%;border-radius:50%;border:14px double #d6c09980;transform:rotate(-26deg);pointer-events:none;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}
.planet-atlas figcaption{display:flex;align-items:center;gap:10px;margin:13px auto 0;width:max-content;max-width:100%;color:#e3e5e9}
.planet-index{color:var(--planet-color);font:10px monospace;border-top:1px solid var(--planet-color);padding-top:5px;align-self:start}
.planet-atlas b{font:500 12px/1.4 system-ui;text-transform:uppercase;letter-spacing:.17em}.planet-atlas small{display:block;color:#8d96a8;font:10px/1.7 system-ui;letter-spacing:.02em}
.atlas-foot{position:absolute;bottom:6%;left:8%;right:8%;display:flex;align-items:center;gap:24px;color:#b5a58b}.atlas-foot a{font:10px system-ui;color:#8e97a9;text-decoration:none;margin-left:auto}
.journey-track{height:1px;background:#ffffff20;flex:1;max-width:140px}.journey-track i{display:block;height:100%;background:#c2ad87;animation:journey 10.5s linear both;transform-origin:left}
@keyframes journey{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes planet-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:600px){.atlas-heading{top:9%;left:7%}.atlas-heading>span{font-size:8px}.atlas-heading h2{font-size:25px}.planet-atlas{inset:23% 9% 12%;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px}.planet-orb{width:min(19vw,90px)}.planet-atlas figcaption{margin-top:5px;gap:7px}.planet-atlas b{font-size:10px}.planet-atlas small{font-size:8px}.atlas-foot{bottom:4%;left:7%;right:7%;gap:12px}.atlas-foot>span{font-size:7px}.atlas-foot a{font-size:8px}.journey-track{display:none}.saturn-ring{border-width:8px}}
@media(prefers-reduced-motion:reduce){.planet-atlas figure,.journey-track i{animation:none}#intro{transition:none}}

.journey-track i{animation-duration:7.5s}
/* Galaxy flight: no planetary lineup. */
#intro.galaxy-voyage{background:#030610}
#intro .voyage-earth{position:absolute;inset:auto;opacity:0;transform:scale(.35);transition:opacity 1.5s,transform 2s cubic-bezier(.16,1,.3,1);filter:none}
#intro.earth-arrives .voyage-earth{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){#intro .voyage-earth{transform:none;transition:opacity .2s}}
#intro.galaxy-voyage>canvas:first-child{opacity:1}

/* One continuous outer-solar-system journey, settling on the page's real Earth. */
#intro.galaxy-voyage{transition:background 2s ease,opacity .65s ease,visibility .65s ease}
#intro.galaxy-voyage>canvas:first-child{transition:opacity 2s ease}
#intro.galaxy-voyage.earth-arrives{background:transparent;pointer-events:none}
#intro.galaxy-voyage.earth-arrives>canvas:first-child,#intro.earth-arrives .skip{opacity:0}
.voyage-flyby{position:absolute;left:50%;top:50%;width:min(42vw,46vh,500px);aspect-ratio:1;opacity:0;pointer-events:none;will-change:transform,opacity;isolation:isolate}
#intro .voyage-flyby canvas{position:relative;display:block;inset:auto;width:100%;height:100%;opacity:1}
.flyby-rings{position:absolute;inset:34% -40%;border-radius:50%;border:22px double #c3b48e99;transform:rotate(-24deg);clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);box-shadow:0 0 0 7px #d5c6a644,inset 0 0 0 4px #ad9c7580}
@media(max-width:600px){.voyage-flyby{width:64vw}}
@media(prefers-reduced-motion:reduce){#intro.galaxy-voyage,#intro.galaxy-voyage>canvas:first-child{transition:opacity .2s}.voyage-flyby{display:none}}

/* A single compositor fade for a quiet arrival; no flight setup or partial cut-off. */
#intro.quiet-intro{transition:opacity .25s ease,visibility .25s ease}
#intro.quiet-intro>*{display:none}