/* V12.1.5 — YSL-smooth, svh mobile, unique fonts, Dodgers LA, context pages with BACK & swipe */
/* Performance optimized with lazy loading and modern CSS features */

/* Unique title fonts */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Bodoni+Moda:opsz,wght@6..96,200;6..96,400&family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Work+Sans:wght@300;400;500&family=IBM+Plex+Sans+Condensed:wght@300;400;600&family=Inter:wght@300;400;500&display=swap');

:root{
  --bg:#0b0b0b; --fg:#eeeeee; --muted:#c9c9c9;
  --title: clamp(38px, 7.6vw, 112px);
  --sub: clamp(12px, 1.2vw, 16px);
  --gap: clamp(12px, 1.8vh, 18px);
  --press: 11px;
  --pressY: 14svh;
  --nudge: 3svh;
  --film: .08;
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, "Noto Sans", sans-serif;}

a{ color:inherit; text-decoration:none }

/* Nav — mobile visibility improvements */
.nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  max-width: min(94vw, 1200px); padding:0 10px;
}
.nav a{ color:#e0e0e0; text-decoration:none; opacity:.9 }
.nav a:hover{ opacity:1 }

/* Landing */
.landing{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#0c0c0c; cursor:pointer; text-align:center}
.wordmark{ letter-spacing:.08em; font-size:clamp(38px,7vw,110px); line-height:1; text-transform:uppercase }
.landing .sub{ margin-top:14px; font-size:12px; letter-spacing:.25em; color:#b9b9b9 }
.hint{ position:absolute; left:50%; bottom:7svh; transform:translateX(-50%); font-size:11px; letter-spacing:.3em; color:#9a9a9a; opacity:.85 }

/* Section hero */
.section{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden }
.media, .media img, .media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center }
.media img, .media video{ filter: contrast(1.03) saturate(1.03) brightness(.965) }
.section::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,210,150,var(--film)), rgba(0,0,0,0) 58%),
    linear-gradient(to bottom, rgba(255,210,150,calc(var(--film)*.9)) 0%, rgba(0,0,0,0) 55%);
  mix-blend-mode:soft-light; opacity:.72;
}

/* Title stack */
.stack{ position:relative; z-index:5; text-align:center; transform:translateY(var(--nudge)); max-width:min(92vw,1200px); margin-inline:auto }
.title{ margin:0; font-size:var(--title); line-height:.95; font-weight:350; letter-spacing:.02em; text-transform:uppercase }
.subtitle{ margin:var(--gap) 0 0; color:var(--muted); font-size:var(--sub); letter-spacing:.06em; line-height:1.5 }

/* Press */
.press{ position:absolute; left:50%; transform:translateX(-50%); bottom:var(--pressY); z-index:6; font-size:var(--press); letter-spacing:.2em; text-transform:uppercase }
.press a{ color:#d8d8d8; text-decoration:none } .press a:hover{ color:#fff }

/* Unique title fonts per page */
.is-about   .title{ font-family:'UnifrakturCook', serif; font-weight:700; letter-spacing:.01em; text-transform:none }
.is-story   .title{ font-family:'Bodoni Moda', serif; font-weight:200; letter-spacing:.02em }
.is-fit     .title{ font-family:'IBM Plex Sans Condensed', sans-serif; font-weight:600; letter-spacing:.08em }
.is-la      .title{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif; font-weight:400; letter-spacing:.12em }

.is-cchrst  .title{ font-family:'Work Sans', sans-serif; font-weight:400; letter-spacing:.10em }

/* Dodgers-style LA lockup (text spans) */
.is-la .title{ letter-spacing:.12em }
.is-la .la-lock{ display:inline-block; position:relative; width: clamp(52px, 7vw, 120px); height: 1.1em; vertical-align:baseline; margin-right:.14em }
.is-la .la-lock .L,
.is-la .la-lock .A{
  position:absolute; font: inherit; line-height:1; 
}
/* Tuned to Dodgers overlap: L sits slightly higher and left; A nudged down-right */
.is-la .la-lock .L{ left:0; top:-0.02em }
.is-la .la-lock .A{ left:0.34em; top:0.22em }
.is-la .word-makers{ display:inline-block; margin-left:.12em; letter-spacing:.06em }

/* Secondary (context) pages */
.context-wrap{ max-width:min(1000px,92vw); margin: 18svh auto 12svh; text-align:left }
.context-title{ text-align:center; margin:0 0 22px; font-size: clamp(24px,4.2vw,52px); letter-spacing:.1em }
.context-body{ font-size: clamp(14px, 1.4vw, 18px); line-height:1.65; color:#e3e3e3 }
.context-media{ display:grid; grid-template-columns: 1fr; gap:14px; margin: 24px auto 0 }
.context-media img, .context-media video{ width:100%; height:auto; object-fit:cover; display:block }
.context-back{ position:fixed; left:50%; bottom:7svh; transform:translateX(-50%); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#d8d8d8 }
.context-back:hover{ color:#fff }

/* Mobile */
@media (max-width: 900px){
  .nav{ gap:14px; font-size:11px }
  .subtitle{ font-size: clamp(12px, 3vw, 14px) }
  .context-wrap{ margin-top: 16svh }
}

/* LES TIEN hero title — refined to match reference while preserving layout sizing */
.is-les .section .title{
  font-family: "Avenir Next", "Neue Haas Grotesk Text", "Helvetica Neue", Inter, Helvetica, Arial, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
/* Fullscreen background video */
#bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;           /* pushes video behind text */
  pointer-events: none;  /* stops video from blocking clicks */
}

/* Dark overlay for legibility */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* tweak opacity for brightness */
  z-index: 0;
}

/* Make sure text sits above */
.main-content {
  position: relative;
  z-index: 1;
  color: #fff; /* white text for clarity */
  text-align: center;
  top: 40vh; /* adjust vertical placement */
}/* Hero text layer above everything */
.hero {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;           /* ensures it's above video (-1) and overlay (0) */
  color: #fff;
  text-align: center;
  pointer-events: none; /* keeps video/clicks working */
}

.hero .wordmark {
  font-size: clamp(24px, 4vw, 60px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero .sub {
  margin-top: 1rem;
  font-size: clamp(14px, 2vw, 20px);
  opacity: 0.9;
}/* ===== HERO OVERRIDES (put at very end of styles.css) ===== */

/* video + overlay z-order */
#bg-video{ z-index:-1 !important; }
body::before{ z-index:0 !important; }

/* hero text layer */
#landing.hero,
.hero{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999 !important;        /* sits on top of everything */
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
}

/* headline + subhead */
#landing.hero .wordmark,
.hero .wordmark{
  color: #fff !important;
  font-size: clamp(26px, 4vw, 64px);
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.05;
  transform: none !important;       /* cancel any old transforms */
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

#landing.hero .sub,
.hero .sub{
  margin-top: 1rem;
  color: #fff !important;
  font-size: clamp(14px, 2vw, 20px);
  opacity: .9 !important;
}

.is-story .title {
  font-family: 'UnifrakturCook', cursive; /* same as homepage import */
  color: #fff;
  font-size: clamp(26px, 4vw, 64px);
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.05;
}

/* ===== PRODUCTION ENHANCEMENTS: Smooth Page Transitions ===== */
body {
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-out;
}

/* Enhanced page loading states */
.page-loading {
  opacity: 0.8;
  transform: translateY(10px);
}

/* Smooth section transitions */
.section {
  transition: opacity 0.3s ease-in-out;
}

/* Enhanced navigation feedback */
.nav a {
  transition: all 0.2s ease-in-out;
  position: relative;
}

.nav a:hover {
  transform: translateY(-2px);
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s ease-in-out;
}

.nav a:hover::after {
  width: 100%;
}

/* Smooth video loading */
.media video {
  transition: opacity 0.5s ease-in-out;
}

/* Enhanced text animations */
.title {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Enhanced touch feedback */
@media (hover: none) {
  .nav a:active {
    transform: scale(0.95);
  }
}