/* Home: the Dreamers universe. Space stays here only. */
body.home{background:#06050b;color:#fff}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nebula{position:fixed;inset:-6% -3%;z-index:0;pointer-events:none;overflow:hidden}
.nebula i{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 4s ease;animation:drift 48s ease-in-out infinite alternate}
.nebula i.on{opacity:1}
.nebula i:not(.on):not(.out){animation-play-state:paused}
.nebula i:nth-child(2){animation-direction:alternate-reverse}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,1%)}}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 35%,rgba(6,5,11,.1),rgba(6,5,11,.7))}
.home main,.home .top,.home footer{position:relative;z-index:2}
.home .top{position:sticky}

.hero{min-height:calc(100svh - 68px);display:grid;place-items:center;text-align:center;padding:clamp(16px,3vw,40px) 0 clamp(40px,6vw,72px)}
.hero-in{display:grid;justify-items:center}
.mark{position:relative;width:min(640px,88vw);aspect-ratio:640/403;cursor:grab;touch-action:pan-y}
.mark::before{content:"";position:absolute;inset:-14% -8%;background:radial-gradient(50% 50% at 50% 50%,rgba(139,92,246,.38),transparent 70%);pointer-events:none}
.mark img,.mark canvas{position:absolute;inset:0;width:100%;height:100%}
.mark canvas{opacity:0;transition:opacity .8s}
.mark.spin canvas{opacity:1}.mark.spin img{opacity:0}
.hero .eyebrow{margin-top:clamp(8px,2vw,20px);color:var(--lav)}
.hero h1{font-size:clamp(40px,7vw,92px);text-transform:uppercase;letter-spacing:-.035em;line-height:.95;margin-top:14px;width:fit-content;
  background:linear-gradient(105deg,#fff 0%,#fff 44%,#d9c8ff 47%,#a77bff 50%,#d9c8ff 53%,#fff 56%,#fff 100%) 100% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4.2s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}24%,100%{background-position:0% 0}}
.hero .lede{max-width:560px;color:#d6d3e6;font-size:clamp(17px,1.6vw,19px);margin:18px auto 26px}
.hero .ctas{justify-content:center}

/* three doors: one 3D symbol per section, named the same */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.door{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 18px;padding:18px 22px 18px 14px;border-radius:20px;text-decoration:none;color:#fff;background:rgba(14,12,26,.62);border:1px solid rgba(255,255,255,.12);transition:border-color .25s,transform .25s,background .25s}
.door:hover{border-color:var(--lav);transform:translateY(-3px);background:rgba(24,18,46,.75)}
.door .ico{width:clamp(88px,9vw,118px);grid-row:span 2}
.door h2{font-size:clamp(24px,2.4vw,32px);text-transform:uppercase;letter-spacing:-.02em;align-self:end}
.door p{color:var(--mute-d);font-size:15px;align-self:start}
.door p b{color:#fff;font-weight:600}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door .ico{width:92px}}

.nownext{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px);margin-top:clamp(12px,2vw,20px)}
.nn{display:grid;gap:6px;padding:20px 22px;border-radius:20px;text-decoration:none;background:#fff;color:var(--ink)}
.nn .k{justify-self:start;font:700 11px/1 var(--h);letter-spacing:.14em;text-transform:uppercase;background:var(--soft);padding:7px 10px;border-radius:999px;color:var(--mute)}
.nn .k.now{background:var(--purple);color:#fff}
.nn b{font:800 20px/1.15 var(--h)}
.nn span:last-child{color:var(--mute);font-size:15px}
.nn:hover b{color:var(--purple)}
@media (max-width:860px){.nownext{grid-template-columns:1fr}}

.creed{padding:clamp(72px,11vw,150px) 0;text-align:center}
.creed p{font:700 clamp(20px,2.4vw,30px)/1.3 var(--h);color:#d6d3e6;letter-spacing:-.01em}
.creed h2{font-size:clamp(48px,9vw,128px);text-transform:uppercase;letter-spacing:-.045em;line-height:.9;margin-top:22px}
.creed h2 span{color:var(--lav)}
.home .join-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:clamp(24px,4vw,48px)}
.home footer{background:#000}
.hero-script{width:min(420px,70vw);height:auto;margin-top:clamp(-4px,-.5vw,0px);filter:drop-shadow(0 4px 24px rgba(139,92,246,.45))}
.creed-script{display:block;width:min(560px,78vw);height:auto;margin:0 auto -.08em;filter:drop-shadow(0 4px 24px rgba(139,92,246,.45))}
.hero .eyebrow{margin-top:clamp(14px,2.4vw,28px)}
/* the big D is the logo up here; the small script in the bar only shows once you scroll past it */
.home .top .brand{opacity:0;pointer-events:none;transition:opacity .3s}
.home .top.past .brand{opacity:1;pointer-events:auto}
/* planets orbit the D, each one goes to its page */
.uni{position:relative;width:min(860px,100%);aspect-ratio:1/.6;display:grid;place-items:center;touch-action:pan-y}
.uni .mark{width:min(560px,66%)}
.planet{position:absolute;left:0;top:0;width:var(--pw,120px);display:grid;justify-items:center;gap:6px;text-decoration:none;color:#fff;will-change:transform}
.planet .pl{display:block;width:100%;background-position:0 0;background-size:800% 600%;background-repeat:no-repeat;filter:drop-shadow(0 0 18px rgba(139,92,246,.4));transition:filter .3s}
.planet span{font:700 12px/1 var(--h);letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:rgba(10,8,20,.6);border:1px solid rgba(255,255,255,.18);white-space:nowrap}
.planet:hover .pl,.planet:focus-visible .pl{filter:drop-shadow(0 0 28px rgba(203,184,255,.85))}
.planet:hover span{border-color:var(--lav)}
@media (max-width:640px){.uni{aspect-ratio:1/.85}.uni .mark{width:74%}}
/* doors: purple glass with a chrome edge */
.door{background:linear-gradient(140deg,rgba(76,40,170,.55),rgba(18,12,40,.75) 55%,rgba(46,22,110,.6)) padding-box,linear-gradient(135deg,#efe8ff,#8b5cf6 35%,#2a1760 60%,#cbb8ff) border-box;border:1.5px solid transparent;box-shadow:0 10px 40px rgba(91,47,224,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.door:hover{background:linear-gradient(140deg,rgba(98,56,210,.7),rgba(24,16,52,.8) 55%,rgba(60,30,140,.7)) padding-box,linear-gradient(135deg,#fff,#a77bff 35%,#3a2380 60%,#e6dcff) border-box;box-shadow:0 14px 50px rgba(139,92,246,.4),inset 0 1px 0 rgba(255,255,255,.25)}
@media (max-width:760px){.home .top .brand{display:none}}
.planet span{margin-top:-14%}
.uni .mark{z-index:30}
.nownext{grid-template-columns:repeat(2,1fr)}@media (max-width:860px){.nownext{grid-template-columns:1fr}}