/*
 * ONEEXISTS v1.7.0 additions
 * — Cinematic hero (video + poster + delayed reveal)
 * — Header shrink (72px desktop / 56px mobile per new brief)
 * — Deeper black surfaces near hero
 *
 * Additive layer over v1.6.1. All selectors scoped to .oe-theme so unrelated
 * pages (wp-admin, Elementor previews) are not affected.
 */

:root {
  /* Header height override per new brief §6-7 */
  --oe-header-h: 72px;
  --oe-header-h-mobile: 56px;

  /* Motion easing shared with hero reveal */
  --oe-ease-material: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 47.99rem) {
  :root { --oe-header-h: 56px; }
}

/* ============================================================================
   Hero — v1.7.0
   ============================================================================ */

.oe-hero--v170 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  max-height: 960px;
  width: 100%;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: rgb(var(--oe-white));
  isolation: isolate;
}

.oe-hero--v170 .oe-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shift the visible slice DOWN so the mockup nav baked into the top of
     the source video sits above the visible area, while the Roman I stays
     complete (its top edge is preserved). */
  object-position: center 62%;
  z-index: 0;
  display: block;
  /* Slight zoom-in cover to bleed debris edges past 100% on narrow viewports */
  transform: scale(1.02);
  transform-origin: center 55%;
  /* Ambient/background video — never accept pointer input, so iOS Safari
     doesn't paint its native play/pause/AirPlay overlay on tap. */
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
          user-select: none;
}

/* Kill any residual iOS native media chrome — belt-and-braces alongside the
   `pointer-events: none` above (iOS still paints the start-playback button
   in some contexts even without a tap). */
.oe-hero--v170 .oe-hero__video::-webkit-media-controls,
.oe-hero--v170 .oe-hero__video::-webkit-media-controls-panel,
.oe-hero--v170 .oe-hero__video::-webkit-media-controls-start-playback-button,
.oe-hero--v170 .oe-hero__video::-webkit-media-controls-overlay-play-button,
.oe-hero--v170 .oe-hero__video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.oe-hero--v170 .oe-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgb(0 0 0 / 0.15) 0%,
      transparent 20%,
      transparent 55%,
      rgb(0 0 0 / 0.45) 92%,
      rgb(0 0 0 / 0.72) 100%);
  z-index: 1;
  pointer-events: none;
}

.oe-hero--v170 .oe-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--oe-header-h) + 3rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  width: 100%;
}

.oe-hero--v170 .oe-hero__title {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(1rem, 2vh, 1.5rem);
  max-width: 22ch;
  color: rgb(var(--oe-white));
  opacity: 0;
  transform: translateY(10px);
  animation: oe-hero-fade 900ms var(--oe-ease-material) 2500ms forwards;
}

.oe-hero--v170 .oe-hero__title em {
  font-style: italic;
  color: rgb(var(--oe-silver));
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 40 !important;
}

.oe-hero--v170 .oe-hero__sub {
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 clamp(1.5rem, 3vh, 2.5rem);
  color: rgb(var(--oe-white) / 0.82);
  opacity: 0;
  transform: translateY(8px);
  animation: oe-hero-fade 900ms var(--oe-ease-material) 2700ms forwards;
}

.oe-hero--v170 .oe-hero__ctas {
  opacity: 0;
  transform: translateY(8px);
  animation: oe-hero-fade 900ms var(--oe-ease-material) 2900ms forwards;
}

/* Ghost button on dark: silver outline, minimal fill */
.oe-hero--v170 .oe-btn--ghost {
  background: transparent;
  border: 1px solid rgb(var(--oe-white) / 0.35);
  color: rgb(var(--oe-white));
  padding: 0.9375rem 1.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  transition: border-color 240ms var(--oe-ease-material),
              background-color 240ms var(--oe-ease-material),
              color 240ms var(--oe-ease-material);
}

.oe-hero--v170 .oe-btn--ghost:hover,
.oe-hero--v170 .oe-btn--ghost:focus-visible {
  border-color: rgb(var(--oe-white));
  background: rgb(var(--oe-white) / 0.06);
  color: rgb(var(--oe-white));
}

@keyframes oe-hero-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Reduced motion: keep the video, kill the text delay.
   The clip is subtle by intent (drifting dust + smoke + slight debris)
   per brief §3 — restrained enough that vestibular-sensitive users can
   still watch it. What we DO cut is the theatrical fade-in delay on the
   copy: text appears immediately, unanimated, so it can be read. */
@media (prefers-reduced-motion: reduce) {
  .oe-hero--v170 .oe-hero__title,
  .oe-hero--v170 .oe-hero__sub,
  .oe-hero--v170 .oe-hero__ctas {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* --- Mobile scaling ---------------------------------------------------- */
@media (max-width: 47.99rem) {
  .oe-hero--v170 {
    min-height: 88svh;
    min-height: 88vh;
    max-height: 780px;
  }
  .oe-hero--v170 .oe-hero__title {
    font-size: clamp(2rem, 8.5vw, 3.25rem);
    max-width: 100%;
  }
  .oe-hero--v170 .oe-hero__sub {
    font-size: 0.9375rem;
  }
  .oe-hero--v170 .oe-btn--ghost {
    padding: 0.8125rem 1.375rem;
    font-size: 0.6875rem;
  }
}

/* --- Save-data: bail out of video, use poster only --------------------- */
@media (prefers-reduced-data: reduce) {
  .oe-hero--v170 .oe-hero__video { display: none; }
}

/* ============================================================================
   Header — v1.7.0 (mobile-first)
   Brief §5-7 & §13. Floats over hero (transparent), goes translucent-dark on
   scroll. Desktop: logo + 2-item nav LEFT, utility RIGHT. Mobile: logo LEFT,
   bag + hamburger RIGHT — everything else moves into the drawer.
   ============================================================================ */

.oe-header--v170 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--oe-header-h);
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
          backdrop-filter: blur(20px) saturate(1.05);
  transition: background-color 280ms var(--oe-ease-material),
              border-color 280ms var(--oe-ease-material);
  color: rgb(var(--oe-white));
}

.oe-header--v170.is-scrolled,
body:not(.oe-home) .oe-header--v170 {
  position: fixed;
  background: rgb(10 10 11 / 0.78);
  border-bottom-color: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
          backdrop-filter: blur(28px) saturate(1.1);
}

.oe-header--v170 .oe-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
  max-width: none;
}

.oe-header--v170 .oe-header__left {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  min-width: 0;
}

.oe-header--v170 .oe-header__right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Wordmark */
.oe-header--v170 .oe-wordmark {
  font-family: var(--oe-font-head, "Fraunces", serif);
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgb(var(--oe-white));
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.oe-header--v170 .oe-wordmark sup {
  font-size: 0.55em;
  vertical-align: super;
  opacity: 0.7;
}

/* Nav — desktop only */
.oe-header--v170 .oe-header__nav { display: none; }

.oe-header--v170 .oe-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Prepended `body.oe-theme` to beat v161-typography.css's grotesk-uppercase rule
   (same-specificity + both !important → later wins, but v161's selector is
   `body.oe-theme .oe-nav a` = specificity 22, so v170 needs at least that. */
body.oe-theme .oe-header--v170 .oe-nav a {
  color: rgb(var(--oe-white));
  text-decoration: none;
  /* User request 2026-09-29: nav labels use Fraunces (brand serif) instead
     of Inter uppercase. Sentence case, close to the wordmark voice. */
  font-family: var(--oe-font-head, "Fraunces", serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 14, "wght" 400 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  padding: 0.625rem 0;
  position: relative;
  display: inline-block;
  transition: color 240ms var(--oe-ease-material);
}

.oe-header--v170 .oe-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0.375rem;
  height: 1px;
  background: currentColor;
  transition: left 260ms var(--oe-ease-material),
              right 260ms var(--oe-ease-material);
}

.oe-header--v170 .oe-nav a:hover::after,
.oe-header--v170 .oe-nav a:focus-visible::after,
.oe-header--v170 .oe-nav .current-menu-item > a::after {
  left: 0;
  right: 0;
}

/* Utility icon buttons */
.oe-header--v170 .oe-header__right .oe-btn--icon-only,
.oe-header--v170 .oe-header__hamburger {
  background: transparent;
  border: 0;
  color: rgb(var(--oe-white));
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 200ms var(--oe-ease-material);
}
.oe-header--v170 .oe-header__right .oe-btn--icon-only:hover,
.oe-header--v170 .oe-header__hamburger:hover { opacity: 0.7; }

/* Bag counter */
.oe-header--v170 .oe-header__bag { position: relative; }
.oe-header--v170 .oe-bag-count {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--oe-font-mono, "JetBrains Mono", monospace);
  font-size: 0.5625rem;
  line-height: 1;
  color: rgb(var(--oe-white));
  min-width: 12px;
  text-align: center;
  padding: 1px 2px;
}

/* Language switch */
.oe-header--v170 .oe-lang-switch {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--oe-font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  color: rgb(var(--oe-white) / 0.5);
  margin-right: 0.5rem;
}
.oe-header--v170 .oe-lang-switch a,
.oe-header--v170 .oe-lang-switch span { color: inherit; text-decoration: none; }
.oe-header--v170 .oe-lang-switch .current-lang,
.oe-header--v170 .oe-lang-current { color: rgb(var(--oe-white)); }

/* Hamburger — visible mobile only by default */
.oe-header--v170 .oe-header__hamburger { display: inline-flex; }

/* Hide search + account on mobile (moved into drawer).
   Same specificity as the icon-only display:inline-flex rule above, so
   the LATER declaration wins on mobile without needing !important. */
.oe-header--v170 .oe-header__right .oe-header__search-toggle,
.oe-header--v170 .oe-header__right .oe-header__account { display: none; }

/* --- Desktop breakpoint: show full nav + utility --- */
@media (min-width: 64rem) {
  .oe-header--v170 .oe-header__nav { display: block; }
  .oe-header--v170 .oe-header__hamburger { display: none; }
  .oe-header--v170 .oe-header__right .oe-header__search-toggle,
  .oe-header--v170 .oe-header__right .oe-header__account,
  .oe-header--v170 .oe-header__right .oe-lang-switch { display: inline-flex; }
  .oe-header--v170 .oe-header__right { gap: 0.5rem; }
}

/* Empty bag: hide the "0" counter — brand looks quieter without the pill.
   Header PHP omits the span entirely when count is 0. Keep this rule as a
   belt-and-braces guard for any legacy count element inherited from Astra. */
.oe-header--v170 .oe-bag-count:empty { display: none; }

/* --- Small mobile: tighten padding + wordmark size --- */
@media (max-width: 27rem) {
  .oe-header--v170 .oe-header__inner { padding-inline: 0.875rem; }
  .oe-header--v170 .oe-wordmark { font-size: 0.875rem; }
  .oe-header--v170 .oe-header__right .oe-btn--icon-only,
  .oe-header--v170 .oe-header__hamburger { padding: 0.375rem; min-width: 40px; min-height: 40px; }
}

/* Announcement bar sits above header — nudge header down when it's present */
.oe-announcement + .oe-header--v170 {
  top: var(--oe-announcement-h, 32px);
}

/* Hide the announcement bar's fake-nav clutter on mobile if any legacy CSS pushes stuff around */
@media (max-width: 47.99rem) {
  .oe-header--v170 { top: 0 !important; }
  .oe-announcement { display: none; } /* mobile: recover 32-40px of vertical */
}

/* Make sure main content pushes below fixed header on non-home pages */
body:not(.oe-home) .oe-main {
  padding-top: var(--oe-header-h);
}