/* =========================================================
   THE ACADEMY · pitch deck
   Brand: Grand Avenue Studios (gold #C8A046, slate #4B4B4B,
   Cormorant Garamond). Show type: Big Shoulders Display.
   ========================================================= */

:root {
  --black: #050505;
  --ink: #0b0b0c;
  --slate: #4b4b4b;
  --bone: #f3efe6;
  --muted: #a39d92;

  --gold: #c8a046;          /* GA "Redemptive Light" */
  --gold-deep: #b99137;     /* GA logo gold */
  --gold-hi: #f1d892;
  --gold-metal: linear-gradient(180deg, #f6e2a6 0%, #d9b45c 38%, #b99137 62%, #e7c97a 100%);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --display: "Big Shoulders Display", "Oswald", Impact, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --gutter: clamp(16px, 4vw, 72px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--bone); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Deck + slide frame ----------
   Landscape (desktop, iPad landscape): full-screen slides that snap.
   Portrait (iPhone, iPad portrait): the same slides flow as a vertical story. */
.deck { scroll-snap-type: y mandatory; }
.slide {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  padding: max(var(--gutter), env(safe-area-inset-top)) var(--gutter) max(var(--gutter), env(safe-area-inset-bottom));
}

/* ---------- Studio mark: the gold GA monogram (from Bruce's brand kit) over the name set in type ---------- */
.studio-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif);
  color: var(--gold);
  line-height: 1;
}
.studio-mark__logo {            /* height is 0.3 × the ACADEMY font size at each breakpoint (halved Oct 23) */
  display: block;
  width: auto;
  height: clamp(30px, 4.65vw, 84px);
  margin-bottom: .5em;
}
.studio-mark__name {
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 18px);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.studio-mark__sub {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-top: .45em;
  font-size: clamp(8px, .55vw, 10px);
  letter-spacing: .32em;
  text-transform: uppercase;
}
.studio-mark__sub::before,
.studio-mark__sub::after {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
  opacity: .8;
}

/* =========================================================
   01 · COVER
   ========================================================= */
.cover {
  padding-top: max(clamp(12px, 2.6vh, 32px), env(safe-area-inset-top));   /* header sits high; the game shows below the title */
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: radial-gradient(120% 80% at 50% 110%, #12100b 0%, var(--black) 60%);
}

/* Night sky glow above the field */
.cover__sky {
  position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(200,160,70,.16), transparent 70%),
    radial-gradient(35% 30% at 18% 8%, rgba(255,244,214,.10), transparent 70%),
    radial-gradient(35% 30% at 82% 8%, rgba(255,244,214,.10), transparent 70%);
}

/* Stadium light banks: a rendered photo of a 12 × 3 floodlight bank (tools/plates/lights.py),
   angled in from each side. The box is the lamp grid; the image spills past it for the glow. */
.cover__lights {
  position: absolute; z-index: -3;
  top: 4%;
  width: 34vw; max-width: 560px; aspect-ratio: 4 / 1;
  opacity: 0;
  animation: lights-on 1.6s var(--ease-out) forwards;
}
.cover__lights::before {          /* insets match PAD_X / PAD_Y in lights.py: 320/1920 wide, 300/480 tall */
  content: ""; position: absolute;
  inset: -62.5% -16.667%;
  background: url(../assets/img/brand/stadium-lights.png) center / 100% 100% no-repeat;
}
.cover__lights::after {           /* light hanging in the haze under each bank: soft, no hard edges */
  content: ""; position: absolute; left: -25%; right: -25%; top: 0; height: 560%;
  background:
    radial-gradient(38% 55% at 50% 8%, rgba(255,236,200,.12), rgba(255,236,200,.04) 55%, transparent 80%),
    radial-gradient(70% 90% at 50% 8%, rgba(200,160,70,.06), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%);
          mask-image: linear-gradient(180deg, transparent, #000 14%);
}
.cover__lights--left  { left: -4vw;  transform: perspective(700px) rotateY(28deg) rotateZ(-6deg); animation-delay: .25s; }
.cover__lights--right { right: -4vw; transform: perspective(700px) rotateY(-28deg) rotateZ(6deg); animation-delay: .55s; }

@keyframes lights-on {
  0%   { opacity: 0; }
  12%  { opacity: .85; }
  20%  { opacity: .15; }
  34%  { opacity: 1; }
  44%  { opacity: .55; }
  100% { opacity: 1; }
}

/* Field in perspective: yard lines receding to the horizon */
.cover__field {
  position: absolute; z-index: -2;
  left: -50%; right: -50%; bottom: -8%;
  height: 62%;
  transform-origin: 50% 100%;
  transform: perspective(520px) rotateX(64deg);
  background:
    repeating-linear-gradient(90deg, rgba(200,160,70,.0) 0 calc(10% - 1px), rgba(200,160,70,.38) calc(10% - 1px) 10%),
    repeating-linear-gradient(0deg, rgba(243,239,230,.05) 0 calc(12.5% - 1px), rgba(243,239,230,.12) calc(12.5% - 1px) 12.5%),
    linear-gradient(180deg, #0a0d09, #10140d);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  opacity: 1;
}

/* Film grain + vignette for a cinematic finish */
.cover__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.75) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Studio credit sits top-center, framed by the two light banks */
.cover__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.1vh, 14px);
  padding-top: clamp(4px, 1vh, 16px);
  animation: rise 1.2s var(--ease-out) .2s both;
}
.cover__presents {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(12px, .8vw, 14px);
  color: var(--muted);
  letter-spacing: .06em;
}

.cover__title {
  align-self: start;                /* sits high so the game on the field shows below it */
  justify-self: center;
  text-align: center;
  padding-block: clamp(4px, 1vh, 12px) clamp(24px, 4vh, 56px);
}
.cover__kicker {
  margin: 0 0 clamp(10px, 1.6vh, 22px);
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: .78;
  animation: rise 1.2s var(--ease-out) .9s both;
}

.wordmark { margin: 0; line-height: .82; display: flex; flex-direction: column; }   /* a column, so the title's margins never merge */
.wordmark__the {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 60px);
  color: var(--gold);
  letter-spacing: .02em;
  margin-bottom: .32em;            /* breathing room above ACADEMY (Bruce, Oct 23) */
  animation: rise 1.3s var(--ease-out) 1.05s both;
}
.wordmark__main {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(76px, 15.5vw, 280px);
  letter-spacing: .015em;
  background: var(--gold-metal);
  background-size: 100% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(200,160,70,.28));
  animation: title-in 1.6s var(--ease-out) 1.15s both;
  position: relative;
  /* the gold is painted inside this box, and at .82 line height the C's round top rose above it and was cut off:
     room above and below for the paint, taken back with the margin, so nothing moves (Oct 27) */
  padding: .12em 0; margin: -.12em 0;
}
/* A single slow light sweep across the wordmark */
.wordmark__main::after {
  content: "Academy";
  position: absolute; inset: 0;
  padding: inherit; box-sizing: border-box;   /* the sweep's letters sit exactly on the title's */
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: sweep 2.4s ease-in-out 2.4s both;
}

.cover__tagline {
  margin: clamp(2px, .6vh, 10px) 0 0;
  display: inline-flex; align-items: center; gap: 1em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.1vw, 36px);
  color: var(--bone);
  animation: rise 1.3s var(--ease-out) 1.6s both;
}
.cover__tagline::before,
.cover__tagline::after {
  content: ""; width: clamp(28px, 4vw, 72px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.cover__tagline::after { background: linear-gradient(270deg, transparent, var(--gold)); }

.cover__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(200,160,70,.28);
  animation: rise 1.3s var(--ease-out) 1.9s both;
}
.cover__logline {
  margin: 0;
  max-width: 34em;
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.35;
  color: var(--bone);
  opacity: .9;
}
.cover__credits {
  display: flex; gap: clamp(20px, 3vw, 48px);
  margin: 0;
}
.cover__credits div { display: flex; flex-direction: column; gap: 6px; }
.cover__credits dt {
  font-size: clamp(9px, .68vw, 11px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.cover__credits dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(16px, 1.25vw, 21px);
  font-weight: 500;
  white-space: nowrap;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes title-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); letter-spacing: .08em; }
  to   { opacity: 1; transform: none; letter-spacing: .015em; }
}
@keyframes sweep {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}

/* ---------- Deck position indicator ---------- */
.deck-nav {
  position: fixed; z-index: 10;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  font-size: 11px; letter-spacing: .2em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.deck-nav[hidden] { display: none; }

/* =========================================================
   Breakpoints
   ========================================================= */

/* iPad portrait and narrow windows */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  .cover__lights { width: 42vw; top: 9%; }
  .cover__lights--left  { left: -8vw; }
  .cover__lights--right { right: -8vw; }
  .cover__field { height: 40%; }
  .cover__bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cover__logline { max-width: 30em; }
  .wordmark__main { font-size: clamp(64px, 19vw, 220px); }
  .studio-mark__logo { height: clamp(30px, 5.7vw, 66px); }
  .wordmark__the { font-size: clamp(26px, 5.4vw, 56px); }
  .cover__tagline { font-size: clamp(20px, 4vw, 34px); }
  .cover__kicker { font-size: clamp(10px, 1.7vw, 13px); }
}

/* iPhone */
@media screen and (max-width: 560px) {
  .slide { padding-inline: 16px; }
  .cover__lights { width: 56vw; top: 21%; }   /* below the studio logo, above the title */
  .cover__lights--left  { left: -16vw; }
  .cover__lights--right { right: -16vw; }
  .wordmark__main { font-size: 21.5vw; }
  .studio-mark__logo { height: max(30px, 6.5vw); }
  .cover__kicker { letter-spacing: .3em; }
  .cover__tagline::before, .cover__tagline::after { width: 22px; }
  .cover__bottom { align-items: center; text-align: center; }
  .cover__credits { width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 16px; }
}

/* Short landscape screens (iPhone held sideways) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .cover__lights { top: 0; width: 26vw; }
  .wordmark__main { font-size: 13vw; }
  .studio-mark__logo { height: 3.9vw; }
  .cover__title { padding-block: 8px; }
  .cover__bottom { padding-top: 10px; }
  .cover__logline { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .wordmark__main::after { display: none; }
}

/* =========================================================
   Print / PDF: one 16:9 page per slide, final state, no motion
   ========================================================= */
@page { size: 13.333in 7.5in; margin: 0; }
@media print {
  html, body { background: var(--black); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .deck { scroll-snap-type: none; }
  .slide {
    width: 13.333in; height: 7.5in; min-height: 0;
    padding: .55in .7in;
    break-after: page; page-break-after: always;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cover__lights { opacity: 1; }
  .wordmark__main::after, .deck-nav { display: none; }
  .wordmark__main { font-size: 2.2in; }
  .studio-mark__logo { height: .62in; }
  .wordmark__the { font-size: .5in; }
  .cover__lights { top: 2%; width: 4.4in; }
  /* Contact's light banks in the PDF (Oct 27): Chrome prints the 3D tilt and the masked haze under each bank as
     pale boxes, so in print the banks tilt flat (2D, nearly the same angle) and the haze is left out */
  .cover__lights::after { display: none; }
  .cover__lights--left  { transform: rotate(-6deg) skewY(-4deg) scaleX(.88); }
  .cover__lights--right { transform: rotate(6deg) skewY(4deg) scaleX(.88); }
  /* 3D transforms rasterize badly in PDF; use a flat glow on the horizon instead */
  .cover__field {
    transform: none; left: 0; right: 0; bottom: 0; height: 30%;
    background: radial-gradient(70% 100% at 50% 100%, rgba(200,160,70,.14), transparent 70%);
    -webkit-mask-image: none; mask-image: none;
  }
}

/* CURATE's own styles (the editor's bars, panels and handles) live in css/curate.css, shared with the studio pages */

/* PDF button (site/js/pdf.js): bottom right, the counter sits to its left */
.pdf-dl { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.pdf-dl__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid rgba(200,160,70,.5); border-radius: 999px;
  background: rgba(5,5,5,.8); color: var(--gold); text-decoration: none;
  font: 600 11px/1 var(--sans); letter-spacing: .2em;
  transition: border-color .2s, background .2s;
}
.pdf-dl__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdf-dl__btn:hover, .pdf-dl__btn:focus-visible { border-color: var(--gold); background: rgba(200,160,70,.14); outline: none; }
.pdf-dl__menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: rgba(10,10,10,.96); border: 1px solid rgba(200,160,70,.4); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.pdf-dl__menu[hidden] { display: none; }
.pdf-dl__item {
  display: block; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: 8px;
  background: none; color: var(--bone); text-decoration: none; font: 500 14px/1.2 var(--sans); cursor: pointer;
}
.pdf-dl__item:hover, .pdf-dl__item:focus-visible { background: rgba(200,160,70,.14); color: var(--gold); outline: none; }
.deck-nav { right: calc(max(16px, env(safe-area-inset-right)) + 92px); bottom: max(26px, env(safe-area-inset-bottom)); }
@media print { .pdf-dl { display: none !important; } }