/* =====================================================================
   COMPONENT: PAUSE HERO (homepage opening screen)
   =====================================================================
   Loaded only by index.html, after the shared styles.css. Self-contained
   on purpose — nothing here is reused by another page, so nothing here
   needs to live in the shared stylesheet.

   Design rule for this component: the pause mark's own baked-in blue
   glow is the ONLY light source on the page. No drop-shadow, no
   box-shadow, no gradients, no extra glow layers — just the image, flat
   dark shading for depth, and the sampled accent used solely for
   hairline details (the divider below, and the homepage-only nav
   softening at the bottom of this file).
   ===================================================================== */

/* Sampled directly from the mark's own pause-bar glow (pause-logo.png's
   brightest pixel), not invented. Scoped to this component, not the
   shared --accent, so it never leaks into any other page's colour. */
:root {
  --pause-accent: #0159ff;
}

.pause-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100svh - 76px);
  padding-block: 48px;
  background: #0a0a0a;
  overflow: hidden;
}

.pause-hero__mark {
  display: block;
  opacity: 0;
  /* Fade/scale in once, then hand off to the infinite breathing loop —
     the delay on pause-breathe is timed to start exactly as pause-in
     finishes, so there's no dead gap or visible hand-off jolt. */
  animation: pause-in 0.9s var(--ease-out) forwards,
             pause-breathe 7s ease-in-out 0.9s infinite;
}

@keyframes pause-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Barely-there float: a real breathing motion, not a bounce. Scale and
   lift are both tiny on purpose — anything bigger reads as an eager
   hover animation, not something quietly alive. */
@keyframes pause-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.012); }
}

.pause-hero__wordmark,
.pause-hero__divider,
.pause-hero__line {
  opacity: 0;
  animation: pause-fade-up 0.6s var(--ease-out) forwards;
}
.pause-hero__wordmark { animation-delay: 0.5s; }
.pause-hero__divider  { animation-delay: 0.65s; }
.pause-hero__line     { animation-delay: 0.75s; }

@keyframes pause-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pause-hero__mark,
  .pause-hero__wordmark,
  .pause-hero__divider,
  .pause-hero__line {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.pause-hero__logo {
  display: block;
  height: clamp(320px, 60vh, 760px);
  width: auto;
  margin-inline: auto;
}

.pause-hero__wordmark {
  margin: 0;
  margin-top: clamp(28px, 4vh, 44px);
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text);
  /* Optically centred: the letter-spacing above adds a full tracking
     unit of empty space after the last letter that text-align:center
     doesn't account for, reading as visibly off-centre otherwise. */
  padding-left: 0.42em;
}

/* The one hairline divider this component allows itself, in the
   sampled accent — nothing else on this screen gets colour. */
.pause-hero__divider {
  width: 32px;
  height: 1px;
  margin: clamp(16px, 2.2vh, 22px) auto;
  background: var(--pause-accent);
  opacity: 0.5;
  border: none;
}

.pause-hero__line {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .pause-hero { padding-block: 96px 64px; }
  .pause-hero__logo { height: clamp(220px, 42vh, 420px); }
  .pause-hero__wordmark { letter-spacing: 0.3em; }
}

/* Homepage-only nav softening: a solid CTA button reads as fighting the
   mark on this one screen (every other page keeps the button as-is —
   this rule can't reach them, scoped under body.is-home which only
   index.html sets). Same link, just styled like its plain-text
   siblings instead of a filled pill. */
body.is-home .nav__cta {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  padding: 8px 14px;
}
body.is-home .nav__cta:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}