/* ===================================================================
   Thou Art That — Landing — LOCKED
   TAT-specific hero rhythm only. Tokens, scrollbar, cursor, button,
   header, footer, menu, cookie banner, waveform-player chrome all
   come from the Marbl design system (marbl-v2.css + canonical
   component CSS) loaded above this file.

   Per PLAN.md (locked 24 April 2026, Phase 1).
   Re-locked 29 April 2026 after canonical chrome re-vendor sweep
   (menu/site-header/site-footer/marbl-v2/button/cookie-consent/
   waveform-player CSS resync vs marbl-codes canonical) and burger
   left-column nav trim to "The piece" + "Source" only. Do not modify
   landing.html or landing.css without explicit Richard sign-off.

   Additions on top of lock (29 Apr 2026, sign-off Richard):
   - View Transitions API: subtle cross-fade with scale on every
     same-origin TAT navigation (see "Page transition" block below).
   =================================================================== */

/* Page transition (View Transitions API) — landing surface only.
   Pairs with the matching opt-in injected into the origin-story page
   by build.mjs. All other TAT routes do NOT opt in, so navigation
   between them stays instant per Richard's call 29 Apr 2026.

   Stronger settings than the first pass: 3% scale, 500/650ms,
   so the transition is felt rather than guessed at. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: marbl-page-fade-out 500ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

::view-transition-new(root) {
  animation: marbl-page-fade-in 650ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes marbl-page-fade-out {
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes marbl-page-fade-in {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms;
  }
}

/* Audio fallback delayed-reveal now lives in canonical
   waveform-player.css (promoted from TAT-local 29 Apr 2026). */

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marbl-ember, #F35226);
  color: var(--marbl-charcoal, #131112);
  padding: var(--space-3, 12px) var(--space-5, 20px);
  text-decoration: none;
  border-radius: 0 0 var(--radius, 10px) 0;
  font-family: var(--marbl-font-body, 'Inter', sans-serif);
  font-weight: var(--font-semibold, 600);
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--marbl-white, #fff);
  outline-offset: 2px;
}

/* Page-level layout: header / main / footer flex column so the hero
   centres vertically when the viewport is taller than the content. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* When the burger menu opens, .site-header gets .menu-is-open and goes
   position:fixed (canonical pin behaviour, see site-header.md §4). That
   removes ~90px of flow space and the centred hero jumps up. Hold the
   space here while the menu is open. */
body:has(.site-header.menu-is-open) {
  padding-top: 90px;
}

.tat-landing-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-lg, 60px) var(--gap-md, 40px) var(--gap-xl, 80px);
}

/* Hero */
.tat-hero {
  max-width: 720px;
  width: 100%;
  text-align: center;
}

.tat-hero__eyebrow {
  font-size: var(--text-xs, 11px);
  font-weight: var(--font-semibold, 600);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--marbl-ember, #F35226);
  line-height: 1;
  margin: 0 0 var(--gap-sm, 20px);
}

.tat-hero__title {
  font-family: var(--marbl-font-display, 'Urbanist', sans-serif);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: var(--font-extrabold, 800);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-6, 24px);
  color: var(--marbl-white, #ffffff);
}

.tat-hero__title-accent {
  font-family: var(--marbl-font-accent, 'Petrona', Georgia, serif);
  font-style: italic;
  font-weight: 700;
  color: var(--marbl-ember, #F35226);
}

.tat-hero__strapline {
  font-family: var(--marbl-font-body, 'Inter', sans-serif);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--marbl-white-70, rgba(255, 255, 255, 0.7));
  margin: 0 auto var(--gap-md, 40px);
  max-width: 540px;
}

/* Audio wrapper — narrows the canonical waveform-player to hero proportions. */
.tat-hero__audio {
  margin: 0 auto var(--gap-md, 40px);
  max-width: 560px;
  text-align: left;
}

/* CTA: layout only — geometry/colour/hover come from .btn .btn--fill-up
   in vendor/ui-items/button.css. Do NOT redeclare button styles. */
.tat-hero__cta {
  margin: 0 auto var(--gap-md, 40px);
}

.tat-hero__byline {
  font-family: var(--marbl-font-body, 'Inter', sans-serif);
  font-size: var(--text-sm, 13px);
  line-height: 1.6;
  color: var(--marbl-white-50, rgba(255, 255, 255, 0.5));
  margin: 0 auto;
  max-width: 480px;
}

.tat-hero__byline strong {
  font-weight: var(--font-semibold, 600);
  color: var(--marbl-white-70, rgba(255, 255, 255, 0.7));
}

.tat-hero__byline-link {
  color: var(--marbl-white-70, rgba(255, 255, 255, 0.7));
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.15);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.tat-hero__byline-link:hover,
.tat-hero__byline-link:focus-visible {
  color: var(--marbl-ember, #F35226);
  text-decoration-color: var(--marbl-ember, #F35226);
  outline: none;
}

/* Static logo (Phase 1 — no GSAP-driven hover stinger).
   Matches the canonical animated logo dimensions from MarblLogo.config: 40x24. */
.marbl-logo-static {
  display: block;
  width: 40px;
  height: 24px;
  fill: var(--marbl-ember, #F35226);
}

@media (prefers-reduced-motion: reduce) {
  .tat-hero__byline-link {
    transition: none;
  }
}