/* ────────────────────────────────────────────────────────────────
   SPLASH — the front door.

   Loads after styles.css and only adds what styles.css doesn't
   already have: the full-bleed canvas backdrop, the centred overlay,
   and the About/Terms tabs. Palette, .panel, inputs, and buttons are
   all inherited from styles.css unchanged, so the splash and the
   instrument it leads to never look like two different sites.
   ──────────────────────────────────────────────────────────────── */

body.splash{
  display:block; padding:0; min-height:100vh; overflow-x:hidden;
}

#splash-canvas-host{
  position:fixed; inset:0; z-index:0; background:var(--void);
}
#splash-canvas-host canvas{ display:block; width:100%; height:100%; }

/* A plain gradient stands in for the visualiser when three.js can't
   be fetched, or under prefers-reduced-motion where stillness is the
   point — either way the door still opens. */
#splash-canvas-host.unavailable{
  background:radial-gradient(ellipse at 50% 40%, rgba(201,164,92,.14), var(--void) 70%);
}

.splash-overlay{
  position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:32px 16px 90px;
}

/* The first thing a visitor sees is the visualiser and this one
   button — no box in the way at all — so the weave gets a proper
   look before anything asks for an email address. */
.splash-enter-btn{
  padding:12px 34px; font-size:13px; letter-spacing:.22em;
  animation:splash-enter-in .8s ease-out both;
}
@keyframes splash-enter-in{ from{ opacity:0; transform:translateY(6px); } }

/* styles.css's .panel is a near-opaque, heavily blurred card — right
   for a page of instrument controls, wrong here, where the whole
   point is to still see the orrery weaving behind it. Lighter and
   smaller, so the sign-in box reads as an overlay on the visualiser
   rather than a wall in front of it. */
.splash-overlay .panel{
  max-width:460px; padding:18px 20px;
  background:rgba(12,9,6,.4);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:splash-enter-in .5s ease-out both;
}
@media (prefers-reduced-motion: reduce){
  .splash-enter-btn, .splash-overlay .panel{ animation:none; }
}
}

.splash-title{
  text-align:center;
}
.splash-title h1{
  font-family:'IM Fell English SC',serif; font-weight:400;
  font-size:clamp(28px,7vw,52px); letter-spacing:.14em; color:var(--brass);
  /* The old shadow was a soft brass-toned glow — the same hue as the
     letters themselves, and the same hue the sun happens to weave
     behind, so it added no edge at all right when one was needed
     most. A tight dark outline (four 1px offsets) plus a small drop
     shadow gives the letters a crisp edge against anything behind
     them, sun included, without reading as a heavy effect. */
  text-shadow:
    -1px -1px 1px rgba(12,9,6,.9),
     1px -1px 1px rgba(12,9,6,.9),
    -1px  1px 1px rgba(12,9,6,.9),
     1px  1px 1px rgba(12,9,6,.9),
     0 3px 6px rgba(12,9,6,.6);
}
.splash-title .sub{
  font-style:italic; font-size:12px; letter-spacing:.22em; color:var(--dim); margin-top:10px;
}

.splash-form-row{ display:flex; gap:10px; flex-wrap:wrap; }
.splash-form-row input[type=email]{ flex:1; min-width:220px; }

#splash-status{
  min-height:1.4em; font-size:12px; letter-spacing:.02em; color:var(--verdigris);
  margin-top:10px;
}
#splash-status.err{ color:var(--oxblood); }

.splash-tabs{
  display:flex; gap:18px; margin-top:4px;
}
.splash-tabs button{
  background:none; border:none; padding:2px 0; letter-spacing:.16em;
  color:var(--dim); text-decoration:underline; text-underline-offset:3px;
}
.splash-tabs button:hover{ color:var(--candle); border-color:transparent; }
.splash-tabs button[aria-pressed=true]{ color:var(--candle); }

.splash-tab-panel{
  display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.75; color:var(--parch); max-height:38vh; overflow-y:auto;
}
.splash-tab-panel.show{ display:block; }
.splash-tab-panel p{ margin-bottom:10px; }
.splash-tab-panel p:last-child{ margin-bottom:0; }

@media (prefers-reduced-motion: reduce){
  #splash-canvas-host{ background:radial-gradient(ellipse at 50% 40%, rgba(201,164,92,.12), var(--void) 70%); }
}