/* ========== Motion layer (Lenis + cinematic route veil) ==========
   NEVER put transform / will-change:transform on wrappers that contain
   Elementor fixed headers — that creates a containing block and causes
   scroll jitter. Soul lives on the fixed veil + content-only awakens. */
.pixel-page-enter {
  min-height: 100%;
}

html.pixel-route-exit,
html.pixel-route-enter,
html.pixel-route-exit body,
html.pixel-route-enter body {
  background-color: #000000 !important;
}

/* Fixed black curtain — below sticky header (z≈10000), above page body */
.pixel-route-veil {
  --veil-ease-cover: cubic-bezier(0.76, 0, 0.24, 1);
  --veil-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --veil-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 65% 42% at 50% 48%, rgba(255, 255, 255, 0.05) 0%, transparent 62%),
    radial-gradient(120% 90% at 50% 110%, rgba(32, 32, 32, 0.9) 0%, transparent 55%),
    radial-gradient(90% 70% at 50% -10%, rgba(14, 14, 14, 0.95) 0%, transparent 50%),
    #000000;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path, opacity;
}

.pixel-route-veil-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 1;
  width: min(70vw, 420px);
  max-width: 92vw;
}

.pixel-route-veil-halo {
  position: absolute;
  width: min(58vw, 420px);
  height: min(58vw, 420px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 32%,
    transparent 68%
  );
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition:
    opacity 0.55s var(--veil-ease-soft),
    transform 0.7s var(--veil-ease-reveal);
}

.pixel-route-veil-logo {
  position: relative;
  z-index: 1;
  width: min(52vw, 340px) !important;
  max-width: min(52vw, 340px) !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.92);
  filter: brightness(1.08) drop-shadow(0 0 24px rgba(255, 255, 255, 0.12));
  pointer-events: none;
  user-select: none;
  transition:
    opacity 0.5s var(--veil-ease-soft),
    transform 0.65s var(--veil-ease-reveal),
    filter 0.5s var(--veil-ease-soft);
}

.pixel-route-veil-rule {
  position: relative;
  z-index: 1;
  display: block;
  width: 0;
  height: 1px;
  margin-top: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 22%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.2) 78%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition:
    width 0.55s var(--veil-ease-reveal),
    opacity 0.4s var(--veil-ease-soft),
    transform 0.55s var(--veil-ease-reveal);
}

.pixel-route-veil[data-mode='cover'],
.pixel-route-veil[data-mode='hold'],
.pixel-route-veil[data-mode='reveal'] {
  visibility: visible;
}

.pixel-route-veil[data-mode='cover'] {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
  transition:
    opacity 0.28s var(--veil-ease-soft),
    clip-path 0.62s var(--veil-ease-cover);
}

.pixel-route-veil[data-mode='cover'] .pixel-route-veil-halo {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.22s;
}

.pixel-route-veil[data-mode='cover'] .pixel-route-veil-logo {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0.26s;
}

.pixel-route-veil[data-mode='cover'] .pixel-route-veil-rule {
  width: min(28vw, 120px);
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.38s;
}

/* Hold: full cover while next page paints */
.pixel-route-veil[data-mode='hold'] {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  pointer-events: none;
  transition: none;
}

.pixel-route-veil[data-mode='hold'] .pixel-route-veil-halo {
  opacity: 1;
  transform: scale(1);
  animation: pixel-veil-halo-pulse 1.4s ease-in-out infinite alternate;
}

.pixel-route-veil[data-mode='hold'] .pixel-route-veil-logo {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: pixel-veil-logo-breathe 1.35s ease-in-out infinite alternate;
}

.pixel-route-veil[data-mode='hold'] .pixel-route-veil-rule {
  width: min(28vw, 120px);
  opacity: 1;
  transform: scaleX(1);
  animation: pixel-veil-rule-glow 1.35s ease-in-out infinite alternate;
}

/* Reveal: curtain continues upward, unveiling the new page */
.pixel-route-veil[data-mode='reveal'] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path 0.88s var(--veil-ease-reveal);
}

.pixel-route-veil[data-mode='reveal'] .pixel-route-veil-halo {
  opacity: 0;
  transform: scale(1.15);
  animation: none;
  transition:
    opacity 0.32s var(--veil-ease-soft),
    transform 0.45s var(--veil-ease-soft);
}

.pixel-route-veil[data-mode='reveal'] .pixel-route-veil-logo {
  opacity: 0;
  transform: translate3d(0, -14px, 0) scale(1.04);
  animation: none;
  transition:
    opacity 0.32s var(--veil-ease-soft),
    transform 0.45s var(--veil-ease-soft);
}

.pixel-route-veil[data-mode='reveal'] .pixel-route-veil-rule {
  width: min(36vw, 160px);
  opacity: 0;
  transform: scaleX(1.2);
  animation: none;
  transition:
    opacity 0.25s var(--veil-ease-soft),
    width 0.35s var(--veil-ease-soft),
    transform 0.35s var(--veil-ease-soft);
}

.pixel-route-veil[data-mode='idle'] {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.pixel-route-veil[data-mode='idle'] .pixel-route-veil-halo,
.pixel-route-veil[data-mode='idle'] .pixel-route-veil-logo,
.pixel-route-veil[data-mode='idle'] .pixel-route-veil-rule {
  opacity: 0;
  animation: none;
}

.pixel-route-veil[data-mode='idle'] .pixel-route-veil-logo {
  transform: translate3d(0, 18px, 0) scale(0.92);
}

.pixel-route-veil[data-mode='idle'] .pixel-route-veil-halo {
  transform: scale(0.7);
}

.pixel-route-veil[data-mode='idle'] .pixel-route-veil-rule {
  width: 0;
  transform: scaleX(0.4);
}

@keyframes pixel-veil-logo-breathe {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1.02) drop-shadow(0 0 16px rgba(0, 0, 0, 0.45));
  }
  to {
    transform: translate3d(0, -3px, 0) scale(1.03);
    filter: brightness(1.08) drop-shadow(0 0 22px rgba(255, 255, 255, 0.08));
  }
}

@keyframes pixel-veil-halo-pulse {
  from {
    opacity: 0.55;
    transform: scale(0.96);
  }
  to {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

@keyframes pixel-veil-rule-glow {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 0.85;
  }
}

/* Exit: soft dim under rising curtain (no filter/transform on main — sticky header) */
html.pixel-route-exit .pixel-main,
html.pixel-route-exit main {
  opacity: 0.42;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

html.pixel-route-enter .pixel-main,
html.pixel-route-enter main {
  opacity: 1;
}

/*
 * Belt-and-suspenders: while curtain covers/holds, never let page HTML paint through
 * (covers z-index races + React commit frames).
 */
.pixel-route-veil[data-mode='cover'] ~ *,
.pixel-route-veil[data-mode='hold'] ~ * {
  visibility: hidden !important;
}

/*
 * Cold-load FOUC guards — apply before JS-injected live-cascade/original-styles.
 * Search / hard refresh used to paint Elementor mobile nav (main+dropdown) twice
 * and the theme “13 UTOPIA” .bhf-hidden title on black.
 */
.bhf-hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .elementor-element-9e2c1c7,
  .elementor .elementor-hidden-mobile_extra,
  .elementor .elementor-hidden-tablet,
  .elementor .elementor-hidden-tablet_extra,
  .elementor .elementor-hidden-laptop,
  .elementor .elementor-hidden-desktop,
  .elementor .elementor-hidden-widescreen {
    display: none !important;
  }

  .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    max-height: 0 !important;
    overflow: hidden !important;
    transform: scaleY(0);
    pointer-events: none;
  }
}

.pixel-route-veil[data-mode='reveal'] ~ *,
.pixel-route-veil[data-mode='idle'] ~ * {
  visibility: visible !important;
}

html.pixel-route-exit .pixel-header-pinned,
html.pixel-route-enter .pixel-header-pinned,
html.pixel-route-exit .elementor-element-01ec82b,
html.pixel-route-enter .elementor-element-01ec82b,
html.pixel-route-exit .elementor-element-01ec82b.pixel-header-pinned,
html.pixel-route-enter .elementor-element-01ec82b.pixel-header-pinned {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}

/* First-viewport stagger — runs under the curtain; keep from-state soft so a late
   apply never hard-blacks an already-visible page. */
@keyframes pixel-awaken {
  from {
    opacity: 0.35;
    filter: blur(8px) brightness(0.75);
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pixel-awaken-scroll {
  from {
    opacity: 0.2;
    filter: blur(6px);
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
  }
}

.pixel-awaken {
  animation: pixel-awaken 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--pixel-awaken-delay, 0ms);
  will-change: transform, opacity, filter;
}

.pixel-await-scroll {
  opacity: 0.2;
  filter: blur(6px);
  transform: translate3d(0, 28px, 0);
}

.pixel-awaken-scroll {
  animation: pixel-awaken-scroll 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, filter;
}

.pixel-awaken-done {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Soft image awaken — doesn't fight Elementor lazy once decoded */
html.pixel-exact img {
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nav / CTA hover polish without restyling layout */
html.pixel-exact .elementor-nav-menu a,
html.pixel-exact a.elementor-button-link,
html.pixel-exact .elementor-button {
  transition:
    color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.pixel-exact .elementor-button:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .pixel-page-enter,
  .pixel-awaken,
  .pixel-awaken-scroll,
  .pixel-await-scroll,
  html.pixel-route-exit .pixel-main,
  html.pixel-route-enter .pixel-main,
  html.pixel-exact img {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pixel-route-veil,
  .pixel-route-veil-logo,
  .pixel-route-veil-halo,
  .pixel-route-veil-rule {
    animation: none !important;
    transition: none !important;
  }

  .pixel-route-veil {
    display: none !important;
  }
}