/* Cloudy_Day intro splash: brand flash -> watcher in the clouds -> Station. */
html.no-splash #cd-splash{display:none!important}
#cd-splash{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 38%,#0a1418 0%,#05090c 55%,#020305 100%);
  color:#d8ffe8;font-family:"CF Term","VT323",ui-monospace,monospace;
  display:grid;place-items:center;cursor:pointer;
  opacity:1;transition:opacity .55s ease;
  -webkit-tap-highlight-color:transparent;
}
#cd-splash.is-out{opacity:0;pointer-events:none}
#cd-splash canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#cd-splash .sp-clouds-front{z-index:3;mix-blend-mode:screen}
#cd-splash .sp-scan{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mask-image:radial-gradient(90% 80% at 50% 45%,#000 40%,transparent 100%)}
#cd-splash .sp-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(75% 65% at 50% 42%,transparent 40%,rgba(0,0,0,.75) 100%)}

/* Brand flash */
#cd-splash .sp-brand{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  transition:opacity .5s ease,filter .5s ease,transform .7s ease}
#cd-splash .sp-logo{width:min(380px,72vw);height:auto;position:relative}
#cd-splash .sp-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 22px rgba(0,229,255,.45))}
#cd-splash .sp-logo .g{position:absolute;inset:0;background:url("../img/brand-cloud.webp") center/contain no-repeat;opacity:0;mix-blend-mode:screen}
#cd-splash .sp-logo .g1{filter:hue-rotate(-60deg) saturate(3);animation:sp-glitch1 1.1s steps(1) infinite}
#cd-splash .sp-logo .g2{filter:hue-rotate(140deg) saturate(4);animation:sp-glitch2 1.3s steps(1) infinite}
#cd-splash .sp-line{font-size:clamp(1rem,2.6vw,1.35rem);letter-spacing:.18em;color:#3dff8a;text-transform:uppercase;min-height:1.4em;text-shadow:0 0 10px rgba(61,255,138,.6)}
#cd-splash .sp-line .cur{color:#ff3a4a;animation:sp-blink .6s steps(1) infinite}
#cd-splash.phase-figure .sp-brand{opacity:0;filter:blur(8px);transform:scale(1.06) translateY(-2vh)}

/* The watcher */
#cd-splash .sp-figure{position:absolute;left:50%;bottom:-6vh;z-index:2;
  height:min(92vh,1100px);aspect-ratio:400/520;transform:translateX(-50%);
  opacity:0;transition:opacity 1s ease .05s,transform 2.6s ease;pointer-events:none}
#cd-splash.phase-figure .sp-figure{opacity:.86;transform:translateX(-50%) translateY(-1.2vh)}
#cd-splash .sp-figure svg{width:100%;height:100%;overflow:visible}
#cd-splash .sp-eyes{animation:sp-eyes 1.15s ease-in-out infinite}
#cd-splash .sp-eyes .lid{transform-box:fill-box;transform-origin:center;animation:sp-lid 3.2s ease-in-out infinite}
#cd-splash .sp-rim{animation:sp-rim 2.4s ease-in-out infinite}
#cd-splash .sp-tag{position:absolute;z-index:6;left:50%;top:calc(50% + min(14vh,150px));transform:translateX(-50%);
  font-size:clamp(.8rem,1.8vw,1rem);letter-spacing:.32em;color:rgba(216,255,232,.55);text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .6s ease .35s}
#cd-splash.phase-figure .sp-tag{opacity:1}

/* Enter affordance */
#cd-splash .sp-actions{position:absolute;z-index:7;left:50%;bottom:max(1.6rem,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.45rem}
#cd-splash .sp-enter{
  font:inherit;font-size:clamp(1.05rem,2.6vw,1.3rem);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;
  color:#eafff2;background:rgba(6,16,12,.7);border:1px solid rgba(61,255,138,.7);border-radius:999px;
  padding:.55rem 1.4rem .5rem;box-shadow:0 0 0 1px rgba(255,58,74,.25) inset,0 0 24px rgba(61,255,138,.35);
  display:inline-flex;align-items:center;gap:.6rem;backdrop-filter:blur(6px)
}
#cd-splash .sp-enter:hover,#cd-splash .sp-enter:focus-visible{background:rgba(10,32,22,.85);outline:2px solid #3dff8a;outline-offset:3px}
#cd-splash .sp-enter .dot{width:.55rem;height:.55rem;border-radius:50%;background:#ff3a4a;box-shadow:0 0 10px #ff3a4a;animation:sp-eyes 1.15s ease-in-out infinite}
#cd-splash .sp-skip{font:inherit;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(216,255,232,.55);background:none;border:0;cursor:pointer;padding:.2rem .5rem}
#cd-splash .sp-skip:hover,#cd-splash .sp-skip:focus-visible{color:#fff;outline:1px dashed rgba(61,255,138,.6)}
#cd-splash .sp-note{position:absolute;z-index:7;top:max(.8rem,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  font-family:"CF Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(216,255,232,.4);white-space:nowrap}
#cd-splash .sp-bar{position:absolute;z-index:7;left:0;bottom:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#3dff8a,#37e6ff 60%,#ff3a4a);animation:sp-bar var(--sp-dur,3s) linear forwards}

@keyframes sp-blink{50%{opacity:0}}
@keyframes sp-bar{to{transform:scaleX(1)}}
@keyframes sp-eyes{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes sp-lid{0%,46%,54%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
@keyframes sp-rim{0%,100%{opacity:.35}50%{opacity:.6}}
@keyframes sp-glitch1{0%{opacity:0}12%{opacity:.6;transform:translate(-6px,0);clip-path:inset(18% 0 62% 0)}16%{opacity:0}58%{opacity:.5;transform:translate(5px,1px);clip-path:inset(64% 0 22% 0)}63%{opacity:0}}
@keyframes sp-glitch2{0%{opacity:0}30%{opacity:.5;transform:translate(7px,-1px);clip-path:inset(40% 0 44% 0)}34%{opacity:0}80%{opacity:.45;transform:translate(-4px,0);clip-path:inset(8% 0 80% 0)}84%{opacity:0}}

@media (max-width:640px){
  #cd-splash .sp-figure{height:min(78vh,760px);bottom:-4vh}
  #cd-splash .sp-note{font-size:.55rem;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  #cd-splash,#cd-splash *{animation:none!important;transition:none!important}
  #cd-splash .sp-figure{opacity:.85}
  #cd-splash .sp-brand{transform:translateY(-16vh) scale(.8)}
  #cd-splash .sp-tag{opacity:1}
}

/* Sound control (both pages) */
.terrain-tools{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end;align-items:center;pointer-events:auto}
.sfx-ctl{display:inline-flex;align-items:center;gap:.35rem;pointer-events:auto;
  background:rgba(7,8,10,.55);border:1px solid rgba(62,255,138,.28);border-radius:999px;padding:.12rem .55rem .12rem .12rem;backdrop-filter:blur(10px)}
.sfx-ctl .sfx-btn{display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:0;color:var(--ink-soft,#cfd8d3);
  border-radius:999px;padding:.25rem .55rem;cursor:pointer;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-family:inherit}
.station-tools .sfx-ctl .sfx-btn{border:0;background:transparent;backdrop-filter:none}
.sfx-ctl .sfx-btn[aria-pressed="true"]{color:#3dff8a;text-shadow:0 0 8px rgba(61,255,138,.55)}
.sfx-ctl .sfx-btn:focus-visible{outline:2px solid #3dff8a;outline-offset:2px}
.sfx-ctl .sfx-vol{width:4.6rem;accent-color:#3dff8a;cursor:pointer;height:1rem}
.sfx-ctl .sfx-vol:disabled{opacity:.35;cursor:default}
@media (max-width:760px){
  .sfx-ctl .sfx-vol{width:3.4rem}
  .sfx-ctl .sfx-btn{font-size:.68rem;padding:.22rem .45rem}
}
@media (hover:none) and (max-width:760px){ .sfx-ctl .sfx-vol{display:none} .sfx-ctl{padding-right:.12rem} }
@media (max-width:640px){ #cd-splash .sp-tag{letter-spacing:.16em;font-size:.72rem} }