/* ─────────────────────────────────────────────────────────────
   WABU — pre-show slate / coming soon
   Concept: the page is a broadcast holding card. Off air now,
   on air soon.
   ───────────────────────────────────────────────────────────── */

/* Animatable gradient stops — @property makes color interpolation possible */
@property --bg-top  { syntax:'<color>'; inherits:false; initial-value:#143A43 }
@property --bg-mid  { syntax:'<color>'; inherits:false; initial-value:#0E2A31 }
@property --bg-deep { syntax:'<color>'; inherits:false; initial-value:#08191E }

:root{
  --slate:      #0E2A31;   /* studio backdrop, deep Miami teal */
  --slate-deep: #08191E;   /* vignette / inset panels */
  --bone:       #F2EDE3;   /* warm paper — primary type */
  --muted:      #7FA0A6;   /* teal-grey — labels, secondary */
  --sun:        #FFB55C;   /* Miami amber — hairline accents */
  --tally:      #FF3B2F;   /* on-air red — tally light only */

  --rule: color-mix(in srgb, var(--bone) 16%, transparent);

  /* If the WABU logo is dark ink, it will disappear on this
     backdrop. Swap in the commented value to force it white. */
  --logo-treatment: none;
  /* --logo-treatment: brightness(0) invert(1); */

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --utility: 'DM Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html,body{ height:100% }

body{
  --bg-top:#143A43; --bg-mid:var(--slate); --bg-deep:var(--slate-deep);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--bg-top) 0%, var(--bg-mid) 42%, var(--bg-deep) 100%);
  animation:backdrop-drift 72s linear infinite;
  color:var(--bone);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,48px);
  overflow-x:hidden;
}

/* Ambient backdrop cycle: teal → navy → charcoal → forest → teal */
@keyframes backdrop-drift{
  0%,100%{ --bg-top:#143A43; --bg-mid:#0E2A31; --bg-deep:#08191E }
  25%    { --bg-top:#173154; --bg-mid:#0D1E38; --bg-deep:#060D1C }
  50%    { --bg-top:#2A2A2E; --bg-mid:#1A1A1D; --bg-deep:#0C0C0E }
  75%    { --bg-top:#1A3D2C; --bg-mid:#0F2A1E; --bg-deep:#061510 }
}

@media (prefers-reduced-motion:reduce){
  body{ animation:none }
}

/* Ambient scanlines — very low contrast, pure atmosphere */
body::after{
  content:"";
  position:fixed; inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  pointer-events:none;
  mix-blend-mode:overlay;
}

/* ── Slate ─────────────────────────────────────────────────── */

.slate{
  position:relative;
  width:100%;
  max-width:980px;
  padding:clamp(20px,3.4vw,34px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(36px,7vw,72px);
  min-height:min(680px,86vh);
  transition:box-shadow .5s ease;
  animation:slate-in .8s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes slate-in{
  from{ opacity:0; transform:translateY(10px) scale(.994) }
  to  { opacity:1; transform:none }
}

/* ── Center block ──────────────────────────────────────────── */

.center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(18px,2.6vw,26px); max-width:100% }

.logo{
  height:clamp(30px,4.4vw,40px);
  width:auto;
  filter:var(--logo-treatment);
  animation:rise .7s .12s cubic-bezier(.2,.7,.3,1) both;
}

h1{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(2rem,8.4vw,5.4rem);
  line-height:.92;
  letter-spacing:-.028em;
  white-space:nowrap;
  animation:rise .7s .2s cubic-bezier(.2,.7,.3,1) both;
}
h1 em{
  font-style:normal;
  font-variation-settings:'wdth' 118,'wght' 400;
  color:var(--muted);
  display:block;
}

.sub{
  font-size:clamp(1rem,1.6vw,1.125rem);
  line-height:1.55;
  color:color-mix(in srgb, var(--bone) 76%, transparent);
  max-width:31em;
  animation:rise .7s .3s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width:640px){
  .slate{ min-height:0; gap:44px }
}