/* ============================================================
   STAND TALL GO HIGHER — landing page
   Palette pulled from the official poster:
   electric yellow ground, royal blue display type w/ black
   outlines, ink-black linework, white knockout text.
   ============================================================ */

:root {
  --yellow: #FFEE00;
  --blue: #5157F0;
  --blue-deep: #3A3FD1;
  --ink: #0D0D0D;
  --paper: #FFFDF2;
  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--yellow);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- shared ---------- */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 88px 0; }

.section-title {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 32px;
  line-height: 1;
}

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 16px 30px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.btn:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--ink);
}

.btn-primary { background: var(--blue); color: #fff; }
.btn-ghost   { background: transparent; color: var(--ink); }
.btn-light   { background: var(--yellow); color: var(--ink); }

/* ---------- hero ---------- */

/* Height follows the content — no min-height, so the collage below starts
   immediately instead of after a band of empty yellow. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(44px, 7vw, 88px) 24px clamp(16px, 2.5vw, 32px);
  background: var(--yellow);
}

.hero-credit {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(3.4rem, 12.5vw, 9.5rem);
  line-height: 0.92;
  color: var(--blue);
  /* chunky black outline, like the poster */
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
  display: flex;
  flex-direction: column;
}

.hero-tagline {
  margin-top: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.75rem, 2vw, 1.05rem);
  background: var(--ink);
  color: #fff;
  padding: 10px 22px;
}

.hero-actions {
  margin-top: 48px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- collage parallax band ---------- */

/* The whole collage always fits — never crop faces. The band's vertical
   padding is the room the drift moves within, so nothing clips. */
/* Full bleed and never cropped — the whole artwork is always visible.
   The image bleeds 30px past the band top and bottom (that top strip is
   the fully transparent part of the fade), which gives the parallax drift
   room to move without ever exposing a strip of bare yellow. */
.collage-band {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  border-bottom: 4px solid var(--ink);
}

.collage-img {
  display: block;
  width: 100%;
  height: auto;
  /* Top margin matches the parallax travel (data-parallax="-26"), so the
     drift can never clip the camera. Any gap it opens there is yellow on
     yellow, and the bottom bleeds under the band so no strip shows through. */
  margin: 26px 0 -30px;
  will-change: transform, opacity;
}

/* ---------- scroll motion ---------- */

.will-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.will-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .will-reveal { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
}

/* ---------- trailer ---------- */

.section-dark {
  background: var(--ink);
  color: var(--paper);
}

.section-dark .section-title { color: var(--yellow); }

.video-frame {
  border: 4px solid var(--yellow);
  box-shadow: 10px 10px 0 var(--blue);
  background: #000;
}

.video-embed {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-alt {
  margin-top: 24px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.video-alt a { color: var(--yellow); font-weight: 600; }

/* ---------- about ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 56px;
  align-items: start;
}

.about-poster img {
  border: 4px solid var(--ink);
  box-shadow: 10px 10px 0 var(--blue);
}

.about-copy .lede {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.about-copy p + p { margin-top: 16px; }

.about-meta {
  margin-top: 28px !important;
  padding-top: 20px;
  border-top: 3px solid var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

/* if assets/poster.png is missing, drop the poster column */
.about-grid.no-poster { grid-template-columns: 1fr; }
.about-grid.no-poster .about-poster { display: none; }

@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-poster { max-width: 300px; margin: 0 auto; }
}

/* ---------- press ---------- */

.section-blue {
  background: var(--blue);
  color: #fff;
}

.section-blue .section-title { color: var(--yellow); }

.press { text-align: center; }

.press-quote p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 21ch;
  margin: 0 auto;
}

.press-quote cite {
  display: block;
  margin-top: 24px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
  opacity: 0.9;
}

.press .btn { margin-top: 36px; }

/* ---------- team ---------- */

.team-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 40px 32px;
}

.person-photo {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--blue);
  overflow: hidden;
  background: var(--blue);
  margin-bottom: 18px;
}

/* initials placeholder — sits behind the img; shows when the
   headshot is missing (the img removes itself on error) */
.person-photo::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 3rem;
  color: var(--yellow);
}

.person-photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-name {
  font-family: var(--display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.person-role {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--blue-deep);
  margin-top: 6px;
}

.person-bio {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.team-fine {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 3px solid var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 56px 24px;
}

.footer-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.6rem;
  color: var(--yellow);
  letter-spacing: 0.03em;
}

.footer-tag {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  margin-top: 8px;
  opacity: 0.8;
}

.footer-fine {
  margin-top: 24px;
  font-size: 0.75rem;
  opacity: 0.55;
}