/* ============================================================
   MUSINSE MOOYA MEDIA KIT | STYLES
   Editorial wine and cream. Mobile first.
   You should not need to edit this file. All content lives in
   config/config.js.
   ============================================================ */

:root {
  --cream: #f6f1e8;
  --cream-deep: #efe7d9;
  --wine: #5c1220;
  --wine-deep: #430b17;
  --wine-soft: #7a2433;
  --ink: #2b2118;
  --gold: #b08d4f;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* ============================================================
   0. LOADING SCREEN
   Covers the page until the hero is playing and every photo and
   still frame has finished, then fades away to reveal it all at
   once. Scrolling is locked underneath so you cannot race past
   content that has not arrived yet.
   ============================================================ */

body.loading { overflow: hidden; height: 100vh; }

#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--wine-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.7s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; padding: 2rem; }
.loader-name {
  font-family: var(--serif);
  font-weight: 800;
  color: var(--cream);
  font-size: clamp(1.9rem, 6vw, 3rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.loader-label {
  margin-top: 0.6rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.loader-bar {
  margin: 1.8rem auto 0;
  width: min(190px, 52vw);
  height: 2px;
  background: rgba(246,241,232,0.18);
  overflow: hidden;
  position: relative;
}
.loader-bar i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--gold);
  transform: translateX(-100%);
  animation: loaderSlide 1.35s ease-in-out infinite;
}
@keyframes loaderSlide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-bar i { animation: none; transform: translateX(0); opacity: 0.7; }
}

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

.section-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.section-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  color: var(--wine);
}

.section-pad {
  padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 5rem);
}

/* ---------- scroll fade-up (once, via IntersectionObserver) ---------- */

.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.in { opacity: 1; transform: translateY(0); }

/* ---------- stat number zoom settle ---------- */

.stat-num {
  display: inline-block;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}
.stat-num.in { opacity: 1; transform: scale(1); }

/* ---------- media placeholders ----------
   Styled labelled blocks shown until real files are dropped in.
   When a real file loads, it sits on top and the block hides. */

.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(176,141,79,0.10) 0%, rgba(92,18,32,0.08) 100%),
    var(--cream-deep);
  border: none;
}
/* While media is loading, the block is a clean solid color with
   NO placeholder text or icons. The label and file path only
   appear if a file is genuinely missing (.show-ph is added by
   the script when a file fails to load), so you know exactly
   which file to drop in and where. */
.ph .ph-icon, .ph .ph-label, .ph .ph-path { opacity: 0; }
.ph.show-ph { border: 1px solid rgba(92,18,32,0.18); }
.ph.show-ph .ph-icon { opacity: 0.55; }
.ph.show-ph .ph-label { opacity: 0.75; }
.ph.show-ph .ph-path { opacity: 0.5; }

/* never show a native play button overlay on any platform;
   deliberately narrow selectors so the video frame and poster
   are never affected */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
}
.ph .ph-icon {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--wine);
  opacity: 0.55;
}
.ph .ph-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wine);
  opacity: 0.75;
}
.ph .ph-path {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.5;
  word-break: break-all;
}
.ph.ph-dark {
  background:
    linear-gradient(135deg, rgba(176,141,79,0.14) 0%, rgba(0,0,0,0.25) 100%),
    var(--wine-deep);
}
.ph.ph-dark .ph-icon, .ph.ph-dark .ph-label { color: var(--cream); }
.ph.ph-dark .ph-path { color: var(--cream); }
.ph.ph-dark.show-ph .ph-path { opacity: 0.45; }

.media-slot { position: relative; overflow: hidden; }
.media-slot > img.real,
.media-slot > video.real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
/* Opaque first-frame cover that sits ABOVE the video and hides
   iOS Low Power Mode's non-removable system play button. It is the
   real first frame of the clip and fades away the moment the video
   is actually playing. */
.media-slot > img.poster-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.media-slot.playing > img.poster-cover { opacity: 0; }
/* The video stays fully invisible until it is genuinely playing.
   An invisible element cannot render iOS's native play button, so
   no button ever appears whether or not autoplay is allowed. The
   first-frame cover above shows the still in the meantime. */
.media-slot > video.real { opacity: 0; transition: opacity 0.3s ease; }
.media-slot.playing > video.real { opacity: 1; }

/* ============================================================
   1. HERO
   ============================================================ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--wine-deep);
}
.hero .media-slot { position: absolute; inset: 0; }
.hero .ph { border: none; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, rgba(30,5,11,0.62) 0%, rgba(30,5,11,0.30) 55%, rgba(30,5,11,0.05) 100%);
  pointer-events: none;
}
.hero-inner {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 0 clamp(1.5rem, 7vw, 7rem);
}
.hero-text { max-width: 620px; }
.hero-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.hero-name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  line-height: 1.02;
  color: var(--cream);
}
.hero-tagline {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  color: var(--cream);
  opacity: 0.92;
  max-width: 460px;
}
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: var(--cream);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}
.hero-scroll-hint.wait {
  opacity: 0.4;
  animation: hero-hint-pulse 1.4s ease-in-out infinite;
}
@keyframes hero-hint-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.55; }
}

/* ============================================================
   2. HERO STATS BAR  (full bleed, zero gap, edge to edge)
   ============================================================ */

.stats-band { width: 100%; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
}
.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  /* never let a tile grow taller than most of the screen */
  max-height: 72vh;
  overflow: hidden;
}
.tile-stat {
  background: var(--wine);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.2rem, 2.5vw, 2.4rem);
}
.tile-stat.alt { background: var(--wine-deep); }
.tile-stat .stat-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.tile-stat .stat-value {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1;
  color: var(--cream);
}
.tile-stat .stat-caption {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.35rem;
}
.tile-stat .stat-row + .stat-row { margin-top: 1.3rem; }

/* ---------- photo wipe tiles ----------
   Two stacked layers. Layer B is revealed left to right on
   scroll down, hidden right to left on scroll up. State holds
   until scroll direction actually changes while in view. */

.tile-wipe .wipe-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tile-wipe .wipe-layer.b {
  z-index: 3;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s ease-out;
}
.tile-wipe.wiped .wipe-layer.b { clip-path: inset(0 0 0 0); }
.tile-wipe .wipe-layer .ph { border: none; }
.tile-wipe .wipe-layer img.real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* ============================================================
   3. ABOUT  (big photo left, copy right)
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cream);
}
.about-photo {
  position: relative;
  min-height: 72vh;
}
/* the media slot must fill its frame, otherwise it collapses */
.about-photo > .media-slot {
  position: absolute;
  inset: 0;
}
.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.about-copy h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  color: var(--wine);
  line-height: 1.05;
}
.about-copy .about-sub {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.9rem 0 1.8rem;
}
.about-copy p {
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  font-weight: 300;
  line-height: 1.85;
  max-width: 560px;
}
.about-copy p + p { margin-top: 1.2rem; }

/* ============================================================
   4. PILLARS
   ============================================================ */

.pillars { background: var(--cream); }
.pillar { margin-top: clamp(3rem, 6vw, 5rem); }
.pillar-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem; }
.pillar-head h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--wine);
}
.pillar-series {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.pillar-blurb {
  margin-top: 0.7rem;
  max-width: 640px;
  font-weight: 300;
  font-size: 0.98rem;
}
.pillar-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
  /* centered; JS sets max-width from the number of visible
     videos so there is no lopsided empty space */
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
}
.pillar-videos .media-slot {
  aspect-ratio: 9 / 16;
  max-height: 74vh;
  background: var(--wine-deep);
  cursor: pointer;
}
/* if a tile is height-capped, letterbox instead of cropping */
.pillar-videos video.real { object-fit: contain; background: #23060d; }
.pillar-videos .poster-cover { object-fit: contain; background: #23060d; }

/* click to unmute hint */
.sound-hint {
  position: absolute;
  z-index: 5;
  bottom: 0.8rem;
  left: 0.8rem;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(67,11,23,0.78);
  padding: 0.42rem 0.7rem;
  pointer-events: none;
}

/* ============================================================
   5. YOUTUBE SPOTLIGHT
   ============================================================ */

.yt { background: var(--wine-deep); color: var(--cream); }
.yt .section-title { color: var(--cream); }
.yt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.2rem;
  /* keep the spotlight video a sane size on wide screens */
  max-width: 1440px;
}
.yt-video {
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
.yt-stills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.yt-stills .media-slot { aspect-ratio: 16 / 9; }
.yt-blurb p {
  font-weight: 300;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.9;
  opacity: 0.94;
}
.yt-blurb p + p { margin-top: 1.15rem; }

/* ============================================================
   6. PARTNERSHIPS
   ============================================================ */

.partners { background: var(--cream); }
.partners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 2.4rem;
}
.partner-card {
  background: #fffdf8;
  border: 1px solid rgba(92,18,32,0.14);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.partner-logo {
  height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.partner-logo .partner-img {
  max-height: 60px;
  max-width: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner-card h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--wine);
}
.partner-card p { font-weight: 300; font-size: 0.92rem; }

/* ============================================================
   7. AUDIENCE  (full bleed, zero gap)
   ============================================================ */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
}
.tile-audience {
  aspect-ratio: 1 / 1;
  padding: clamp(1.2rem, 2.2vw, 2.2rem);
}
.tile-audience .stat-value { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.tile-audience .stat-row + .stat-row { margin-top: 0.95rem; }

.audience-head { text-align: left; }

/* ============================================================
   8. SPORTS PHOTOGRAPHY GALLERY
   ============================================================ */

.gallery { background: var(--cream); }
.gallery-intro { max-width: 620px; font-weight: 300; margin-top: 0.9rem; }
/* Sports photography: ALWAYS 3 photos per row on desktop and
   tablet (2 rows of 3 with six photos), 1 per row on mobile. */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  max-width: 1500px;
  margin: 2.6rem auto 0;
}
.gallery-grid .media-slot {
  aspect-ratio: 4 / 5;
  max-height: 78vh;
}

/* ============================================================
   9. CONTACT
   ============================================================ */

.contact {
  background: var(--wine-deep);
  color: var(--cream);
  text-align: center;
}
.contact .section-title { color: var(--cream); }
.contact-line { font-weight: 300; margin-top: 1rem; opacity: 0.92; }
.contact-email {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.3rem;
}
.contact-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2.4rem;
  margin-top: 2.4rem;
}
.contact-socials a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}
.contact-socials a:hover { color: var(--gold); opacity: 1; }
.contact-footer {
  margin-top: 3.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ============================================================
   TABLET AND UP
   ============================================================ */

@media (min-width: 700px) {
  .pillar-videos { grid-template-columns: repeat(var(--pv-cols, 3), 1fr); }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* Both full-bleed stat grids are two rows tall. Cap each row
     so the whole grid always fits on one screen, on any monitor.
     Tiles stay square until the viewport is short, then shrink. */
  .stats-grid { grid-auto-rows: min(46vh, 25vw); }
  .audience-grid { grid-auto-rows: min(44vh, 33.34vw); }
  .stats-grid > .tile, .audience-grid > .tile,
  .stats-grid > .tile-stat, .audience-grid > .tile-audience {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
  }
}

@media (min-width: 980px) {
  /* Bigger hero photo: photo dominates the left half and runs
     the full height of the screen */
  .about { grid-template-columns: 1.5fr 1fr; }
  .about-photo { min-height: 100vh; }

  .yt-grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .partners-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   MOBILE STACKING  (single column, same alternating order)
   ============================================================ */

@media (max-width: 699px) {
  .stats-grid, .audience-grid { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 3; max-height: none; }
  .tile-stat, .tile-audience { aspect-ratio: auto; min-height: 200px; }
  .gallery-grid { grid-template-columns: 1fr; }
  /* keep stacked 9:16 videos phone-sized, centered */
  .pillar-videos { justify-items: center; }
  .pillar-videos .media-slot { width: 100%; max-width: 340px; max-height: none; }
  .yt-stills { grid-template-columns: 1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .stat-num, .tile-wipe .wipe-layer.b { transition: none; }
  .fade-up, .stat-num { opacity: 1; transform: none; }
}