/* ══════════════════════════════════════════════════════════════════
   LevelLandlord — Cinematic uplift
   Video hero · scroll-story slideshow · section media · page headers
   Vanilla CSS. Reuses the brand tokens defined in style.css.
   ══════════════════════════════════════════════════════════════════ */

/* ───────────── Cinematic video hero ───────────── */
.hero-cinema {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  text-align: center;
  background: var(--midnight);   /* last-resort fallback if poster also fails */
  overflow: hidden;
  padding: 104px 5vw 88px;
}
/* Base layer: the poster still (always present, sits behind the video) */
.hero-cinema .hero-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
@keyframes llKenBurns {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.16) translate(-1.6%, -1.4%); }
}
.hero-cinema .hero-still.kenburns { animation: llKenBurns 26s ease-out forwards; }
/* Video layer sits on top of the still and covers it while playing */
.hero-cinema .hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Navy scrim for legibility of cream text */
.hero-cinema .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,31,53,0.74) 0%, rgba(15,31,53,0.48) 38%, rgba(15,31,53,0.80) 100%),
    radial-gradient(ellipse 75% 65% at 50% 42%, rgba(15,31,53,0.22) 0%, rgba(15,31,53,0.66) 100%);
}
/* Faint film grain */
.hero-cinema .hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-cinema .hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }

/* Scroll cue */
.hero-scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248,246,241,0.55);
}
.hero-scroll::after {
  content: ''; width: 1.5px; height: 28px; border-radius: 2px;
  background: linear-gradient(rgba(240,184,74,0.95), rgba(240,184,74,0));
  animation: llScrollPulse 1.9s ease-in-out infinite;
}
@keyframes llScrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);    transform-origin: top; }
}

/* ───────────── Scroll-story slideshow ───────────── */
.llstory { position: relative; background: var(--midnight); }

/* Background layers shared by both modes */
.llstory__still,
.llstory__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.llstory__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(15,31,53,0.90) 0%, rgba(15,31,53,0.42) 46%, rgba(15,31,53,0.66) 100%);
}
.llstory__inner {
  position: relative; z-index: 2; width: 100%;
  max-width: 1080px; margin: 0 auto; padding: 0 5vw;
}
.llstory__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 18px;
}
.llstory__line {
  font-family: var(--font-display);
  color: var(--cream); font-weight: 700;
  font-size: clamp(1.55rem, 4.4vw, 3rem);
  line-height: 1.16; letter-spacing: -0.02em;
  max-width: 46rem; text-shadow: 0 2px 22px rgba(0,0,0,0.5);
}

/* Stacked mode (mobile / reduced-motion / no-JS) — this is the default markup */
.llstory__panel {
  position: relative; min-height: 66vh;
  display: flex; align-items: center; overflow: hidden;
}
.llstory__panel .llstory__inner { padding-top: 3rem; padding-bottom: 3rem; }
.llstory__end {
  text-align: center; padding: 2.25rem 1rem 2.75rem; background: var(--midnight);
}

/* Pinned mode (desktop + motion) — JS adds .is-pinned and builds the sticky stage */
.llstory.is-pinned { /* height is set inline by JS = beats × 100vh */ }
.llstory.is-pinned .llstory__panels { display: none; }   /* hide the stacked source markup */
.llstory__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.llstory__beats { position: relative; min-height: 9rem; }
.llstory__beat {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.llstory__beat:first-child { position: relative; }
.llstory__beat.is-active { opacity: 1; transform: translateY(0); }
.llstory__dots { display: flex; gap: 9px; margin-top: 30px; }
.llstory__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(248,246,241,0.26); transition: background 0.3s, transform 0.3s;
}
.llstory__dot.is-active { background: var(--gold-lt); transform: scale(1.3); }
.llstory__cta {
  margin-top: 34px; opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
.llstory__cta.is-shown { opacity: 1; pointer-events: auto; }

/* ───────────── Section media (who-it's-for personas, generic frames) ───────────── */
.for-card__media {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 12px; overflow: hidden; margin-bottom: 20px;
  background: var(--midnight);
}
.for-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ll-media {
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--midnight); width: 100%;
}
.ll-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-media--wide { aspect-ratio: 16 / 9; }
.ll-media--ambient::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,31,53,0.35) 100%);
  pointer-events: none;
}

/* Two-up media + copy row (used on inner pages) */
.ll-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 860px) { .ll-split { grid-template-columns: 1fr; gap: 28px; } }

/* Device frame for real product screenshots (never AI UI) */
.ll-device {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #0c1726; border: 1px solid rgba(248,246,241,0.12);
  box-shadow: 0 24px 60px rgba(15,31,53,0.45);
}
.ll-device__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: rgba(248,246,241,0.04);
  border-bottom: 1px solid rgba(248,246,241,0.08);
}
.ll-device__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(248,246,241,0.22); display: block; }
.ll-device__shot { position: relative; aspect-ratio: 16 / 10; background: var(--midnight); }
.ll-device__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ll-device__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  color: rgba(248,246,241,0.5); font-size: 13px; line-height: 1.6;
}

/* ───────────── Compact cinematic header for inner pages ───────────── */
.page-hero-cinema {
  position: relative; min-height: 52vh;
  display: flex; align-items: flex-end; overflow: hidden;
  background: var(--midnight); padding: 96px 5vw 48px;
}
.page-hero-cinema .hero-still,
.page-hero-cinema .hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.page-hero-cinema .hero-still.kenburns { animation: llKenBurns 26s ease-out forwards; }
.page-hero-cinema .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,31,53,0.55) 0%, rgba(15,31,53,0.40) 45%, rgba(15,31,53,0.88) 100%);
}
.page-hero-cinema__inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; width: 100%; }
.page-hero-cinema__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 14px;
}
.page-hero-cinema__title {
  font-family: var(--font-display); color: var(--cream);
  font-size: clamp(1.9rem, 5vw, 3.2rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.025em; max-width: 18ch;
}
.page-hero-cinema__title span { color: var(--gold-lt); }
.page-hero-cinema__sub {
  font-size: 1.05rem; color: rgba(248,246,241,0.72);
  line-height: 1.7; max-width: 46rem; margin-top: 18px;
}

/* ───────────── Guide cards with imagery ───────────── */
.guide-card__media {
  position: relative; margin: -28px -24px 18px; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--midnight); border-radius: 16px 16px 0 0;
}
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.guide-card:hover .guide-card__media img { transform: scale(1.05); }

/* ───────────── Generic cinematic backdrop (for existing dark heroes) ───────────── */
.cine-host { position: relative; overflow: hidden; }
.cine-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0.55;
}
.cine-bg.kenburns { animation: llKenBurns 28s ease-out forwards; }
.cine-bg-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,31,53,0.68) 0%, rgba(15,31,53,0.80) 55%, rgba(15,31,53,0.94) 100%);
}
.cine-host > *:not(.cine-bg):not(.cine-bg-scrim) { position: relative; z-index: 1; }

/* ───────────── Reduced motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-cinema .hero-still.kenburns,
  .page-hero-cinema .hero-still.kenburns,
  .cine-bg.kenburns { animation: none; }
  .hero-scroll::after { animation: none; }
  .llstory__beat { transition: none; }
}

/* ───────────── Responsive ───────────── */
@media (max-width: 768px) {
  .hero-cinema { min-height: 84vh; padding: 76px 5vw 64px; }
  .page-hero-cinema { min-height: 44vh; padding: 72px 5vw 36px; }
  .llstory__panel { min-height: 60vh; }
}