/* =============================================================================
   home.css  —  Styles for the HOMEPAGE ONLY (index.html)
   -----------------------------------------------------------------------------
   Loaded only by index.html, on top of styles.css. The homepage has its own
   bespoke layout and its own scroll motion (driven by assets/js/home.js), which
   is why it has a dedicated stylesheet. Warm "story" palette; gold is reserved
   for actions and active state, never decoration.

   Sections top-to-bottom: typographic voice, 1) Opening (video hero),
   Register CTA, "Why ETA" argument (the sticky scroll), The day, The stand,
   The two tracks, The region (partner logos), Close, then responsive blocks.

   NOTE: the shared design tokens, header/footer, and reveal motion live in
   styles.css — not here.
   ============================================================================= */

/* Page background (cream). */
main {
  background: var(--story-paper);
}

/* --------------------------------------------------------------------------
   Typographic voice
   Helvetica held at large scale with tight tracking and a real measure.
   Weight jumps from 400 to 700 with nothing in between.
   -------------------------------------------------------------------------- */

/* Shared base for the biggest headings across the homepage sections. */
.opening h1,
.day__head h2,
.stand__head h2,
.tracks__head h2,
.region__head h2,
.close__body h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

/* The giant centred "RMETA 2026" hero wordmark. */
.opening h1 {
  max-width: none;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.65rem, 2vw, 2rem);
  font-size: clamp(4.5rem, 14vw, 12rem);
  /* Tight, but not so tight that the E and T in RMETA collide. */
  letter-spacing: -0.04em;
  line-height: 0.78;
}

/* The section headings all share one title size token. */
.day__head h2,
.stand__head h2,
.tracks__head h2,
.region__head h2,
.close__body h2 {
  font-size: var(--size-title);
}

/* --------------------------------------------------------------------------
   1. Opening — the full-screen video hero, headline sits in the frame
   -------------------------------------------------------------------------- */

/* The hero section: dark, full-height, content centred over the video. */
.opening {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Reserve room for the header above and the registration band below so all
     three stay within the first viewport on large monitors. min-height, not
     height, so the hero still grows to fit its own content on short screens.
     The mobile breakpoint below sets its own taller height for phones. */
  min-height: calc(100vh - var(--header-height) - 11rem);
  padding-top: var(--header-height);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--story-white);
  background: var(--story-ink);
  overflow: hidden;
}

/* The background media layer (fills the hero). */
.opening__frame {
  position: absolute;
  inset: 0;
}

/* The hero image/video covers the frame. */
.opening__frame img,
.opening__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Promote the video to its own compositor layer so playback stays steady
   and pixel-snapped rather than jittering against the page. */
.opening__frame video {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* The dark gradient overlay that keeps the hero text readable. */
.opening__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(17, 17, 15, 0.94) 4%, rgba(17, 17, 15, 0.52) 42%, rgba(17, 17, 15, 0.34) 100%),
    linear-gradient(90deg, rgba(17, 17, 15, 0.6), transparent 62%);
}

/* The centred content sitting above the video. */
.opening__body {
  position: relative;
  text-align: center;
}

/* The intro line above the wordmark. */
.opening__eyebrow {
  max-width: 70rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  color: rgba(255, 253, 248, 0.82);
  font-size: clamp(0.72rem, 1.45vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* The "RMETA" part of the wordmark (white). */
.opening__name {
  color: var(--story-white);
}

/* The "2026" part (gold). */
.opening__year {
  color: var(--story-gold);
}


/* The "Explore RMETA" link under the details. */
.opening__link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.35rem, 2.8vw, 2rem);
  color: var(--story-gold);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 260ms var(--ease-out), transform 260ms var(--ease-out);
}

/* Link hover: white + nudge right. */
.opening__link:hover,
.opening__link:focus-visible {
  color: var(--story-white);
  transform: translateX(0.25rem);
}

/* The event details are the headline of the page: the date, place, and time
   are the first things the reader takes in, set large and stacked directly
   under the RMETA mark so anyone landing here knows when and where at a glance. */
.opening__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.4rem, 1.1vw, 0.85rem);
  max-width: 100%;
  margin: clamp(1.5rem, 3.2vw, 2.5rem) auto 0;
  padding: 0;
  list-style: none;
  color: var(--story-white);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.62);
  text-wrap: balance;
}

/* Each fact stays on its own line and never wider than the frame, so nothing
   is clipped by the hero's overflow at any screen size. */
.opening__detail {
  margin: 0;
  max-width: 100%;
}

/* Date leads (largest), venue under it, time as the supporting line. */
.opening__detail--date {
  font-size: clamp(1.9rem, 5.6vw, 4.25rem);
}

.opening__detail--venue {
  font-size: clamp(1.35rem, 3.6vw, 2.65rem);
}

.opening__detail--time {
  margin-top: clamp(0.15rem, 0.6vw, 0.5rem);
  color: rgba(255, 253, 248, 0.86);
  font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em;
}

/* The venue name is a map link, underlined subtly within the details. */
.opening__details .venue-link {
  display: inline;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 253, 248, 0.35);
}

.opening__details .venue-link:hover,
.opening__details .venue-link:focus-visible {
  border-bottom-color: var(--story-gold);
}

/* --------------------------------------------------------------------------
   Register call to action — the first thing under the hero
   -------------------------------------------------------------------------- */

/* The dark "Registration is open" band directly under the hero. */
.register-cta {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  color: var(--story-white);
  background: var(--story-ink);
}

/* Heading + button spread apart. */
.register-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.register-cta__inner h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Why ETA — the load-bearing scroll.
   The photograph holds while the reasoning advances over it.
   -------------------------------------------------------------------------- */

/* The dark "Why ETA" section wrapper. */
.argument {
  color: var(--story-white);
  background: var(--story-ink);
}

/* Two columns: sticky photo on the left, scrolling steps on the right. */
.argument__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0;
}

/* The photo column stays pinned (sticky) while the steps scroll past it. */
.argument__media {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* The photo (home.js swaps its src per step). */
.argument__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 620ms var(--ease-out), transform 1200ms var(--ease-out);
}

/* Mid-swap fade+zoom (home.js adds .is-swapping). */
.argument__media.is-swapping img {
  opacity: 0.25;
  transform: scale(1.04);
}

/* A gradient tint over the photo's right edge (where the steps sit). */
.argument__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(17, 17, 15, 0.85));
}

/* The list of steps. */
.argument__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each step fills a screen height and is dimmed until it becomes active. */
.argument__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 4rem clamp(1.6rem, 5vw, 5.5rem);
  opacity: 0.28;
  transition: opacity 500ms var(--ease-out);
}

/* The active step (home.js adds .is-active as it scrolls through centre). */
.argument__step.is-active {
  opacity: 1;
}

/* The little gold marker line above each step's heading. */
.argument__marker {
  flex: none;
  width: 3.5rem;
  height: 1px;
  margin-bottom: 1.6rem;
  background: rgba(207, 184, 124, 0.3);
  transition: background 500ms var(--ease-out), width 500ms var(--ease-out);
}

/* Active step: the marker grows and turns solid gold. */
.argument__step.is-active .argument__marker {
  width: 5rem;
  background: var(--story-gold);
}

/* The per-step stacked image belongs to narrow screens only; the wide layout
   uses the sticky stage instead (revealed in the mobile @media below). */
.argument__step-media {
  display: none;
}

/* Step heading. */
.argument__step h3 {
  max-width: 17ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
  transition: transform 500ms var(--ease-out), color 320ms var(--ease-out);
}

/* Step body paragraph. */
.argument__step p:last-child {
  max-width: 42ch;
  margin: 0;
  color: rgba(255, 253, 248, 0.74);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  transition: transform 500ms var(--ease-out), color 320ms var(--ease-out);
}

/* Active step: nudge its text right. */
.argument__step.is-active h3,
.argument__step.is-active p {
  transform: translateX(0.35rem);
}

/* Below 900px the sticky stage cannot work, so the sequence simply stacks
   with each step carrying its own image. */
@media (max-width: 900px) {
  .argument__stage {
    grid-template-columns: 1fr;
  }

  .argument__media {
    display: none;
  }

  .argument__step {
    min-height: 0;
    padding: clamp(2.75rem, 8vw, 4rem) var(--page-gutter);
    opacity: 1;
  }

  .argument__step + .argument__step {
    border-top: 1px solid rgba(255, 253, 248, 0.14);
  }

  .argument__marker {
    width: 5rem;
    background: var(--story-gold);
  }

  .argument__step-media {
    display: block;
    margin: 0 0 1.75rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #26251f;
  }

  .argument__step-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .argument__step h3 {
    max-width: 20ch;
  }
}

/* Reduced motion: every step reads at full strength with no movement. */
@media (prefers-reduced-motion: reduce) {
  .argument__step {
    opacity: 1;
  }

  .argument__media img,
  .argument__media.is-swapping img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .argument__step h3,
  .argument__step p {
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   The day — three equal conversations, side by side.
   -------------------------------------------------------------------------- */

/* The "day" section wrapper. */
.day {
  padding: clamp(5.5rem, 12vw, 10rem) 0;
  background: var(--story-paper);
}

/* Heading block. */
.day__head {
  max-width: 46rem;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.day__head p {
  max-width: 52ch;
  margin: 1.5rem 0 0;
  color: var(--story-muted);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* The 3-across grid of "conversations". */
.day__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
}

/* Three peer conversations, so each item sits in its own equal column and
   shares one aspect ratio rather than the earlier staggered layout. */
.day__item--lead,
.day__item--mid,
.day__item--last {
  grid-column: auto;
}

/* Each item's photo. */
.day__item figure {
  margin: 0 0 1.75rem;
  overflow: hidden;
  background: #e6ded0;
  aspect-ratio: 4 / 3;
}

.day__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out), filter 320ms var(--ease-out);
}

/* Photo zoom on hover. */
.day__item:hover img {
  transform: scale(1.03);
}

/* Item heading. */
.day__copy h3 {
  max-width: 20ch;
  margin: 0 0 0.9rem;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.14;
}

/* Item body. */
.day__copy p {
  max-width: 44ch;
  margin: 0;
  color: var(--story-muted);
  font-size: 1.02rem;
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   Tracks
   Two peer options, so they are set symmetrically and told apart by a rule
   rather than by cards, badges, or icons. Nothing here implies a ranking.
   -------------------------------------------------------------------------- */

/* The "two tracks" section wrapper. */
.tracks {
  padding: clamp(5.5rem, 12vw, 9rem) 0;
  background: var(--story-paper);
}

/* Heading block. */
.tracks__head {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.tracks__head h2 {
  max-width: 20ch;
}

.tracks__head p {
  max-width: 52ch;
  margin: 1.4rem 0 0;
  color: var(--story-muted);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* The two tracks side by side, separated only by a centred rule. */
.tracks__split {
  --track-gap: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--track-gap);
  border-top: 1px solid var(--story-line);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
}

/* The rule between the two is the whole separation device. Half the gap on
   either side of it so it sits centred rather than against the left column. */
.track + .track {
  padding-left: calc(var(--track-gap) / 2);
  margin-left: calc(var(--track-gap) / -2);
  border-left: 1px solid var(--story-line);
}

/* Track title. */
.track__name {
  margin: 0 0 1.1rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

/* The "who it's for" line under a track title. */
.track__for {
  max-width: 34ch;
  margin: 0 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--story-line);
  color: var(--story-ink);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

/* The list of what the track covers. */
.track__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.track__list li {
  max-width: 40ch;
  padding: 0.9rem 0;
  color: var(--story-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Divider between list items. */
.track__list li + li {
  border-top: 1px solid var(--story-line);
}

/* The footer row under the tracks. */
.tracks__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  margin-top: clamp(2.75rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   6. Region
   -------------------------------------------------------------------------- */

/* The "region" section (partner logos). */
.region {
  padding: clamp(5.5rem, 12vw, 9rem) 0;
  background: var(--story-white);
}

/* Heading block. */
.region__head {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.region__head h2 {
  max-width: 22ch;
}

.region__head p {
  max-width: 54ch;
  margin: 1.4rem 0 0;
  color: var(--story-muted);
  font-size: 1.12rem;
  line-height: 1.6;
}

/* Seven partners plus the partner cell make eight, which fills a four-across
   and a two-across grid exactly. No orphaned cell at any width. */
.region__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--story-line);
  border: 1px solid var(--story-line);
}

/* Each square logo cell. */
.region__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  background: var(--story-white);
}

/* Padding sits on the child, not the cell, so a linked tile is clickable
   edge to edge. These marks carry roughly 20% of their own whitespace
   inside a square canvas, so very little needs adding here. */
.region__logo > a,
.region__logo > picture {
  padding: clamp(0.5rem, 1.6vw, 1.1rem);
}

.region__logo > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* The mark itself is the hover response, so the raised tile has to sit
   above its neighbours to grow past the rule work rather than under it. */
.region__logo > a:hover,
.region__logo > a:focus-visible {
  position: relative;
  z-index: 2;
}

.region__logo > a:focus-visible {
  outline: 3px solid var(--story-gold);
  outline-offset: -3px;
}

.region__logo picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Width-driven, not height-capped. Capping the height of a square canvas
   shrinks the whole artboard and leaves the mark barely legible. */
.region__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 380ms var(--ease-pop);
}

/* These marks sit inside roughly 20% of their own whitespace, so most of
   this growth is spent filling the tile before anything spills out of it. */
.region__logo > a:hover img,
.region__logo > a:focus-visible img {
  transform: scale(1.22);
}

/* Partner call to action: a photo-backed cell with a heading and a pill,
   in the spirit of the SMBash "Become a sponsor" card. */
.region__logo--cta {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--story-ink);
}

/* The CTA cell's link fills the tile, content at the bottom. */
.region__logo--cta a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  width: 100%;
  height: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  color: var(--story-white);
  text-decoration: none;
}

/* Grayscale photo behind the copy, dimmed so the heading stays legible. */
.region__cta-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The photo (grayscale + dimmed for legibility). */
.region__cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  opacity: 0.5;
  transition: transform 600ms var(--ease-out), opacity 400ms var(--ease-out);
}

/* Dark gradient over the CTA photo. */
.region__cta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 15, 0.3) 0%, rgba(17, 17, 15, 0.82) 92%);
}

/* The CTA heading. */
.region__cta-title {
  position: relative;
  z-index: 1;
  max-width: 12ch;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

/* The white pill button on the CTA cell. */
.region__cta-button {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--story-white);
  color: var(--story-ink);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 300ms var(--ease-out);
}

/* CTA hover: zoom + brighten the photo. */
.region__logo--cta a:hover .region__cta-media img,
.region__logo--cta a:focus-visible .region__cta-media img {
  transform: scale(1.06);
  opacity: 0.6;
}

/* CTA hover: lift the pill button. */
.region__logo--cta a:hover .region__cta-button,
.region__logo--cta a:focus-visible .region__cta-button {
  transform: translateY(-2px);
}

/* Focus ring on the CTA cell. */
.region__logo--cta a:focus-visible {
  outline: 3px solid var(--story-gold);
  outline-offset: -3px;
}

/* The secondary (smaller) logo group below the main one. */
.region__secondary {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

/* Uppercase group titles above each logo group. */
.region__group-title,
.region__secondary-title {
  margin: 0 0 1.5rem;
  color: var(--story-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 12-column grid so 6-per-row + a centred 5 can be placed exactly. */
.region__secondary-logos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

/* Each secondary logo cell spans 2 of the 12 columns. */
.region__secondary-logo {
  display: grid;
  grid-column: span 2;
  place-items: center;
  aspect-ratio: 1;
  background: var(--story-white);
  box-shadow: inset 0 0 0 1px var(--story-line);
}

.region__secondary-logo:hover,
.region__secondary-logo:focus-within {
  position: relative;
  z-index: 2;
}

/* The link fills the secondary cell (padding on the child = edge-to-edge click). */
.region__secondary-logo > a {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: clamp(0.35rem, 1vw, 0.8rem);
}

.region__secondary-logo > a:focus-visible {
  outline: 3px solid var(--story-gold);
  outline-offset: -3px;
}

.region__secondary-logo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.region__secondary-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 380ms var(--ease-pop);
}

.region__secondary-logo > a:hover img,
.region__secondary-logo > a:focus-visible img {
  transform: scale(1.22);
}

/* Eleven marks form one complete row of six and a centred row of five. */
.region__secondary-logo:nth-child(7) { grid-row: 2; grid-column: 2 / span 2; }
.region__secondary-logo:nth-child(8) { grid-row: 2; grid-column: 4 / span 2; }
.region__secondary-logo:nth-child(9) { grid-row: 2; grid-column: 6 / span 2; }
.region__secondary-logo:nth-child(10) { grid-row: 2; grid-column: 8 / span 2; }
.region__secondary-logo:nth-child(11) { grid-row: 2; grid-column: 10 / span 2; }

/* --------------------------------------------------------------------------
   7. Close
   -------------------------------------------------------------------------- */

/* The closing section (light, with a top rule). */
.close {
  display: grid;
  align-items: center;
  padding: clamp(5rem, 12vw, 8.5rem) 0;
  color: var(--story-ink);
  background: var(--story-white);
  border-top: 1px solid var(--story-line);
}

.close__body h2 {
  max-width: 16ch;
}

.close__body p {
  max-width: 40ch;
  margin: 1.5rem 0 2.75rem;
  color: var(--story-muted);
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   A more active editorial rhythm

   Inspired by the energy of the best community-led conference sites, but
   translated into RMETA's existing CU Boulder system. These treatments do
   not add a new section or alter the approved grid. They make arrival,
   progress, active state, and touch response easier to feel.
   -------------------------------------------------------------------------- */

/* The opening arrives as a hierarchy rather than one block. Nothing is
   hidden unless the enhancement script has successfully initialized. */
body.is-home-enhanced .opening__eyebrow,
body.is-home-enhanced .opening__link,
body.is-home-enhanced .opening__details {
  opacity: 0.001;
}

body.is-home-enhanced .opening h1 > span {
  display: inline-block;
  opacity: 0.001;
  filter: blur(10px);
  transform: translate3d(0, 10px, 0);
}

body.is-home-enhanced .opening__eyebrow,
body.is-home-enhanced .opening__link {
  transform: translate3d(0, 2rem, 0);
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
}

body.is-home-enhanced .opening__details {
  transform: translate3d(0, 2rem, 0);
  transition: opacity 700ms var(--ease-out), transform 850ms var(--ease-out);
}

body.is-home-entered .opening__eyebrow,
body.is-home-entered .opening__link,
body.is-home-entered .opening__details {
  clip-path: inset(0);
  filter: none;
  opacity: 1;
  transform: none;
}

body.is-home-entered .opening h1 > span {
  filter: blur(0);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* This must be a keyframe instead of a class-to-class transition. Browsers
   can paint the first page frame and its final state together, which makes a
   transition invisible. A new animation always starts when home.js marks the
   opening as entered. */
@keyframes opening-heading-word {
  from {
    opacity: 0.001;
    filter: blur(10px);
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.is-home-entered .opening h1 > span {
    animation: opening-heading-word 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Matches the SMBash sponsors headline: each word blurs up from below with
     a smooth ease, staggered so the words flow in just behind one another
     rather than snapping. With only two words, a short stagger reads the same
     way theirs does across a full sentence.
     These selectors must stay as specific as the `animation` shorthand above,
     or that shorthand resets the delay back to zero and both words land
     together. */
  body.is-home-entered .opening h1 > span.opening__name { animation-delay: 0ms; }
  body.is-home-entered .opening h1 > span.opening__year { animation-delay: 420ms; }
}

body.is-home-entered .opening__link { transition-delay: 210ms; }
body.is-home-entered .opening__details { transition-delay: 280ms; }

/* Each chapter earns one small gold cue when it becomes current. The cue is
   informational, while the headline itself remains still and readable. */
.day__head h2,
.stand__head h2,
.tracks__head h2,
.region__head h2 {
  position: relative;
  padding-bottom: 0.35em;
}

.day__head h2::after,
.stand__head h2::after,
.tracks__head h2::after,
.region__head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(3rem, 7vw, 5.5rem);
  height: 3px;
  background: var(--story-gold);
  transform: scaleX(0.28);
  transform-origin: left center;
  opacity: 0.52;
  transition: transform 520ms var(--ease-out), opacity 320ms var(--ease-out);
}

.day.is-home-current .day__head h2::after,
.stand.is-home-current .stand__head h2::after,
.tracks.is-home-current .tracks__head h2::after,
.region.is-home-current .region__head h2::after {
  opacity: 1;
  transform: scaleX(1);
}

.argument__step h3,
.argument__step p {
  transition: transform 500ms var(--ease-out), color 320ms var(--ease-out);
}

.argument__step.is-active h3,
.argument__step.is-active p {
  transform: translateX(0.35rem);
}

/* Photographs respond as one surface: image depth plus a short gold edge.
   The edge also appears when the mobile observer marks a story as present. */
/* Position context for the gold edge below. */
.day__item figure {
  position: relative;
}

/* A gold bar under each day photo, collapsed until hover/present. */
.day__item figure::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  pointer-events: none;
  background: var(--story-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

/* Grow the gold bar on hover, focus, or when the mobile observer marks it present. */
.day__item:hover figure::after,
.day__item:focus-within figure::after,
.day__item.is-mobile-present figure::after {
  transform: scaleX(1);
}

/* Photo depth on hover. */
.day__item:hover img,
.day__item:focus-within img {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.045);
}

/* The "stand" section tab buttons: touch target, lift on hover, press-in on tap. */
.stand__tabs button {
  min-height: 44px;
  touch-action: manipulation;
  transition:
    color 240ms var(--ease-out),
    border-color 240ms var(--ease-out),
    background 240ms var(--ease-out),
    transform 180ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.stand__tabs button:hover,
.stand__tabs button:focus-visible {
  transform: translateY(-2px);
}

/* Selected tab gets a shadow. */
.stand__tabs button[aria-selected="true"] {
  box-shadow: 0 0.55rem 1.5rem rgba(0, 0, 0, 0.22);
}

/* Press feedback. */
.stand__tabs button:active {
  transform: scale(0.975);
}

/* The stand section's image, with a gentle zoom while the section is current. */
.stand__media img {
  transition: transform 700ms var(--ease-out), filter 320ms var(--ease-out);
}

.stand.is-home-current .stand__media img {
  transform: scale(1.015);
}

/* While a tab change is animating (is-changing), slide image + content out. */
.stand__panel.is-changing .stand__media {
  opacity: 0;
  transform: translate3d(-2rem, 0, 0) scale(0.96);
}

.stand__panel.is-changing .stand__content {
  opacity: 0;
  transform: translate3d(2rem, 0, 0);
}

/* Track list items start dimmed/shifted and animate in when the section
   becomes current (staggered by the nth-child delays below). */
.tracks .track__list li {
  opacity: 0.38;
  transform: translate3d(-1rem, 0, 0);
  transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
}

.tracks.is-home-current .track__list li {
  opacity: 1;
  transform: none;
}

.tracks.is-home-current .track__list li:nth-child(2) { transition-delay: 70ms; }
.tracks.is-home-current .track__list li:nth-child(3) { transition-delay: 140ms; }
.tracks.is-home-current .track__list li:nth-child(4) { transition-delay: 210ms; }
.tracks.is-home-current .track__list li:nth-child(5) { transition-delay: 280ms; }

/* Logo tiles: base transition. */
.region__logo,
.region__secondary-logo {
  transition: background 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

/* Logo reveal: home.js adds is-logo-motion-ready to hide tiles, sets a
   --tile-order stagger, then adds is-logo-in per tile as it scrolls in. */
body.is-logo-motion-ready .region__logo,
body.is-logo-motion-ready .region__secondary-logo {
  opacity: 0.001;
  transform: translate3d(0, 1.5rem, 0) scale(0.88);
  transition:
    opacity 480ms var(--ease-out),
    transform 620ms var(--ease-out),
    background 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
  transition-delay: calc(var(--tile-order, 0) * 55ms);
}

/* Revealed tile. */
body.is-logo-motion-ready .region__logo.is-logo-in,
body.is-logo-motion-ready .region__secondary-logo.is-logo-in {
  opacity: 1;
  transform: none;
}


/* Homepage CTA buttons: lift on hover, press-in on tap. */
body[data-page="overview"] .cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
  transition:
    background 260ms var(--ease-out),
    color 260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    transform 180ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
}

body[data-page="overview"] .cta:hover,
body[data-page="overview"] .cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.24);
}

body[data-page="overview"] .cta:active {
  transform: scale(0.98);
}

/* Desktop parallax: home.js sets --scene-y / --scene-scale from scroll so the
   hero frame drifts and scales slightly as you scroll. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .opening__frame {
    transform:
      translate3d(0, var(--scene-y, 0rem), 0)
      scale(var(--scene-scale, 1.015));
    transform-origin: center center;
    will-change: transform;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Two across on tablet keeps each conversation card large enough to read
   before the row collapses to a single column on phones. */
@media (max-width: 900px) {
  .day__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Stacked, the dividing rule has to turn from vertical to horizontal. */
  .tracks__split {
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 6vw, 3rem);
  }

  .track + .track {
    margin-left: 0;
    padding-top: clamp(2.25rem, 6vw, 3rem);
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--story-line);
  }

  .region__secondary-logos {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .region__secondary-logo,
  .region__secondary-logo:nth-child(n) {
    grid-row: auto;
    grid-column: span 2;
  }

  .region__secondary-logo:nth-child(9) { grid-row: 3; grid-column: 2 / span 2; }
  .region__secondary-logo:nth-child(10) { grid-row: 3; grid-column: 4 / span 2; }
  .region__secondary-logo:nth-child(11) { grid-row: 3; grid-column: 6 / span 2; }
}

@media (max-width: 760px) {
  .opening {
    min-height: 92vh;
    min-height: 92svh;
  }

  .opening__frame img,
  .opening__frame video {
    object-position: center 38%;
  }

  /* Center the headline and lede in the space above the details bar instead
     of letting it all sit at the bottom, which left a large gap up top. The
     auto margins split the free space evenly above and below the copy while
     the details bar stays pinned to the bottom. */
  .opening__body {
    margin-block: auto;
  }

  .opening__details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 0.25rem;
    text-align: center;
    font-size: clamp(0.7rem, 2.8vw, 0.82rem);
  }

  .opening__details li:nth-child(2),
  .opening__details li:last-child {
    text-align: center;
  }

  .day__grid {
    grid-template-columns: 1fr;
  }

  .day__item--lead,
  .day__item--mid,
  .day__item--last {
    grid-column: 1 / -1;
  }

  .day__item--mid figure {
    aspect-ratio: 4 / 3;
  }

  .stand__tabs button {
    flex: 1 1 auto;
  }

  /* Two across keeps each mark large enough to read on a phone.
     Eight cells still divide exactly. */
  .region__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .region__secondary-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .region__secondary-logo,
  .region__secondary-logo:nth-child(n) {
    grid-row: auto;
    grid-column: span 1;
  }

  .region__secondary-logo:last-child {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .opening h1 {
    flex-direction: row;
    align-items: baseline;
    gap: 0.14em;
    font-size: clamp(2.8rem, 14vw, 4.75rem);
    line-height: 0.82;
    white-space: nowrap;
  }

  .opening__eyebrow {
    max-width: 100%;
    font-size: 0.66rem;
    letter-spacing: 0.045em;
    line-height: 1.3;
  }

  .opening__detail--date {
    font-size: clamp(1.7rem, 9vw, 2.4rem);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — remove movement, keep every state change legible.
   -------------------------------------------------------------------------- */

/* The phone composition stays stacked. Motion supplies progression, current
   state, and touch response without changing the approved layout. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @keyframes mobile-opening-arrive {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
  }

  /* No "breathe" zoom on the frame here: the frame now holds the hero video,
     and continuously scaling a playing video resamples every frame, which
     reads as a shaky background. The aerial footage supplies its own motion. */
  body.is-mobile-story .opening__body {
    animation: mobile-opening-arrive 680ms var(--ease-out) both;
  }

  body.is-mobile-story .day__item,
  body.is-mobile-story .track {
    opacity: 0.72;
    transform: translateY(1rem);
    transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
  }

  body.is-mobile-story .day__item.is-mobile-present,
  body.is-mobile-story .track.is-mobile-present {
    opacity: 1;
    transform: none;
  }

  .stand__panel {
    touch-action: pan-y;
  }

  .stand__panel.is-touching {
    opacity: 0.9;
    transform: scale(0.99);
    transition: opacity 120ms ease-out, transform 120ms ease-out;
  }

  .cta:active,
  .quiet-link:active,
  .stand__tabs button:active {
    transform: scale(0.975);
  }

  .region__logo > a:active img,
  .region__secondary-logo > a:active img {
    transform: scale(1.14);
  }
}

/* Reduced motion: neutralise every homepage animation/transition, showing all
   content in its final resting state (no fades, parallax, staggers, or zooms). */
@media (prefers-reduced-motion: reduce) {
  body.is-home-enhanced .opening h1,
  body.is-home-enhanced .opening h1 > span,
  body.is-home-enhanced .opening__eyebrow,
  body.is-home-enhanced .opening__link,
  body.is-home-enhanced .opening__details {
    clip-path: none;
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tracks .track__list li,
  body.is-logo-motion-ready .region__logo,
  body.is-logo-motion-ready .region__secondary-logo {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .day__head h2::after,
  .stand__head h2::after,
  .tracks__head h2::after,
  .region__head h2::after,
  .day__item figure::after {
    transition: none;
  }

  .argument__step {
    opacity: 1;
  }

  .argument__media img,
  .day__item img,
  .day__item:hover img,
  .region__logo img,
  .region__logo > a:hover img,
  .region__logo > a:focus-visible img,
  .region__secondary-logo img,
  .region__secondary-logo > a:hover img,
  .region__secondary-logo > a:focus-visible img,
  .cta:hover .cta__mark,
  .quiet-link:hover span {
    transform: none;
    transition: none;
  }

  .argument__media.is-swapping img,
  .stand__panel.is-changing > * {
    opacity: 1;
    transform: none;
  }

  .argument__step h3,
  .argument__step p,
  .stand__tabs button,
  .stand__media img,
  body[data-page="overview"] .cta {
    transform: none;
    transition: none;
  }
}