/*
  VibeMyWay — Hero v2 (cinematic Depth Anchor)
  Dark video hero + liquid glass UI, scoped to .hero-cinema and the
  over-video nav state. Everything else on the page stays light-mode
  per DESIGN.md. backdrop-filter exception is granted ONLY inside
  this scope.
*/

:root {
  --brand-on-dark: oklch(0.78 0.13 264);
  --hero-scrim-top:    oklch(0.16 0.06 264 / 0.62);
  --hero-scrim-mid:    oklch(0.16 0.06 264 / 0.30);
  --hero-scrim-bottom: oklch(0.22 0.16 264 / 0.62);
}

/* ============================================================
   LIQUID GLASS (scoped)
============================================================ */
.hero-cinema .liquid-glass,
.nav.nav-on-hero:not(.scrolled) .liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.hero-cinema .liquid-glass::before,
.nav.nav-on-hero:not(.scrolled) .liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0)   40%,
    rgba(255,255,255,0)   60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   HERO SECTION
============================================================ */
.hero-cinema {
  position: relative;
  min-height: 100svh;
  /* Poster frame paints instantly and backs the loop fade; Depth Blue under it */
  background: url('../media/man_hero-poster.jpg') center 60% / cover no-repeat var(--depth);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-cinema-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0; /* JS fades in */
}

.hero-cinema-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--hero-scrim-top) 0%,
    var(--hero-scrim-mid) 42%,
    var(--hero-scrim-bottom) 100%);
  pointer-events: none;
}

.hero-cinema-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: clamp(140px, 16vw, 190px) clamp(var(--sp-lg), 5vw, var(--sp-4xl)) var(--sp-2xl);
  max-width: 900px;
  /* position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(140px, 16vw, 190px) clamp(var(--sp-lg), 5vw, var(--sp-4xl)) var(--sp-2xl); */
}

.hero-cinema-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--depth-text-secondary);
  margin-bottom: var(--sp-lg);
}

.hero-cinema-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--depth-text-primary);
  margin-bottom: var(--sp-lg);
  max-width: 30ch;
  text-wrap: balance;
}
.hero-cinema-headline em {
  font-style: normal;
  color: var(--brand-on-dark);
}

.hero-cinema-sub {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--depth-text-primary);
  max-width: 54ch;
  /* margin: 0 auto var(--sp-xl); */
  margin: 0 0 var(--sp-xl);
  text-shadow: 0 1px 12px oklch(0.16 0.06 264 / 0.45);
}

.hero-cinema-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-xl);
}

.glass-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  border-radius: 10px;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--depth-text-primary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.glass-btn:hover { background: rgba(255, 255, 255, 0.07); }
.glass-btn:focus-visible {
  outline: 2px solid var(--depth-text-primary);
  outline-offset: 3px;
}

/* ── Product price chips ── */
.hero-cinema-products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: center;
}

.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  border-radius: 100px;
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--depth-text-primary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.glass-chip:hover { background: rgba(255, 255, 255, 0.07); }
.glass-chip:focus-visible {
  outline: 2px solid var(--depth-text-primary);
  outline-offset: 3px;
}
.glass-chip-price {
  font-weight: 800;
  color: var(--brand-on-dark);
  font-variant-numeric: tabular-nums;
}
.glass-chip-arrow { color: var(--depth-text-muted); }

/* ── Hero footer: social glass icons ── */
.hero-cinema-foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--sp-md);
  padding-bottom: var(--sp-2xl);
}

.glass-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--depth-text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.glass-icon:hover {
  color: var(--depth-text-primary);
  background: rgba(255, 255, 255, 0.07);
}
.glass-icon:focus-visible {
  outline: 2px solid var(--depth-text-primary);
  outline-offset: 3px;
}

/* ============================================================
   NAV OVER VIDEO
   At top of page the nav floats over the dark hero: transparent,
   white links, white wordmark text (blue mark stays). Once
   .scrolled is applied by main.js the standard light nav returns.
============================================================ */
.nav.nav-on-hero:not(.scrolled) {
  background: transparent;
  box-shadow: none;
}
.nav.nav-on-hero:not(.scrolled) .nav-logo svg path:not(:first-child) {
  fill: oklch(0.97 0.01 264);
}
.nav.nav-on-hero:not(.scrolled) .nav-link {
  color: oklch(0.97 0.01 264 / 0.82);
}
.nav.nav-on-hero:not(.scrolled) .nav-link:hover {
  color: oklch(0.97 0.01 264);
  background: rgba(255, 255, 255, 0.07);
}
.nav.nav-on-hero:not(.scrolled) .nav-hamburger {
  color: oklch(0.97 0.01 264);
}
.nav.nav-on-hero .nav-logo svg path { transition: fill var(--dur-base) var(--ease-out); }
.nav.nav-on-hero .nav-link          { transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }

/* Glass CTA in nav (over video only; reverts to primary when scrolled) */
.nav.nav-on-hero:not(.scrolled) .nav-cta-glass {
  border-radius: 100px;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: oklch(0.97 0.01 264);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav.nav-on-hero:not(.scrolled) .nav-cta-glass:hover { background: rgba(255,255,255,0.07); }
.nav.nav-on-hero.scrolled .nav-cta-glass {
  /* falls back to standard primary button look once scrolled */
  background: var(--brand);
  color: var(--depth-text-primary);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.nav.nav-on-hero.scrolled .nav-cta-glass:hover { background: var(--brand-hover); }

/* ============================================================
   PRODUCT / INNER PAGE DEPTH HERO
   Adds the Depth Anchor treatment to .prod-hero (and generic
   page heros) without touching each page's structural CSS.
   Apply class "prod-hero--depth" on the hero section.
============================================================ */
.prod-hero.prod-hero--depth {
  /* double class beats the page's inline .prod-hero rule */
  background: var(--depth); /* flat Depth Blue — no decorative gradients per DESIGN.md */
}
.prod-hero--depth .prod-hero-back { color: var(--depth-text-muted); }
.prod-hero--depth .prod-hero-back:hover { color: var(--depth-text-primary); }
.prod-hero--depth .prod-hero-eyebrow { color: var(--brand-on-dark); }
.prod-hero--depth .prod-hero-eyebrow::before { background: var(--brand-on-dark); }
.prod-hero--depth .prod-hero-headline { color: var(--depth-text-primary); }
.prod-hero--depth .prod-hero-headline em { color: var(--brand-on-dark); }
.prod-hero--depth .prod-hero-sub { color: var(--depth-text-secondary); }
.prod-hero--depth .prod-hero-sub strong { color: var(--depth-text-primary); }
.prod-hero--depth .prod-hero-price-amount { color: var(--depth-text-primary); }
.prod-hero--depth .prod-hero-price-label,
.prod-hero--depth .prod-hero-note { color: var(--depth-text-muted); }

/* Secondary actions become glass on depth */
.prod-hero--depth .btn-ghost {
  border-color: oklch(0.97 0.01 264 / 0.35);
  color: var(--depth-text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.prod-hero--depth .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--depth-text-primary);
}
.prod-hero--depth .hero-scroll-link { color: var(--depth-text-secondary); }
.prod-hero--depth .hero-scroll-link:hover { color: var(--depth-text-primary); }

/* Works-with badges on depth */
.prod-hero--depth .works-with-label { color: var(--depth-text-muted); }
.prod-hero--depth .works-with-badge {
  background: oklch(0.97 0.01 264 / 0.92);
}
.prod-hero--depth .works-with-badge:hover { background: oklch(0.97 0.01 264); }
.prod-hero--depth .works-with-more { color: var(--depth); }

/* Hero visuals sit on a Frost plate so light-token SVGs/panels read */
.prod-hero--depth .what-plate,
.prod-hero--depth .pipeline-panel {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 8px 32px oklch(0.14 0.025 264 / 0.3);
}
.prod-hero--depth .what-plate { padding: var(--sp-lg); }

/* Pages with a flat depth hero and a subnav: nav carries the depth
   surface itself so no light band appears above the subnav */
.nav.nav-on-hero.nav-on-depth:not(.scrolled) {
  background: var(--depth);
}

/* Subnav over depth hero: dark glass until the nav gains .scrolled */
#site-nav.nav-on-hero:not(.scrolled) ~ .subnav {
  background: oklch(0.34 0.25 264 / 0.85);
  border-bottom: 1px solid oklch(0.97 0.01 264 / 0.12);
}
#site-nav.nav-on-hero:not(.scrolled) ~ .subnav .subnav-link {
  color: var(--depth-text-secondary);
}
#site-nav.nav-on-hero:not(.scrolled) ~ .subnav .subnav-link:hover,
#site-nav.nav-on-hero:not(.scrolled) ~ .subnav .subnav-link[aria-current="location"] {
  color: var(--depth-text-primary);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .hero-cinema-content {
    padding-top: clamp(120px, 24vw, 160px);
  }
  .hero-cinema-headline { font-size: clamp(2.25rem, 9vw, 2.75rem); }
  .hero-cinema-ctas { flex-direction: column; }
  .hero-cinema-ctas .btn,
  .hero-cinema-ctas .glass-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   REDUCED MOTION — video shows first frame, no fades
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-cinema-video { opacity: 1; }
  .nav.nav-on-hero .nav-logo svg path,
  .nav.nav-on-hero .nav-link { transition: none; }
}