/* Editorial full-bleed poster — gate hero stack */

.gate-poster-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gate-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gate-hero-fill {
  position: absolute;
  inset: -12%;
  background: var(--cosmic-void) url("../assets/images/home_hero.jpg") center / cover no-repeat;
  filter: blur(42px) saturate(1.15) contrast(1.04);
  transform: scale(1.12);
  opacity: 0.58;
  will-change: transform;
}

.gate-hero-frame {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(72px + env(safe-area-inset-top, 0px))
    clamp(12px, 3vw, 32px)
    calc(48px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1);
  will-change: transform;
}

.gate.is-poster-ready .gate-hero-frame {
  animation: gateKenBurns 28s var(--ease-silk) forwards;
}

.gate-hero-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(52vw, 420px);
  max-height: min(78dvh, 920px);
  object-fit: contain;
  object-position: center center;
  filter: contrast(1.06) saturate(1.08);
  border-radius: 2px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(201, 191, 255, 0.08);
}

.gate-poster-duotone {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      125deg,
      rgba(123, 97, 255, 0.22) 0%,
      transparent 42%,
      rgba(255, 178, 184, 0.14) 100%
    );
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

.gate-poster-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      var(--cosmic-void) 0%,
      rgba(11, 11, 18, 0.35) 14%,
      transparent 38%,
      transparent 58%,
      rgba(11, 11, 18, 0.45) 82%,
      var(--cosmic-void) 100%
    );
}

.gate-poster-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 88% 72% at 50% 46%,
    transparent 32%,
    rgba(11, 11, 18, 0.55) 100%
  );
}

.gate-poster-grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

body.is-labyrinth-active .gate-poster-stack {
  visibility: hidden;
  opacity: 0;
}

body.is-gate-restoring .gate-poster-stack {
  visibility: visible;
  opacity: 1;
}

[data-theme="light"] .gate-hero-fill {
  opacity: 0.42;
  filter: blur(38px) saturate(0.95) brightness(1.06);
}

[data-theme="light"] .gate-hero-photo {
  filter: contrast(1.02) saturate(0.92) brightness(1.04);
  box-shadow:
    0 20px 64px rgba(90, 69, 212, 0.12),
    0 0 0 1px rgba(90, 69, 212, 0.1);
}

[data-theme="light"] .gate-poster-duotone {
  background: linear-gradient(
    125deg,
    rgba(90, 69, 212, 0.14) 0%,
    transparent 45%,
    rgba(255, 183, 183, 0.1) 100%
  );
  opacity: 0.7;
}

[data-theme="light"] .gate-poster-scrim {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(247, 244, 239, 0.55) 12%,
    transparent 36%,
    transparent 60%,
    rgba(247, 244, 239, 0.5) 84%,
    var(--bg) 100%
  );
}

[data-theme="light"] .gate-poster-vignette {
  background: radial-gradient(
    ellipse 90% 74% at 50% 44%,
    transparent 28%,
    rgba(247, 244, 239, 0.65) 100%
  );
}

[data-theme="light"] .gate-poster-grain {
  opacity: 0.03;
}

@media (max-width: 720px) {
  /* Fixed full-bleed hero — focal point tuned to portrait (face left, crown center-right) */
  .gate-poster-stack {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: calc(100dvh + env(safe-area-inset-top, 0px));
    min-height: calc(100svh + env(safe-area-inset-top, 0px));
    margin-top: calc(-1 * env(safe-area-inset-top, 0px));
    z-index: 0;
  }

  @supports (-webkit-touch-callout: none) {
    .gate-poster-stack {
      min-height: -webkit-fill-available;
    }
  }

  .gate-hero-bg {
    background: var(--cosmic-void);
  }

  .gate-hero-fill {
    display: none;
  }

  .gate-hero-frame {
    padding: 0;
    transform: none;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .gate.is-poster-ready .gate-hero-frame {
    animation: none;
  }

  .gate-hero-photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: 56% 0%;
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.06);
    transform-origin: 56% 0%;
    will-change: transform;
  }

  .gate-poster-scrim {
    background:
      linear-gradient(90deg, rgba(11, 11, 18, 0.42) 0%, transparent 48%),
      linear-gradient(
        180deg,
        rgba(11, 11, 18, 0.32) 0%,
        transparent 12%,
        transparent 40%,
        rgba(11, 11, 18, 0.38) 72%,
        rgba(11, 11, 18, 0.78) 100%
      );
  }

  .gate-poster-vignette {
    background: radial-gradient(
      ellipse 95% 80% at 38% 38%,
      transparent 44%,
      rgba(11, 11, 18, 0.32) 100%
    );
  }

  [data-theme="light"] .gate-poster-scrim {
    background:
      linear-gradient(90deg, rgba(247, 244, 239, 0.5) 0%, transparent 48%),
      linear-gradient(
        180deg,
        rgba(247, 244, 239, 0.35) 0%,
        transparent 12%,
        transparent 40%,
        rgba(247, 244, 239, 0.42) 72%,
        rgba(247, 244, 239, 0.82) 100%
      );
  }

  [data-theme="light"] .gate-poster-vignette {
    background: radial-gradient(
      ellipse 95% 80% at 38% 38%,
      transparent 42%,
      rgba(247, 244, 239, 0.5) 100%
    );
  }

  [data-theme="light"] .gate-hero-photo {
    filter: contrast(1.02) saturate(0.94) brightness(1.03);
  }
}

@media (min-aspect-ratio: 16/10) {
  .gate-hero-photo {
    max-width: min(38vw, 400px);
    max-height: min(84dvh, 960px);
  }
}

@keyframes gateKenBurns {
  from {
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1);
  }
  to {
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate.is-poster-ready .gate-hero-frame {
    animation: none;
  }
}