:root {
  --bg: #0a1424; /* mély kékes éjszaka */
  --bg-soft: #0d1b30;
  --accent: #dfeaff; /* hűvös, kékes fehér */
  --pulse: rgba(120, 170, 255, 0.6);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100dvh; /* mobil: a böngésző sávjai ne ugráljanak */
  background: var(--bg);
  color: var(--accent);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ---------- Háttér galéria ---------- */
.gallery {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Külső réteg: pozíció + lágy beúszás (csak opacitás) */
.gallery__item {
  position: absolute;
  opacity: 0;
  animation: fadeIn 1.4s ease forwards;
  animation-delay: var(--delay, 0ms);
}

/* Belső réteg: a folyamatos, magától lebegő mozgás */
.gallery__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  filter: grayscale(25%) brightness(0.86) saturate(0.85)
    sepia(0.12) hue-rotate(180deg); /* finom kékes egységesítés */
  will-change: transform;
  animation: drift var(--dur, 20s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0ms);
  transform: rotate(var(--rot, 0deg));
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes fadeIn {
  to {
    opacity: var(--target-opacity, 0.85);
  }
}

/* Szelíd, organikus sodródás – minden kép más irányba/ütemben */
@keyframes drift {
  0% {
    transform: translate(0, 0) rotate(var(--rot, 0deg));
  }
  25% {
    transform: translate(var(--dx), calc(var(--dy) * -1))
      rotate(calc(var(--rot, 0deg) + var(--drot)));
  }
  50% {
    transform: translate(calc(var(--dx) * -0.6), var(--dy))
      rotate(var(--rot, 0deg));
  }
  75% {
    transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.5))
      rotate(calc(var(--rot, 0deg) - var(--drot)));
  }
  100% {
    transform: translate(0, 0) rotate(var(--rot, 0deg));
  }
}

/* ---------- Vignetta a középső gomb mögé ---------- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(10, 20, 36, 0.74) 0%,
    rgba(10, 20, 36, 0.46) 38%,
    rgba(10, 20, 36, 0.16) 70%,
    rgba(10, 20, 36, 0) 100%
  );
}

/* ---------- Középső szín ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}

/* ---------- Pulzáló gomb ---------- */
.pulse-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: rgba(120, 170, 255, 0.07);
  border: 1px solid rgba(160, 195, 255, 0.55);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  animation: breathe 2.6s ease-in-out infinite;
}

/* a kifelé táguló gyűrűk */
.pulse-btn::before,
.pulse-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--pulse);
  animation: ring 2.6s ease-out infinite;
}

.pulse-btn::after {
  animation-delay: 1.3s;
}

.pulse-btn:hover {
  transform: scale(1.06);
  background: rgba(120, 170, 255, 0.16);
  border-color: var(--accent);
}

/* kinyitás után: a hívogató animációk leállnak */
.pulse-btn.is-unlocked {
  animation: none;
  border-color: rgba(120, 170, 255, 0.35);
  cursor: default;
}

.pulse-btn.is-unlocked::before,
.pulse-btn.is-unlocked::after {
  animation: none;
  opacity: 0;
}

/* ---------- Lakat ---------- */
.lock {
  pointer-events: none;
  color: var(--accent);
  overflow: visible;
}

.lock__shackle {
  transform-box: view-box;
  transform-origin: 35px 58px; /* a bal láb alja = forgáspont */
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* nyitott állapot: a kengyel felpattan és kifordul */
.lock.is-open .lock__shackle {
  transform: translateY(-12px) rotate(-32deg);
}

.lock__body {
  transition: transform 0.25s ease;
}

.lock.is-open .lock__body {
  transform: translateY(0);
  animation: lockNudge 0.45s ease;
}

@keyframes lockNudge {
  30% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(1px);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* Akinek zavar a mozgás */
@media (prefers-reduced-motion: reduce) {
  /* A háttér lebegését szándékosan megtartjuk – ez a dizájn lényege.
     Csak a hívogató pulzálást halkítjuk le. */
  .pulse-btn,
  .pulse-btn::before,
  .pulse-btn::after {
    animation: none;
  }
}

/* ---------- Közös réteg (overlay) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /* saját, felső kompozit-réteg – hogy a galéria GPU-rétegei (will-change)
     mobil böngészőn ne tudjanak elé kerülni */
  isolation: isolate;
  transform: translateZ(0);
}

.overlay[hidden] {
  display: none;
}

/* ---------- Feladvány ---------- */
.puzzle {
  z-index: 9000;
  width: 100vw;
  height: 100dvh;
  padding: 6vw;
  /* 0.9 áttetszőség – a háttér képei épp csak átsejlenek */
  background: radial-gradient(
    circle at center,
    rgba(13, 27, 48, 0.9),
    rgba(10, 20, 36, 0.9)
  );
  animation: overlayIn 0.45s ease forwards;
}

.puzzle.is-closing {
  animation: overlayOut 0.4s ease forwards;
}

.puzzle__card {
  width: min(440px, 92vw);
  text-align: center;
  padding: 34px 28px;
  border-radius: 18px;
  background: rgba(13, 27, 48, 0.72);
  border: 1px solid rgba(160, 195, 255, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  /* nyugalmi állapot: látható – így a shake után sem tűnik el */
  opacity: 1;
  transform: none;
  animation: cardIn 0.5s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.puzzle__card.shake {
  animation: shake 0.4s ease;
}

.puzzle__q {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--accent);
  margin-bottom: 22px;
  letter-spacing: 0.01em;
}

.puzzle__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.puzzle__input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  text-align: center;
  color: var(--accent);
  background: rgba(120, 170, 255, 0.06);
  border: 1px solid rgba(160, 195, 255, 0.35);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.puzzle__input:focus {
  border-color: rgba(160, 195, 255, 0.8);
  background: rgba(120, 170, 255, 0.1);
}

.puzzle__input::placeholder {
  color: rgba(223, 234, 255, 0.4);
}

.puzzle__submit {
  width: 100%;
  padding: 14px 16px;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.puzzle__submit:hover {
  transform: translateY(-1px);
}

.puzzle__submit:active {
  transform: translateY(0);
  opacity: 0.85;
}

.puzzle__hint {
  min-height: 1.2em;
  margin-bottom: 14px;
  font-size: 0.86rem;
  color: rgba(255, 150, 150, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.puzzle__hint.show {
  opacity: 1;
}

/* ---------- Videó ---------- */
.video {
  z-index: 9999;
  background: #000;
  opacity: 0;
}

.video.is-in {
  animation: videoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.video.is-out {
  animation: overlayOut 0.8s ease forwards; /* a videó kifadel a vége után */
}

.video__el {
  width: 100vw;
  height: 100dvh;
  object-fit: contain; /* a 9:16 videó full screen, fekete kerettel ahol kell */
  background: #000;
}

/* A videó vége után üres háttér – galéria, vignetta és lakat eltűnik */
.finished .gallery,
.finished .vignette,
.finished .stage {
  display: none;
}

/* ---------- Záró szekció ---------- */
.outro {
  z-index: 10000;
  padding: 6vw;
  background: radial-gradient(
    circle at center,
    rgba(13, 27, 48, 0.92),
    rgba(10, 20, 36, 0.96)
  );
  animation: overlayIn 0.9s ease forwards; /* lágy befadelés */
}

.outro__title {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 16px;
}

.outro__text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(223, 234, 255, 0.85);
}

/* ---------- Réteg-animációk ---------- */
@keyframes overlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes overlayOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes videoIn {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(4px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-8px);
  }
  40%,
  60% {
    transform: translateX(8px);
  }
}