/* Fase 1: de poort.
   Geen navigatie, geen kop, geen scroll. Alleen leer, een gestempeld embleem
   en een gleuf. Wie hier komt weet meteen: dit is niet voor iedereen. */

.scene--gate {
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.gate__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  width: 100%;
  transition:
    transform var(--dur-3) var(--ease-both),
    opacity var(--dur-3) var(--ease-both),
    filter var(--dur-3) var(--ease-both);
}

.gate__emblem {
  width: min(58vw, 232px);
  perspective: 900px;
  /* Krimpen via scale, niet via width: breedte animeren dwingt de hele pagina
     tot herberekenen bij elke frame. */
  transform-origin: center bottom;
  transition: transform var(--dur-3) var(--ease-soft);
}

.emblem {
  width: 100%;
  height: auto;
  overflow: visible;
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8))
    drop-shadow(0 -1px 0 rgba(245, 227, 174, 0.14))
    drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5));
}

/* Het hart ademt, heel traag. Een gestempeld embleem op leer dat licht vangt. */
@keyframes emblem-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.022); }
}

.emblem__halves {
  animation: emblem-breathe 5.5s var(--ease-both) infinite;
  transform-origin: 50% 52%;
  transform-box: view-box;
  transform-style: preserve-3d;
}

.emblem__half {
  transform-box: view-box;
  transition: transform 880ms var(--ease-soft);
  backface-visibility: hidden;
}

.emblem__half--l {
  transform-origin: 34px 156px;
}

.emblem__half--r {
  transform-origin: 206px 156px;
}

.emblem__lock,
.emblem__shackle {
  transform-box: view-box;
}

.emblem__shackle {
  transform-origin: 136px 142px;
  transition: transform 300ms var(--ease-snap);
}

/* ---- De ontgrendeling ----------------------------------------------------
   Beugel open, slot valt, hart klapt open, camera duwt naar binnen. */

[data-state="opening"] .emblem__halves {
  animation: none;
}

[data-state="opening"] .emblem__shackle,
[data-state="parting"] .emblem__shackle,
[data-state="entering"] .emblem__shackle,
[data-state="open"] .emblem__shackle {
  transform: rotate(-62deg);
}

[data-state="opening"] .emblem__lock,
[data-state="parting"] .emblem__lock,
[data-state="entering"] .emblem__lock {
  animation: lock-fall 900ms var(--ease-drop) 300ms both;
}

@keyframes lock-fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  12% {
    transform: translateY(-8px) rotate(-3deg);
  }
  100% {
    transform: translateY(760px) rotate(38deg);
    opacity: 0.85;
  }
}

[data-state="parting"] .emblem__halves,
[data-state="entering"] .emblem__halves,
[data-state="open"] .emblem__halves {
  animation: none;
}

[data-state="parting"] .emblem__half--l,
[data-state="entering"] .emblem__half--l,
[data-state="open"] .emblem__half--l {
  transform: rotateY(-104deg);
}

[data-state="parting"] .emblem__half--r,
[data-state="entering"] .emblem__half--r,
[data-state="open"] .emblem__half--r {
  transform: rotateY(104deg);
}

[data-state="opening"] .gate__slot,
[data-state="parting"] .gate__slot,
[data-state="entering"] .gate__slot,
[data-state="open"] .gate__slot {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* De camera duwt door het geopende hart naar binnen, door karmijn heen. */
[data-state="entering"] .gate__stack {
  transform: scale(3.1);
  opacity: 0;
  filter: blur(14px);
}

.gate__veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    70% 55% at 50% 46%,
    var(--carmine) 0%,
    var(--carmine-deep) 46%,
    var(--leather-900) 100%
  );
  transition: opacity var(--dur-3) var(--ease-both);
}

[data-state="entering"] .gate__veil {
  opacity: 1;
}

/* ---- De gleuf ------------------------------------------------------------ */

.gate__slot {
  transition:
    opacity var(--dur-2) var(--ease-both),
    transform var(--dur-2) var(--ease-both);
}

.gate__act {
  align-self: center;
  min-width: 10rem;
}

.slot__hint--escalated {
  color: var(--gold-warm);
}

/* Als het toetsenbord opkomt, krimpt het embleem zodat het in beeld blijft. */
.is-typing .gate__emblem {
  transform: scale(0.64);
}

@media (min-height: 720px) {
  .gate__emblem {
    width: min(64vw, 280px);
  }
}