/* ---------------------------------------------------------------------------
   "How to Catch a Breeze in an Astro Van and the Love of a Father"
   Landing surface theme. EVERY rule is scoped beneath the surface selector —
   a rule outside it is a bug (DESIGN_SYSTEM.md §11).

   Tier 1 — token overrides: redeclaring the runtime channel tokens re-skins the
   reused global color utilities (bg-action, text-brand, bg-surface-1, …) to the
   film's palette automatically. Values transcribed from
   HOW-TO-CATCH-A-BREEZE-BRANDING-DESIGN-SYSTEM.md §6.5.
   Tier 2 — scoped free-form CSS: hero gradient, title lockup, grain, play ring.
--------------------------------------------------------------------------- */

[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] {
  /* semantic accents — amber identity, clay commerce, denim media */
  --brand: 214 160 90; /* #D6A05A headlamp amber */
  --brand-ink: 226 180 111; /* #E2B46F */
  --action: 212 87 69; /* #D45745 taillight clay */
  --action-hover: 227 106 86; /* #E36A56 */
  --media: 123 139 153; /* #7B8B99 faded denim */
  --on-neon: 14 11 8; /* #0E0B08 dashboard ink */

  /* feedback */
  --success: 139 163 123; /* #8BA37B */
  --warning: 216 168 92; /* #D8A85C */
  --danger: 217 111 100; /* #D96F64 */
  --info: 127 160 179; /* #7FA0B3 */

  /* dark road neutrals */
  --bg: 11 13 13; /* #0B0D0D road black */
  --surface-0: 17 20 20; /* #111414 night shoulder */
  --surface-1: 23 27 27; /* #171B1B dashboard charcoal */
  --surface-2: 32 36 36; /* #202424 asphalt */
  --surface-3: 42 46 45; /* #2A2E2D worn steel */
  --border: 52 55 53; /* #343735 seam line */
  --border-strong: 87 86 79; /* #57564F weathered metal */
  --text-primary: 240 228 210; /* #F0E4D2 headliner bone */
  --text-secondary: 183 170 151; /* #B7AA97 service paper */
  --text-muted: 143 133 120; /* #8F8578 faded note */

  /* surface-local font aliases (see the font note below) */
  --font-display: var(--font-bitter), Georgia, serif;
  --font-sans: var(--font-source-sans), system-ui, sans-serif;
  --font-mono: var(--font-ibm-plex-mono), ui-monospace, monospace;

  background-color: rgb(var(--bg));
  color: rgb(var(--text-primary));
  font-family: var(--font-sans);
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

/* Typography is applied by element, not via Tailwind's font-* utilities: the
   global `@theme inline` compiled those to reference --font-space-grotesk
   directly, so overriding --font-display alone would not retype them. */
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] :is(h1, h2, h3, .lockup) {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .mono {
  font-family: var(--font-mono);
}

/* Restrained radii (branding §4.5) — override the 14px global card utility. */
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .rounded-card {
  border-radius: 4px;
}

/* Hero — full-bleed art behind a left+bottom darkening wash so left copy stays
   legible over the frame (branding §9.2, wireframe .hero-art::after). */
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .breeze-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(11, 13, 13, 0.99) 0%,
      rgba(11, 13, 13, 0.94) 27%,
      rgba(11, 13, 13, 0.65) 48%,
      rgba(11, 13, 13, 0.12) 75%
    ),
    linear-gradient(
      0deg,
      rgb(11, 13, 13) 0%,
      transparent 24%,
      rgba(11, 13, 13, 0.08) 80%,
      rgba(11, 13, 13, 0.72) 100%
    );
}

/* Title lockup — stacked, tight leading; BREEZE is the anchor (branding §8.1). */
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .lockup {
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.035em;
  font-weight: 800;
}
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .lockup .l-small {
  display: block;
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  font-weight: 700;
}
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .lockup .l-breeze {
  display: block;
  font-size: clamp(3.6rem, 8.4vw, 8.4rem);
}
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .lockup .l-astro {
  display: block;
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
}
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .lockup .l-father {
  display: block;
  margin-top: 0.35em;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  color: rgb(var(--brand));
}

/* Decorative CSS play triangle for poster/secondary buttons. */
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] .play-tri {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

/* Very low-opacity grain across the surface (branding §4.1). Never over art copy. */
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: radial-gradient(rgb(240, 228, 210) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}
[data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme-id="how-to-catch-a-breeze--premiere"][data-surface="landing"] * {
    animation: none !important;
    transition: none !important;
  }
}