/* ============ HELIOS — osservatorio ============ */

@font-face{
  font-family:'Space Grotesk';
  src:url('vendor/fonts/space-grotesk-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('vendor/fonts/space-grotesk-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('vendor/fonts/space-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('vendor/fonts/space-mono-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg:#000104;
  --ink:#e8f6f7;
  --ink-dim:#8fb4bb;
  --cyan:#7DF9FF;
  --cyan-40:rgba(125,249,255,.4);
  --cyan-18:rgba(125,249,255,.18);
  --solar:#ff7b00;
  --amber:#ffb347;
  --panel:rgba(2,9,13,.68);
  --panel-edge:rgba(125,249,255,.34);
  --danger:#ff5340;
  --disp:'Space Grotesk',sans-serif;
  --mono:'Space Mono',monospace;
  --cut:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%237DF9FF' stroke-width='1.4'%3E%3Cpath d='M14 2v7M14 19v7M2 14h7M19 14h7'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%237DF9FF' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 14 14, crosshair;
  -webkit-font-smoothing:antialiased;
}
a,button,input{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23ffb347' stroke-width='1.6'%3E%3Cpath d='M14 2v7M14 19v7M2 14h7M19 14h7'/%3E%3Ccircle cx='14' cy='14' r='3' stroke='%23ffb347'/%3E%3C/g%3E%3C/svg%3E") 14 14, pointer}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block}

:focus-visible{outline:1.5px solid var(--cyan);outline-offset:2px}

/* ---------- cut-corner panel ---------- */
.panel{
  position:relative;
  background:var(--panel-edge);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  padding:1px;
}
.panel__in{
  background:var(--panel);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:14px 16px;
  height:100%;
}

#hud{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity 1.2s ease .2s}
#hud.is-live{opacity:1}
#hud>*{pointer-events:auto}

/* ---------- brand ---------- */
.brand{position:absolute;top:20px;left:20px;max-width:340px}
.brand__row{display:flex;align-items:center;gap:10px}
.brand__mark{width:30px;height:30px;flex:none}
.brand__name{
  font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:.24em;
  line-height:1;color:var(--ink);
  text-shadow:0 0 18px rgba(125,249,255,.45);
}
.brand__sub{margin-top:7px;font-size:9.5px;letter-spacing:.22em;color:var(--cyan)}
.brand__scale{margin-top:9px;font-size:8.5px;line-height:1.7;letter-spacing:.06em;color:var(--ink-dim)}

/* ---------- toggles ---------- */
.toggles{position:absolute;top:20px;right:20px;display:flex;gap:8px}
.tog{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink-dim);
  background:var(--panel);border:1px solid rgba(125,249,255,.22);
  padding:8px 11px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:color .25s,border-color .25s,background .25s;
}
.tog kbd{font-family:inherit;font-size:8px;color:var(--ink-dim);border:1px solid rgba(143,180,187,.35);padding:1px 3px;border-radius:2px}
.tog__led{width:6px;height:6px;flex:none;background:rgba(143,180,187,.35);box-shadow:none;transition:background .25s,box-shadow .25s}
.tog.is-on{color:var(--cyan);border-color:var(--cyan-40)}
.tog.is-on .tog__led{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.tog:hover{color:var(--ink);border-color:var(--cyan-40)}

/* ---------- planet labels ---------- */
#labels{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:16}
.plabel{
  position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--cyan);
  text-shadow:0 0 3px rgba(0,1,4,.95),0 0 6px rgba(0,1,4,.9),0 1px 10px rgba(0,1,4,.8);
  white-space:nowrap;
  padding-bottom:11px;
  opacity:.82;
  will-change:transform,opacity;
}
.plabel::before{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:8px;
  background:var(--cyan);opacity:.6;
}
.plabel.is-hot{color:var(--amber);opacity:1;text-shadow:0 0 10px rgba(255,179,71,.5)}
.plabel.is-sel{color:var(--ink);opacity:1}

/* ---------- planet card ---------- */
.card{
  position:absolute;top:50%;right:22px;transform:translateY(-50%) translateX(14px);
  width:320px;--cut:16px;
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
.card.is-open{opacity:1;transform:translateY(-50%) translateX(0)}
.card .panel__in{padding:20px 20px 18px;overflow:hidden;position:relative}
.card__scan{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:scan 3.2s linear infinite;opacity:.55;
}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(430px)}}
.card__close{
  position:absolute;top:10px;right:12px;
  background:none;border:none;color:var(--ink-dim);font-size:19px;line-height:1;
  font-family:var(--disp);
  transition:color .2s,transform .2s;
}
.card__close:hover{color:var(--danger);transform:rotate(90deg)}
.card__eyebrow{font-size:8.5px;letter-spacing:.3em;color:var(--amber)}
.card__name{
  font-family:var(--disp);font-weight:700;font-size:37px;letter-spacing:.06em;
  line-height:1.1;margin-top:4px;color:var(--ink);
}
.card__idx{font-size:9px;letter-spacing:.28em;color:var(--cyan);margin-top:2px}
.card__grid{margin-top:15px;border-top:1px solid var(--cyan-18)}
.card__grid .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:6.5px 0;border-bottom:1px solid rgba(125,249,255,.10);
}
.card__grid dt{font-size:8.5px;letter-spacing:.18em;color:var(--ink-dim)}
.card__grid dd{
  font-size:11.5px;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.card__grid dd small{color:var(--ink-dim);font-size:8.5px;letter-spacing:.08em}
.card__bar{margin-top:13px}
.card__barlabel{font-size:8px;letter-spacing:.22em;color:var(--ink-dim)}
.card__bartrack{position:relative;height:5px;margin-top:6px;background:rgba(125,249,255,.10)}
.card__barfill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--amber));
  transition:width .8s cubic-bezier(.22,1,.36,1) .25s;
}
.card__bartick{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink);opacity:.55;left:8.93%}
.card__barval{margin-top:5px;font-size:10px;color:var(--amber);text-align:right;font-variant-numeric:tabular-nums}
.card__fact{
  margin-top:14px;padding:10px 12px;
  font-size:10px;line-height:1.75;color:var(--ink-dim);
  border-left:2px solid var(--solar);
  background:rgba(255,123,0,.05);
}
.card__fact b{color:var(--amber);font-weight:400}

/* ---------- time deck ---------- */
.deck{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(680px,calc(100vw - 44px));--cut:14px;
}
.deck__in{display:grid;grid-template-columns:auto 1fr;gap:4px 26px;align-items:center;padding:12px 20px 10px}
.deck__date{min-width:150px}
.deck__datelabel{font-size:7.5px;letter-spacing:.3em;color:var(--ink-dim)}
.deck__dateval{
  margin-top:3px;font-size:16.5px;letter-spacing:.06em;color:var(--cyan);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 0 12px rgba(125,249,255,.35);
}
.deck__controls{display:flex;align-items:center;gap:16px;justify-content:flex-end;flex-wrap:wrap}
.deck__btns{display:flex;gap:4px}
.spd{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--ink-dim);background:transparent;
  border:1px solid rgba(125,249,255,.22);
  padding:6px 9px;display:flex;align-items:center;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  transition:all .2s;
}
.spd:hover{color:var(--ink);border-color:var(--cyan-40)}
.spd.is-on{color:#02171a;background:var(--cyan);border-color:var(--cyan);text-shadow:none;font-weight:700}
.spd svg{display:block}
.deck__slider{display:flex;align-items:center;gap:10px;flex:1;min-width:170px}
.deck__spdval{font-size:9.5px;color:var(--amber);min-width:64px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:18px;background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:linear-gradient(90deg,var(--cyan-40),var(--solar));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-4.5px;
  background:var(--cyan);border:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 8px var(--cyan);
}
input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--cyan-40),var(--solar))}
input[type=range]::-moz-range-thumb{width:11px;height:11px;background:var(--cyan);border:none;border-radius:0;transform:rotate(45deg)}
.deck__hint{
  grid-column:1 / -1;margin-top:5px;padding-top:7px;
  border-top:1px solid rgba(125,249,255,.10);
  font-size:8px;letter-spacing:.14em;color:var(--ink-dim);text-align:center;
}

/* ---------- signature ---------- */
.sig{position:absolute;left:22px;bottom:18px;font-size:9px;letter-spacing:.14em;color:var(--ink-dim)}
.sig__link{color:var(--ink-dim);text-decoration:none;transition:color .2s}
.sig__link:hover{color:var(--cyan)}
.sig__sep{margin:0 6px;opacity:.5}
.sig__name{color:rgba(143,180,187,.7)}

/* ---------- lens flare ---------- */
#flare{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.flare__streak{
  position:absolute;width:46vw;height:2px;left:0;top:0;
  background:linear-gradient(90deg,transparent,rgba(255,190,120,.55) 42%,rgba(255,235,200,.9) 50%,rgba(255,190,120,.55) 58%,transparent);
  transform:translate(-50%,-50%);
  filter:blur(1px);opacity:0;
  will-change:transform,opacity;
}
.flare__ghost{
  position:absolute;left:0;top:0;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;
  will-change:transform,opacity;
}
#fg1{width:54px;height:54px;background:radial-gradient(circle,rgba(125,249,255,.16),transparent 65%);border:1px solid rgba(125,249,255,.12)}
#fg2{width:22px;height:22px;background:radial-gradient(circle,rgba(255,179,71,.28),transparent 70%)}
#fg3{width:88px;height:88px;background:radial-gradient(circle,transparent 55%,rgba(255,123,0,.10) 62%,transparent 72%)}

/* ---------- boot ---------- */
#boot{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s ease;
}
#boot.is-done{opacity:0;pointer-events:none}
.boot__box{width:300px;text-align:center}
.boot__title{
  font-family:var(--disp);font-weight:700;font-size:42px;letter-spacing:.3em;
  color:var(--ink);text-shadow:0 0 30px rgba(255,123,0,.55);
  animation:bootpulse 2.4s ease-in-out infinite;
}
@keyframes bootpulse{0%,100%{opacity:.85}50%{opacity:1}}
.boot__sub{margin-top:8px;font-size:8.5px;letter-spacing:.42em;color:var(--cyan)}
.boot__bar{margin:26px auto 0;width:220px;height:2px;background:rgba(125,249,255,.12)}
.boot__fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--solar));transition:width .3s ease}
.boot__log{margin-top:12px;font-size:8.5px;letter-spacing:.2em;color:var(--ink-dim);min-height:14px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .brand{max-width:270px}
  .brand__scale{display:none}
  .card{width:288px}
}
@media (max-width:1060px){
  .deck{left:20px;transform:none;width:min(560px,calc(100vw - 360px))}
  .deck__in{grid-template-columns:1fr}
  .deck__controls{justify-content:flex-start}
  .deck__hint{display:none}
  .sig{left:auto;right:22px;bottom:18px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .card,.card__barfill,.tog,.spd{transition:none}
  .card__scan{animation:none;opacity:0}
  .boot__title{animation:none}
  #hud{transition:none}
}

.card__grid dd sup{font-size:7px;vertical-align:super}