/* ============================================================
   THE WHITE BULL — mythic monochrome
   Light hero (the video's white studio) descending into black
   for the legend. Cinzel for stone-carved display, Cormorant
   for the myth's voice. One gold accent, used sparingly.
   ============================================================ */

:root {
  --black: #000000;
  --ink: #121110;
  --ink-lift: #171613;
  --bone: #ede7db;
  --bone-60: rgba(237, 231, 219, 0.62);
  --bone-35: rgba(237, 231, 219, 0.35);
  --line: rgba(237, 231, 219, 0.16);
  --gold: #c2a05e;
  --gold-dim: rgba(194, 160, 94, 0.45);
  --light: #e9e8e6;
  --ink-on-light: #171512;

  --font-display: "Cinzel", "Times New Roman", serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

/* ---- film grain on the dark acts ---------------------------- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}
.grain > * { position: relative; z-index: 1; }

/* ---- top bar — blend-difference keeps it legible on both the
       light hero and the black acts, no backdrop-filter -------- */
.topbar {
  position: fixed;
  top: 0; left: 0;
  z-index: 10;
  padding: 1.35rem clamp(1.25rem, 4vw, 2.5rem);
  mix-blend-mode: difference;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
/* solid chip, outside the blend — legible over any backdrop */
.ticker-chip {
  position: fixed;
  top: 1.05rem;
  right: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bone);
  background: rgba(12, 11, 9, 0.92);
  border: 1px solid rgba(237, 231, 219, 0.28);
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), border-color 200ms ease;
}
.ticker-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .ticker-chip:hover { border-color: var(--gold); }
}

/* ============================================================
   ACT I — HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  background: var(--light);
  color: var(--ink-on-light);
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(233, 232, 230, 0.25) 0%,
    rgba(233, 232, 230, 0) 28%,
    rgba(233, 232, 230, 0.5) 64%,
    rgba(233, 232, 230, 0.92) 90%
  );
}
.hero-copy {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(4.5rem, 12vh, 8rem);
  text-align: center;
  padding: 0 1.25rem;
}
.hero-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  letter-spacing: 0.06em;
  color: rgba(23, 21, 18, 0.72);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 9.5vw, 7.5rem);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}
.hero-rule {
  width: 72px;
  height: 1px;
  margin: 1.4rem auto 0;
  background: var(--ink-on-light);
  opacity: 0.5;
}

/* staged entrance — pure CSS so it can't be delayed by script timing */
.hero-kicker, .hero-title, .hero-rule {
  opacity: 0;
  animation: hero-in 900ms var(--ease-out) forwards;
}
.hero-kicker { animation-delay: 100ms; }
.hero-title { animation-delay: 220ms; }
.hero-rule { animation-delay: 380ms; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: rgba(23, 21, 18, 0.6);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 28px;
  background: rgba(23, 21, 18, 0.45);
  animation: cue 2.2s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); }
  45%  { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ============================================================
   ACT II — THE LEGEND
   ============================================================ */
.legend {
  background: var(--black);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 5vw, 3rem);
}

.epigraph {
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.35;
  max-width: 34ch;
  margin: 0 auto clamp(4rem, 9vh, 7rem);
}
.epigraph em { color: var(--gold); }

.section-label {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(4rem, 9vh, 7rem);
}
.label-line { width: clamp(2rem, 8vw, 5.5rem); height: 1px; background: var(--gold-dim); }

/* chapters */
.chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1060px;
  margin: 0 auto clamp(6rem, 14vh, 10rem);
}
.chapter.flip .chapter-media { order: 2; }

.chapter-media { position: relative; }
.ghost-numeral {
  position: absolute;
  top: -0.55em;
  left: -0.15em;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-dim);
  pointer-events: none;
}
.chapter.flip .ghost-numeral { left: auto; right: -0.15em; }

.framed {
  border: 1px solid var(--line);
  padding: clamp(0.6rem, 1.6vw, 1rem);
}
.framed img {
  width: 100%;
  filter: grayscale(1) contrast(1.05);
}
.framed figcaption {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-35);
  padding-top: 0.8rem;
  text-align: center;
}

.chapter-kicker {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.chapter-kicker.centered { text-align: center; }
.chapter-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
}
.chapter-body {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--bone-60);
  max-width: 38ch;
}

/* the union */
.union {
  text-align: center;
  padding: clamp(2rem, 6vh, 4rem) 0 clamp(1rem, 4vh, 2rem);
}
.union-line {
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.3;
}
.union-big {
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin-top: 0.6rem;
}
.union-after {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

/* ============================================================
   ACT III — THE BIRTH
   ============================================================ */
.birth {
  background: var(--black);
  text-align: center;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 3rem) clamp(6rem, 13vh, 10rem);
}
.birth-media {
  max-width: 680px;
  margin: clamp(2rem, 5vh, 3.5rem) auto;
}
.birth-media img { width: 100%; }
.birth-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.birth-title em {
  font-style: normal;
  color: var(--gold);
}
.birth-body {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--bone-60);
  max-width: 44ch;
  margin: 1.4rem auto 2.6rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  background: var(--bone);
  border: 1px solid var(--bone);
  padding: 1.05rem 2.4rem;
  transition: transform 160ms var(--ease-out), background 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: transparent; color: var(--bone); }
}

/* ============================================================
   ACT IV — THE SUMMONING
   ============================================================ */
.summon {
  background: var(--ink);
  border-top: 1px solid var(--line);
  text-align: center;
  padding: clamp(5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 3rem);
}
.summon .section-label { margin-bottom: clamp(2rem, 5vh, 3rem); }

.summon-ticker {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: clamp(2.2rem, 5vh, 3.2rem);
}

.ca-box {
  display: flex;
  align-items: stretch;
  max-width: 640px;
  margin: 0 auto 2rem;
  border: 1px solid var(--line);
  background: var(--ink-lift);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.ca-label {
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--line);
  color: var(--gold);
  letter-spacing: 0.15em;
}
.ca-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  color: var(--bone-60);
  word-break: break-all;
  font-family: inherit;
}
.ca-copy {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--bone);
  border: none;
  border-left: 1px solid var(--line);
  padding: 0 1.4rem;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 200ms ease;
}
.ca-copy:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .ca-copy:hover { background: #fff; }
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
}
.link-chip {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border: 1px solid var(--line);
  padding: 0.85rem 1.6rem;
  transition: transform 160ms var(--ease-out), border-color 200ms ease;
}
.link-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .link-chip:hover { border-color: var(--gold); }
}
.link-chip.soon {
  pointer-events: none;
  color: var(--bone-35);
}
.link-chip.soon::after {
  content: " · soon";
  color: var(--gold-dim);
  letter-spacing: 0.1em;
}

.summon-note {
  font-style: italic;
  color: var(--bone-35);
  font-size: 1rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 2.6rem 1.5rem 3rem;
  color: var(--bone-35);
  font-size: 0.95rem;
}
.footer p { max-width: 64ch; margin: 0 auto; }
.footer-mark {
  margin-top: 1rem !important;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ============================================================
   SCROLL REVEALS
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* image curtain reveal — clip-path lifts once the frame is in view */
.img-reveal {
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms var(--ease-in-out);
}
.img-reveal.slow { transition-duration: 1300ms; }
.img-reveal img {
  transform: scale(1.06);
  transition: transform 1200ms var(--ease-out);
}
.is-in .img-reveal,
.img-reveal.is-in {
  clip-path: inset(0 0 0 0);
}
.is-in .img-reveal img,
.img-reveal.is-in img {
  transform: scale(1);
}

/* union lines cascade */
.union .union-big { transition-delay: 140ms; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .chapter {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .chapter.flip .chapter-media { order: 0; }
  .chapter-text { text-align: center; }
  .chapter-body { margin: 0 auto; }
  .ghost-numeral { left: -0.1em; top: -0.5em; }

  .ca-box { flex-direction: column; }
  .ca-label { border-right: none; border-bottom: 1px solid var(--line); justify-content: center; }
  .ca-copy { border-left: none; border-top: 1px solid var(--line); padding: 0.9rem; }
}

/* ============================================================
   REDUCED MOTION — keep the fades, drop the movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transform: none; transition: opacity 300ms ease; }
  .img-reveal { clip-path: none; transition: none; }
  .img-reveal img { transform: none; transition: none; }
  .hero-kicker, .hero-title, .hero-rule { animation: hero-in-fade 400ms ease forwards; }
  .scroll-line { animation: none; }
}

@keyframes hero-in-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}