/* PixAlter — Threshold Page (Earth Side)
   Option 2: Two images + CSS/JS overlay
   Features:
   - Responsive background via image-set
   - Ambient “breath” pre-click
   - Micro zoom on click
   - Awake crossfade + glow + goldwash
*/

:root{
  --zoom: 1.02;
  --stillness: 300ms;   /* pause after button fade */
  --crossfade: 250ms;   /* A -> B */
  --pulseDelay: 0ms;    /* leave at 0 unless you want stagger */
  --goldDelay: 300ms;   /* delay before goldwash after glow */
  --redirectDelay: 500ms;
  --failsafe: 1800ms;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.stage{
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Background layers */
.bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: opacity var(--crossfade) ease, transform 900ms ease;
  will-change: opacity, transform;
  pointer-events: none;
}

.bg-a{
  background-image: image-set(
    url('/assets/dormant1920.webp') 1x,
    url('/assets/dormant2560.webp') 2x
  );
  opacity: 1;
}

.bg-b{
  background-image: image-set(
    url('/assets/awake1920.webp') 1x,
    url('/assets/awake2560.webp') 2x
  );
  opacity: 0;
}

/* Ambient subtle life (pre-click) */
.ambient-breath{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 52% 46%, rgba(255, 200, 120, 0.22), rgba(255, 200, 120, 0.00) 55%),
    radial-gradient(circle at 48% 58%, rgba(255, 160, 70, 0.12), rgba(255, 160, 70, 0.00) 62%);
  filter: blur(3px);
  animation: breath 7.5s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes breath{
  0%   { opacity: 0.18; transform: scale(1.000); }
  45%  { opacity: 0.26; transform: scale(1.008); }
  100% { opacity: 0.18; transform: scale(1.000); }
}

/* Ritual layers */
.glow,
.goldwash{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.glow{
  background: radial-gradient(circle at 50% 50%, rgba(255, 200, 120, 0.35), rgba(255, 200, 120, 0.00) 60%);
}

.goldwash{
  background: radial-gradient(circle at 50% 55%,
    rgba(255,205,120,0.95),
    rgba(255,180,70,0.85) 40%,
    rgba(0,0,0,0) 70%
  );
}

/* Button */
.enter-btn{
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.30);
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.enter-btn:active{
  transform: translate(-50%, -50%) scale(0.99);
}

/* Sequence states */
.stage.is-entering .enter-btn{
  opacity: 0;
  pointer-events: none;
}

.stage.is-entering .bg{
  transform: scale(var(--zoom));
}

/* When awakened, crossfade */
.stage.is-awake .bg-a{ opacity: 0; }
.stage.is-awake .bg-b{ opacity: 1; }

/* Glow + goldwash visibility (JS toggles inline opacity too, but classes keep it robust) */
.stage.is-glow .glow{ opacity: 1; }
.stage.is-gold .goldwash{ opacity: 1; }

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  .ambient-breath{ animation: none; }
  .bg{ transition: none; }
  .enter-btn{ transition: none; }
}