/* cinematic-hero.css — hero motion layer */

/* ─── Tokens ─── */
:root {
  --ch-bg:            #071421;
  --ch-bg-deep:       #071421;
  --ch-ink:           #E7E6DD;
  --ch-ink-muted:     rgba(231, 230, 221, 0.38);
  --ch-ink-rest:      rgba(231, 230, 221, 0.92);
  --ch-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --ch-loader-base:   rgba(231, 230, 221, 0.10);
  --ch-loader-active: rgba(231, 230, 221, 0.42);
}

/* ─── Scroll lock during intro ─── */
html.ch-intro-active {
  overflow: hidden;
  touch-action: none;
}

/* ─── FOUC guard ─── */
html:not(.js-cinema) .cinematic-hero { visibility: hidden; }

/* ─── Hero shell — normal section, 100vh ─── */
.cinematic-hero {
  position: relative;
  width: calc(100% - 20px);
  height: calc(100vh - 20px);
  margin: 10px auto;
  background: var(--ch-bg);
  overflow: hidden;
  border-radius: 27px;
}

/* ─── Video ─── */
.cinematic-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  will-change: opacity, transform;
}

.cinematic-hero__video.is-desktop-filter {
  filter: brightness(0.82) contrast(0.96);
}

/* ─── Veil ─── */
.cinematic-hero__veil {
  position: absolute;
  inset: 0;
  background: var(--ch-bg-deep);
  opacity: 0.18;
  pointer-events: none;
  z-index: 2;
}

/* ─── Mark (feat. / f.) — fixed, always viewport-relative ─── */
.cinematic-hero__mark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100001;
  margin: 0;
  padding: 0;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400;
  font-size: clamp(4rem, 9vw, 8rem);
  color: var(--ch-ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  will-change: transform, opacity;
  pointer-events: auto; /* stays clickable even when hero has pointer-events:none */
  cursor: pointer;
  opacity: 0; /* hidden until JS reveals it — prevents bleed-through on early paint */
}
.cinematic-hero__mark .elementor-heading-title,
.cinematic-hero__mark .elementor-widget-container {
  font-family: inherit !important;
  font-weight: inherit;
}

.cinematic-hero__mark[data-state="resting"] {
  font-weight: 600;
  opacity: 0.92;
  letter-spacing: -0.02em;
}

/* Collapse: smooth letter removal — CSS transition lets dot glide into position
   while letters are already invisible, preventing a snap on font-size:0 */
.cinematic-hero__mark [data-letter="e"],
.cinematic-hero__mark [data-letter="a"],
.cinematic-hero__mark [data-letter="t"] {
  transition: font-size 0.4s ease-out, letter-spacing 0.4s ease-out;
}

.cinematic-hero__mark[data-state="resting"] [data-letter="e"],
.cinematic-hero__mark[data-state="resting"] [data-letter="a"],
.cinematic-hero__mark[data-state="resting"] [data-letter="t"] {
  font-size: 0;
  letter-spacing: 0;
  padding: 0;
}

/* Individual letters — wave targets these */
.cinematic-hero__mark [data-letter] {
  display: inline-block;
}

/* ─── Nav mode — f. at top-left as home button ─── */
.cinematic-hero__mark.is-nav {
  cursor: pointer;
}

/* Extend hit area: at 1/3 scale the visual is tiny; ::before lives in mark's
   own coordinate space so 200px here = ~67px extra on each edge in screen space */
.cinematic-hero__mark.is-nav::before {
  content: '';
  position: absolute;
  inset: -200px;
  cursor: pointer;
}

/* ─── Loader — vertically centered in hero container ─── */
.cinematic-hero__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: clamp(78vw, 84vw, 90vw);
  height: 1px;
}

@media (max-width: 768px) {
  /* Propagate Elementor section height down to the hero shortcode */
  .elementor-widget:has(.cinematic-hero),
  .elementor-element:has(.cinematic-hero),
  .elementor-widget:has(.cinematic-hero) .elementor-widget-container {
    height: 100%;
    padding: 0;
  }

  .cinematic-hero {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  .cinematic-hero__loader {
    width: clamp(84vw, 90vw, 94vw);
  }
}

.cinematic-hero__loader-baseline {
  position: absolute;
  inset: 0;
  background: var(--ch-loader-base);
}

.cinematic-hero__loader-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--ch-loader-active);
  will-change: width;
}

/* ─── Post-intro UI region ─── */
.cinematic-hero__ui {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

.cinematic-hero__ui.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Mobile portrait — Elementor SVG takes over ─── */
@media (max-width: 767px) and (orientation: portrait) {
  .cinematic-hero__mark {
    display: none;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero__video,
  .cinematic-hero__loader-progress {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── Accessibility: loading status (sr-only until 3s gate) ─── */
.cinematic-hero__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Reveal system — initial state (Phase 2) ─── */
/* Gated on .js-cinema so non-JS / failed-JS users still see content. The
   .js-cinema class is added by the FOUC guard in wp_head priority 1, so this
   rule applies before first paint — no flash between DOM render and
   ScrollTrigger scrub evaluation. */
html.js-cinema [data-reveal],
html.js-cinema [data-reveal-item],
html.js-cinema .js-reveal,
html.js-cinema .js-reveal--item {
  opacity: 0;
}

/* Reduced-motion: reveal-system.js makes targets visible immediately via inline
   style, but belt-and-braces — never hide content from reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  html.js-cinema [data-reveal],
  html.js-cinema [data-reveal-item],
  html.js-cinema .js-reveal,
  html.js-cinema .js-reveal--item {
    opacity: 1;
  }
}