/* ---------- intro: sunrise split ---------- */
.gate{position:fixed;inset:0;z-index:100;pointer-events:auto;color:#EAF0F5}
.gate .half{position:absolute;left:0;right:0;height:50%;background:#060B10;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.gate .top{top:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.gate .bot{bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding-top:26px}
.gate .gsun{width:150px;height:75px;border-radius:150px 150px 0 0;background:radial-gradient(circle at 50% 100%,#9AA8FF,#7186FF 60%,#4D5FE0);transform:translateY(100%);transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .25s;box-shadow:0 0 80px 10px rgba(113,134,255,.35)}
.gate .gline{position:absolute;left:50%;top:50%;height:2px;width:0;background:#EAF0F5;transform:translate(-50%,-50%);transition:width .8s cubic-bezier(.7,0,.2,1),opacity .4s;z-index:2}
.gate .word{font:700 clamp(28px,5vw,44px)/1 var(--display);letter-spacing:-.03em;opacity:0;transform:translateY(-8px);transition:opacity .6s .9s,transform .6s .9s}
.gate .scan{font-size:13px;color:#8D9DAC;height:18px;opacity:0;transition:opacity .4s 1.1s;font-variant-numeric:tabular-nums}
.gate .scan b{color:#EAF0F5;font-weight:600}
.gate .skip{position:absolute;right:20px;bottom:20px;background:none;border:0;color:#8D9DAC;font-size:13px;padding:8px;z-index:3}
.gate .skip:hover{color:#EAF0F5}
.gate.go .gline{width:100vw}
.gate.go .gsun{transform:none}
.gate.go .word{opacity:1;transform:none}
.gate.go .scan{opacity:1}
.gate.open .top{transform:translateY(-100%)}
.gate.open .bot{transform:translateY(100%)}
.gate.open .gline{opacity:0}
.gate.open .skip{opacity:0}
.gate.open{pointer-events:none}

/* ---------- hero horizon backdrop ---------- */
.hero{position:relative;isolation:isolate}
.horizon{position:absolute;inset:-40px -200px auto;height:120%;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 75%)}
.horizon svg{width:100%;height:100%}
.horizon .hl{animation:drift 9s linear infinite}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-48px)}}
.field.tilt{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}

/* ---------- scroll cue ---------- */
.cue{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:13px;margin:-8px 0 28px}
.cue i{width:22px;height:34px;border:1.5px solid var(--ink2);border-radius:12px;position:relative}
.cue i:after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--ink2);transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* ---------- floating pick widget ---------- */
.pick{position:fixed;right:20px;bottom:20px;z-index:40;width:270px;background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);transform:translateY(20px);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
.pick.show{transform:none;opacity:1}
.pick .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pick .ph b{font:700 14px var(--display);display:flex;align-items:center;gap:8px}
.pick .ph button{background:none;border:0;color:var(--ink2);width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.pick .ph button:hover{background:var(--fog)}
.pick .scan-l{font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:8px;height:18px}
.pick .scan-l:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cobalt);animation:pulse 1.4s infinite}
.pick .pb{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border-radius:12px;background:var(--fog);transition:opacity .3s}
.pick .pb.fade{opacity:.25}
.pick .pb .grow{flex:1;min-width:0}
.pick .pb b{display:block;font-weight:600}
.pick .pb small{color:var(--ink2);font-size:12px}
.pick .why{font-size:12px;color:var(--ink2);margin:8px 2px 0}
.pick.min .pbody{display:none}
.pick.min{width:auto}
.pick.min .ph{margin:0}
@media (max-width:600px){.pick{left:12px;right:12px;bottom:12px;width:auto}.pick.min{left:auto}}
@media (prefers-reduced-motion:reduce){.gate{display:none}.horizon .hl{animation:none}}