/* Foxhole Social — "Our Story" page. Page-specific styles only.
   Reuses shared design tokens (--ink, --accent, --paper, etc.), .section/
   .section--alt, .eyebrow, .section-head, .btn, and .wrap from
   foxhole-home.css (loaded first) rather than redefining them here.
   Nothing in this file is referenced by any other page. */

/* ---------- Scroll-reveal (progressive enhancement; see our-story.js) ---------- */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
body.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}
body.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero ----------
   Two-column intro, matching the progression sections below it: reuses
   .story-chapter__wrap directly (same grid/gap/breakpoint) so this
   stays in lockstep with the chapter layout rather than drifting from
   it. Text column uses the same .lorem paragraph class the chapters
   use, so real copy can replace the placeholder line with no markup
   change later. */
.story-hero {
  padding: 88px 0 32px;
}
.story-hero__copy h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-top: 6px;
}
/* .story-hero__media itself needs no width rule -- the shared 1fr/1fr
   chapter grid already lands this column at roughly 500-600px within
   the page's normal content width, matching the requested photo size
   without a separate hardcoded breakpoint to maintain. */

/* Hero photo: no fixed aspect-ratio, no cropping -- the frame's height
   adapts to the image's own natural proportions (width fills the
   column, height follows automatically) so the complete photo is
   always visible regardless of its orientation. Overrides .story-shot
   img's default width:100%/height:100%/object-fit:cover (which is
   correct for the fixed-aspect-ratio frames elsewhere on this page,
   but would crop a photo whose ratio doesn't match a preset frame). */
.story-shot.story-hero__shot img {
  height: auto;
  object-fit: contain;
}
.story-hero__cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  animation: storyBob 2.2s ease-in-out infinite;
}
@keyframes storyBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------- Connector rail (decorative, hero -> chapter 1) ---------- */
.story-rail {
  width: 2px;
  height: 90px;
  margin: 0 auto;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.story-rail__fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: var(--accent);
  transition: height 1.1s ease;
}

/* ---------- Story markers (timeline milestone pills) ---------- */
.story-marker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.story-marker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.lorem { color: var(--ink-soft); font-size: 16px; margin-top: 14px; }
.lorem:first-of-type { margin-top: 18px; }

/* ---------- Chapters (alternating text/image) ---------- */
.story-chapter__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.story-chapter__wrap--reverse { direction: rtl; }
.story-chapter__wrap--reverse > * { direction: ltr; }

.story-chapter__copy h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.story-chapter__copy--center {
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}
.story-hero__copy p,
.story-chapter__copy p {
    margin: 0;
}

.story-hero__copy p + p,
.story-chapter__copy p + p {
    margin-top: 16px;
}
.story-chapter__copy--center .story-marker { margin-left: auto; margin-right: auto; }

/* ---------- Reusable image frame (page-local, distinct from homepage .shot) ---------- */
.story-shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: var(--paper-alt);
}
.story-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-shot--169 { aspect-ratio: 16 / 9; }
.story-shot--43  { aspect-ratio: 4 / 3; }
.story-shot--portrait  { aspect-ratio: 3 / 4; max-width: 420px; margin: 0 auto; }
.story-shot--landscape { aspect-ratio: 4 / 3; }
.story-shot--wide      { aspect-ratio: 32 / 19; }
/* Chapter 6 only -- image6.webp's real natural size is 1920x1200 (8:5),
   not 16:9 and not 4:3. Matching the frame's aspect-ratio to the image's
   own exactly means the existing "object-fit:cover" above (line 155)
   never has anything to crop -- cover and contain produce an identical,
   full, uncropped, undistorted result once the box ratio equals the
   image ratio, so no per-image object-fit override is needed either. */
.story-shot--85 { aspect-ratio: 8 / 5; }

.story-shot__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 26, 46, 0.72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}
.story-shot__tag--now { background: var(--accent); }

/* ---------- Milestone grid ---------- */
.story-milestone-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.story-milestone {
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.story-milestone-note {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}

/* ---------- Today: big stat callouts ---------- */
.story-stat-row {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.story-stat { text-align: center; }
.story-stat__num {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 60px);
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.story-stat__label {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.story-today__media {
  max-width: 920px;
  margin: 48px auto 0;
}
/* .story-stat-row/.story-stat/.story-today__media above are no longer
   referenced by any markup on this page (the "Foxhole Social Today"
   stats section they belonged to was replaced by the archive video
   grid below) -- left in place rather than removed, since deleting
   unused CSS wasn't part of the requested change. */

/* ---------- From The Archives: video evolution grid ----------
   Three chronological YouTube embeds replacing the old stats section,
   in the same section/section--alt slot so the page's alternating
   background rhythm is unaffected. Reuses .story-shot's own frame
   language (border-radius/border/shadow/background tokens) rather than
   duplicating new values, so the cards read as part of the same design
   system as every other image frame on this page. */
.story-archive-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.story-video-card {
  display: flex;
  flex-direction: column;
}

/* aspect-ratio (not the old padding-bottom-percentage trick) keeps a
   16:9 box reserved before the iframe loads -- same technique already
   used by .story-shot--169 elsewhere on this page -- so lazy-loaded
   embeds never cause layout shift while they load in. */
.story-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: var(--paper-alt);
}
.story-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Progression badge (01/02/03) -- same visual language as
   .story-shot__tag elsewhere on this page (same background/blur/color),
   just positioned top-left instead of bottom-left so it doesn't read as
   the same kind of "location tag" label. pointer-events:none so it
   never blocks clicking through to the player underneath. */
.story-video-index {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(20, 26, 46, 0.72);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.story-video-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Click-to-load facade: the real YouTube iframe is never created until the
   visitor clicks, so no player-configuration error can ever render on a
   fresh page load. The facade fills the same 16:9 box the iframe uses once
   loaded (.story-video-embed iframe, below), so swapping one for the other
   causes no layout shift. */
.story-video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: var(--ink);
  cursor: pointer;
  display: block;
  font: inherit;
}
.story-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(20, 26, 46, 0.72);
  backdrop-filter: blur(4px);
  transition: background-color 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.story-video-play svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  margin-left: 3px; /* optically center the triangle within the circle */
}
.story-video-facade:hover .story-video-play,
.story-video-facade:focus-visible .story-video-play {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.story-video-watch-link {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: none;
}
.story-video-watch-link:hover,
.story-video-watch-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Original games grid ---------- */
.story-games-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---------- Video placeholder band ---------- */
.story-video__inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.story-video__copy { flex: 0 0 300px; }
.story-video__copy p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.story-video__frame { flex: 1; min-width: 0; max-width: 640px; }

/* ---------- What's next ---------- */
.story-next-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.story-next-card h3 { margin-top: 18px; font-size: 19px; font-weight: 700; }
.story-next-card p { margin-top: 6px; font-size: 14px; color: var(--ink-faint); font-weight: 600; }

/* ---------- Ending ---------- */
.story-ending {
  padding: 96px 0 108px;
  background: var(--ink);
  text-align: center;
}
.story-ending__inner h2 {
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.3;
  max-width: 640px;
  margin: 0 auto;
}
.story-ending__inner .btn { margin-top: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .story-games-grid { grid-template-columns: repeat(2, 1fr); }
  .story-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .story-chapter__wrap { grid-template-columns: 1fr; gap: 36px; }
  .story-chapter__wrap--reverse { direction: ltr; }
  .story-milestone-grid { grid-template-columns: repeat(2, 1fr); }
  .story-stat-row { grid-template-columns: repeat(2, 1fr); }
  .story-next-grid { grid-template-columns: 1fr; }
  .story-video__inner { flex-direction: column; align-items: stretch; }
  .story-video__copy { flex: none; }
}

@media (max-width: 720px) {
  .story-hero { padding: 64px 0 40px; }
  .story-games-grid { grid-template-columns: 1fr; }
  .story-archive-grid { grid-template-columns: 1fr; }
  .story-milestone-grid { grid-template-columns: 1fr; }
  .story-shot--portrait { max-width: 320px; }
}