/* ------------------------------------------------------------------------
   Cosmic sky lock — the private universe gate.
   The lock itself is transparent: the archive's own atmosphere (deep
   background + orbs) sits beneath it, and the starfield canvas the lock
   draws is handed to that atmosphere on unlock, so the sky never changes.

   Layers (z-index inside .cosmic-lock):
     0 space canvas (persistent starfield)
     1 memories canvas (photo constellation)
     2 nebula (::before) and veil
     4 draw canvas
     8 password
   Above everything: #intro-layer (the opening particle sequence).
   ------------------------------------------------------------------------ */

.cosmic-lock {
  position: fixed;
  z-index: 2147482000;
  inset: 0;
  display: block;
  overflow: hidden;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 42%, rgba(64, 35, 119, 0.22), transparent 42%),
    radial-gradient(circle at 14% 82%, rgba(37, 84, 139, 0.14), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(133, 38, 112, 0.13), transparent 30%);
  color: #fff9ff;
  cursor: crosshair;
  isolation: isolate;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.9s 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cosmic-lock[hidden] {
  display: none;
}

.cosmic-lock.is-opening {
  opacity: 0;
  pointer-events: none;
}

body.archive-locked main > .shopify-section:not(#intro-layer) *,
body.archive-unlocking main > .shopify-section:not(#intro-layer) * {
  animation-play-state: paused !important;
}

body.archive-ready main > .shopify-section * {
  animation-play-state: running;
}

/* Nebula: static soft gradients (no filters, no per-frame blur work). */
.cosmic-lock::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 32% 38%, rgba(126, 72, 196, 0.11), transparent 70%),
    radial-gradient(ellipse 40% 30% at 74% 60%, rgba(220, 68, 150, 0.08), transparent 70%),
    radial-gradient(ellipse 34% 26% at 58% 22%, rgba(80, 140, 220, 0.07), transparent 70%);
  opacity: 0.85;
}

.cosmic-lock__space,
.cosmic-lock__memories,
.cosmic-lock__draw,
.cosmic-lock__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cosmic-lock__space {
  z-index: 0;
  display: block;
}

/* After unlock the starfield lives inside the archive's atmosphere layer. */
.ml-atmosphere > .cosmic-lock__space {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.ml-atmosphere.has-cosmic-sky > .ml-stars-canvas {
  display: none;
}

.cosmic-lock__memories {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
}

.cosmic-lock.is-awake .cosmic-lock__memories {
  animation: memoryCanvasArrival 2.4s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.cosmic-lock__veil {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(2,1,8,0.18), transparent 18%, transparent 72%, rgba(2,1,8,0.55)),
    radial-gradient(ellipse at center, transparent 32%, rgba(4,1,12,0.15) 68%, rgba(2,1,7,0.62));
  pointer-events: none;
}

.cosmic-lock__draw {
  z-index: 4;
  display: block;
  outline: none;
  cursor: crosshair;
  touch-action: none;
}

/* Password pill */
.sky-password {
  position: absolute;
  z-index: 8;
  bottom: max(1.45rem, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  width: min(18.5rem, calc(100vw - 2rem));
  justify-items: center;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.cosmic-lock.is-awake .sky-password {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.9s;
}

.sky-password::before {
  position: absolute;
  z-index: -1;
  top: -1.75rem;
  left: 50%;
  width: 150%;
  height: 8.5rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74, 47, 125, 0.18), transparent 67%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.sky-password input {
  width: 100%;
  height: 3.15rem;
  padding: 0 1.2rem;
  border: 1px solid rgba(231, 217, 255, 0.17);
  border-radius: 999px;
  outline: none;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.035), transparent 42%, rgba(168,110,235,0.035)),
    rgba(5, 2, 13, 0.44);
  box-shadow:
    0 16px 50px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.035),
    inset 0 0 24px rgba(121, 78, 195, 0.025);
  color: transparent;
  caret-color: #f4eaff;
  cursor: text;
  font: 600 0.98rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.31em;
  text-align: center;
  text-shadow: 0 0 0 rgba(250, 245, 255, 0.92);
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.sky-password input:hover,
.sky-password input:focus {
  border-color: rgba(206, 177, 255, 0.42);
  background:
    linear-gradient(100deg, rgba(255,255,255,0.055), transparent 42%, rgba(201,112,228,0.05)),
    rgba(7, 3, 17, 0.64);
  box-shadow:
    0 18px 55px rgba(0,0,0,0.34),
    0 0 34px rgba(116, 79, 203, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.sky-password button {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  margin-top: 0.65rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(239, 220, 255, 0.24);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(142,103,237,0.85), rgba(209,80,158,0.8));
  box-shadow:
    0 12px 35px rgba(111,62,185,0.35),
    0 0 24px rgba(255,100,177,0.12),
    inset 0 1px 0 rgba(255,255,255,0.24);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px) scale(0.72);
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.25s ease,
    box-shadow 0.25s ease;
}

.sky-password button span {
  display: block;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  transform: translate(-1px, 1px);
}

.sky-password.is-ready button {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sky-password.is-ready button:hover,
.sky-password.is-ready button:focus-visible {
  filter: brightness(1.15);
  box-shadow:
    0 16px 42px rgba(126,68,204,0.42),
    0 0 35px rgba(255,105,183,0.22),
    inset 0 1px 0 rgba(255,255,255,0.28);
  transform: translateY(-2px) scale(1.04);
}

.sky-password.is-wrong input {
  border-color: rgba(255, 92, 137, 0.58);
  box-shadow: 0 0 35px rgba(255, 66, 128, 0.16), inset 0 0 22px rgba(255,55,114,0.06);
  animation: skyInputWrong 0.48s ease;
}

.sky-password__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Opening choreography ------------------------------------------- */

.cosmic-lock.is-opening .sky-password {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.32s ease, transform 0.5s ease;
}

.cosmic-lock.is-opening .cosmic-lock__memories {
  opacity: 0;
  transform: scale(1.035);
  animation: none;
  transition: opacity 0.62s ease, transform 0.9s cubic-bezier(0.2, 0.72, 0.2, 1);
}

.cosmic-lock.is-opening .cosmic-lock__draw {
  opacity: 0;
  transition: opacity 0.7s 0.15s ease;
}

.cosmic-lock.is-opening::before,
.cosmic-lock.is-opening .cosmic-lock__veil {
  opacity: 0;
  transition: opacity 0.9s ease;
}

/* ---- Intro layer: the opening particle sequence over the sky --------- */

#intro-layer {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#intro-layer .particle-landing {
  height: 100%;
}

#intro-layer.is-handing-off {
  opacity: 0;
  pointer-events: none;
}

html.nbb-intro-skipped #intro-layer {
  display: none;
}

/* ---- Keyframes ------------------------------------------------------- */

@keyframes memoryCanvasArrival {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}

@keyframes skyInputWrong {
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 620px) {
  .sky-password {
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: min(17rem, calc(100vw - 1.5rem));
  }

  .sky-password input { height: 3rem; }
  .sky-password button { width: 2.55rem; height: 2.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-lock.is-awake .cosmic-lock__memories {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .cosmic-lock.is-awake .sky-password { transition-delay: 0s; }
  .cosmic-lock { transition-duration: 0.15s; transition-delay: 0s; }
  #intro-layer { transition-duration: 0.15s; }
}