/* =========================================================================
   Cinematic polish layer (15 Sept 2026) — small, static touches on top of
   the design system. Loads last on the public layout. Everything here is
   additive: remove this file and the site is exactly as before.
   ========================================================================= */

/* ---- 1. Film grain over the whole page ----
   A fixed noise veil at very low opacity gives the black some tooth, like
   a print rather than a flat screen. Pure CSS (SVG turbulence), no image. */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.9  0 0 0 0 0.7  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
@media (max-width: 720px) {
  /* Blend-mode veils are the one thing phones scroll badly with. */
  body::before { display: none; }
}

/* ---- 2. Vignette on heroes and the story hero ---- */
.hero-split::after,
.hero-band::after,
.hero-triptych::after,
.hero-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.hero-split .hero-copy,
.hero-band .hero-copy,
.hero-triptych .hero-copy,
.hero-story .hero-copy { z-index: 2; }

/* ---- 3. Gold-leaf gradient on the emphasised words of every hero ---- */
.t-hero em,
.cta-band em,
.t-display em {
  background: linear-gradient(100deg, #C9A24A 0%, #F2D27C 35%, #E0A93C 60%, #B88A2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- 4. Gold dust behind section titles ----
   A soft glow plus a sparse dot field that fades out at the edges. Applied
   through a wrapper (.section-head, .block-head) or the title's own ::after
   where the title is bare (.rule-title keeps its ::before/::after hairlines,
   so it gets the dust from a wrapping element instead). */
.section-head,
.block-head { position: relative; isolation: isolate; }
.section-head::before,
.block-head::before,
.dust::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, 90%);
  height: 170px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(242, 210, 124, 0.7) 0.7px, transparent 1.3px) 3px 5px / 37px 41px,
    radial-gradient(circle, rgba(224, 169, 60, 0.5) 0.9px, transparent 1.5px) 19px 23px / 53px 47px,
    radial-gradient(circle, rgba(255, 236, 190, 0.55) 0.5px, transparent 1px) 29px 11px / 67px 59px,
    radial-gradient(60% 60% at 50% 50%, rgba(224, 169, 60, 0.10), transparent 70%);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 100%);
          mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 100%);
  opacity: 0.6;
}
.dust { position: relative; isolation: isolate; }

/* ---- 5. Poster cards: lift + light sweep on hover ---- */
.story-card { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color var(--t) var(--ease); }
.story-card:not(.is-locked):hover {
  transform: translateY(-6px);
  border-color: rgba(224, 169, 60, 0.45);
  box-shadow:
    0 24px 48px -18px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(224, 169, 60, 0.12),
    0 12px 40px -12px rgba(224, 169, 60, 0.25);
}
.story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, 0.22) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-out);
}
.story-card:hover .story-media::after { transform: translateX(130%); }
.story-card .story-media img { transition: transform 0.9s var(--ease-out); }
/* Locked slots: a slow diagonal sheen so they read as reserved, not dead. */
.story-card.is-locked {
  background:
    linear-gradient(135deg, transparent 40%, rgba(224, 169, 60, 0.05) 50%, transparent 60%),
    radial-gradient(120% 85% at 50% 0%, var(--accent-soft), transparent 62%),
    var(--panel);
}

/* ---- 6. Buttons: gold keyline + lit primary ---- */
.btn-primary {
  background: linear-gradient(180deg, #F5D67F 0%, var(--gold) 55%, #C99A36 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 10px rgba(224, 169, 60, 0.14);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #FFE39A 0%, var(--gold-bright) 55%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 30px rgba(224, 169, 60, 0.36);
}
.btn-outline { border-width: 1px; box-shadow: inset 0 0 0 0 transparent; }
.btn-outline:hover { box-shadow: 0 0 22px -6px var(--accent-glow); }

/* ---- 7. Hairlines that fade at the ends (nav, footer, panels) ---- */
.nav { border-bottom-color: transparent; }
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 169, 60, 0.35) 30%, rgba(224, 169, 60, 0.35) 70%, transparent);
  pointer-events: none;
}
.footer {
  border-top-color: transparent;
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 169, 60, 0.45) 30%, rgba(224, 169, 60, 0.45) 70%, transparent);
}
.cta-band {
  position: relative;
  background:
    radial-gradient(120% 120% at 0% 50%, rgba(224, 169, 60, 0.08), transparent 55%),
    var(--panel);
}

/* ---- 8. Eyebrows and labels: a touch more air ---- */
.t-eyebrow { letter-spacing: 0.22em; }
.block-title { letter-spacing: 0.12em; }

/* ---- 9. Inputs: hairline focus glow in gold ---- */
.input:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 3px rgba(224, 169, 60, 0.14), 0 0 18px -6px rgba(224, 169, 60, 0.5);
}

/* ---- 10. Selection colour ---- */
::selection { background: rgba(224, 169, 60, 0.35); color: #fff; }