/* ─────────────────────────────────────────────────────────────
   Переменные и база
   ───────────────────────────────────────────────────────────── */
:root {
  --wine-1: #2a1420;
  --wine-2: #3d1c2e;
  --wine-3: #14090f;
  --gold: #e3bd93;
  --gold-soft: #d0a97f;
  --rose: #e6a2b2;
  --cream: #f6ebe1;
  --cream-dim: #cdb6ac;

  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --script: 'Marck Script', 'Cormorant Garamond', cursive;
}

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

html,
body {
  height: 100%;
}

body {
  font-family: var(--serif);
  color: var(--cream);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--wine-2) 0%, var(--wine-1) 42%, var(--wine-3) 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Мягкое свечение на фоне (статичный градиент — без blur/анимации: 0 нагрузки) */
.bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 50% at 30% 22%, rgba(230, 162, 178, 0.12), transparent 70%),
    radial-gradient(55% 55% at 75% 72%, rgba(227, 189, 147, 0.10), transparent 70%);
  pointer-events: none;
}

/* Плавающие сердечки */
.hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.heart {
  position: absolute;
  bottom: -40px;
  color: var(--rose);
  animation-name: heart-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes heart-rise {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-115vh) rotate(40deg); }
}

/* ─────────────────────────────────────────────────────────────
   Экраны
   ───────────────────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 1s ease, transform 1s ease, visibility 1s;
  z-index: 2;
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 3;
}

/* ─────────────────────────────────────────────────────────────
   Экран 1 — пароль
   ───────────────────────────────────────────────────────────── */
.lock-card {
  position: relative;
  width: min(92vw, 440px);
  padding: 46px 34px 40px;
  text-align: center;
  background: linear-gradient(160deg, rgba(61, 28, 46, 0.96), rgba(20, 9, 15, 0.97));
  border: 1px solid rgba(227, 189, 147, 0.28);
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: card-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.lock-card.is-unlocked {
  opacity: 0;
  transform: scale(1.06);
}

.lock-seal {
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--wine-3);
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--gold-soft));
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(227, 189, 147, 0.35), inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  animation: seal-pulse 3.4s ease-in-out infinite;
}
@keyframes seal-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.lock-hint {
  font-family: var(--script);
  font-size: clamp(20px, 5vw, 27px);
  line-height: 1.35;
  color: var(--gold);
  margin-bottom: 26px;
}

.lock-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lock-input {
  width: 100%;
  padding: 15px 18px;
  text-align: center;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(227, 189, 147, 0.3);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.lock-input::placeholder {
  color: rgba(205, 182, 172, 0.5);
  letter-spacing: 6px;
}
.lock-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(227, 189, 147, 0.15);
}

.lock-error {
  min-height: 20px;
  margin-top: 16px;
  font-size: 16px;
  font-style: italic;
  color: var(--rose);
  opacity: 0.9;
}

/* тряска при неверном пароле */
.shake {
  animation: shake 0.5s ease;
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* ─────────────────────────────────────────────────────────────
   Кнопки
   ───────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 1.5px;
  color: var(--wine-3);
  background: linear-gradient(145deg, var(--gold), var(--gold-soft));
  border: none;
  border-radius: 40px;
  padding: 13px 34px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
  box-shadow: 0 10px 26px rgba(227, 189, 147, 0.28);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(227, 189, 147, 0.4);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
   Экран 2 — послание + дождь
   ───────────────────────────────────────────────────────────── */
.rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.tile {
  position: absolute;
  top: -160px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(246, 235, 225, 0.7);
  animation: fall var(--dur, 12s) linear var(--delay, 0s) infinite;
  transform: translateZ(0) rotate(var(--tilt, 0deg));
  /* каждый тайл — отдельный GPU-слой, анимация идёт без нагрузки на CPU */
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #5a2a3d, #2f1420);
}
.tile--placeholder span {
  color: var(--rose);
  font-size: 26px;
  opacity: 0.75;
}
@keyframes fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg));
  }
  50% {
    transform: translate3d(var(--sway, 16px), 55vh, 0) rotate(calc(var(--tilt, 0deg) * -1));
  }
  100% {
    transform: translate3d(0, 120vh, 0) rotate(var(--tilt, 0deg));
  }
}

/* Светящееся ядро вихря */
.vortex-core {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 230, 0.95), rgba(230, 162, 178, 0.6) 40%, transparent 70%);
  box-shadow: 0 0 60px 20px rgba(227, 189, 147, 0.35);
  opacity: 0;
  z-index: 150;
  pointer-events: none;
}
.vortex-core.is-forming {
  transition: transform 2.8s ease-in, opacity 1.8s ease-in;
  transform: translate(-50%, -50%) scale(6);
  opacity: 0.9;
}
.vortex-core.is-burst {
  transition: transform 0.7s ease-out, opacity 0.8s ease-out;
  transform: translate(-50%, -50%) scale(26);
  opacity: 0;
}

.message-wrap {
  position: relative;
  z-index: 4;
  width: min(92vw, 560px);
  display: flex;
  justify-content: center;
}
.message-card {
  width: 100%;
  padding: 44px 38px 34px;
  text-align: center;
  background: linear-gradient(160deg, rgba(28, 13, 20, 0.94), rgba(20, 9, 15, 0.96));
  border: 1px solid rgba(227, 189, 147, 0.26);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transition: opacity 0.6s ease, transform 0.7s ease;
}
.message-card.is-leaving {
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
}
.message-text {
  margin-bottom: 30px;
}
.message-line {
  font-size: clamp(20px, 4.4vw, 27px);
  line-height: 1.6;
  color: var(--cream);
  opacity: 0;
  animation: line-in 1.4s ease forwards;
}
.message-line:first-child {
  font-family: var(--script);
  color: var(--gold);
  font-size: clamp(23px, 5vw, 31px);
}
@keyframes line-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Экран 3 — видео
   ───────────────────────────────────────────────────────────── */
.screen--video {
  flex-direction: column;
  gap: 30px;
}
.video-frame {
  position: relative;
  width: min(92vw, 860px);
  max-height: 72vh;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(227, 189, 147, 0.35);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  background: #0c0509;
  animation: frame-in 1.3s ease both;
}
@keyframes frame-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
.video-el {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0c0509;
  display: block;
}
.video-frame.is-empty::after {
  content: 'Видео появится здесь ✶';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cream-dim);
  font-size: 20px;
  font-style: italic;
}
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  display: none;
  place-items: center;
  font-size: 30px;
  color: var(--wine-3);
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--gold-soft));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding-left: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.video-play.is-visible {
  display: grid;
  animation: seal-pulse 2.2s ease-in-out infinite;
}

.btn--end {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(227, 189, 147, 0.5);
  box-shadow: none;
}
.btn--end:hover {
  background: rgba(227, 189, 147, 0.1);
  box-shadow: 0 0 24px rgba(227, 189, 147, 0.25);
}
.btn--end.is-glow {
  animation: end-glow 1.8s ease-in-out infinite;
}
@keyframes end-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(227, 189, 147, 0); }
  50% { box-shadow: 0 0 28px rgba(227, 189, 147, 0.5); }
}

/* ─────────────────────────────────────────────────────────────
   Адаптив / мелкие экраны
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .screen {
    padding: 16px;
  }
  .lock-card,
  .message-card {
    padding: 34px 22px 28px;
  }
  /* Если текст длинный — карточка послания скроллится, не обрезается */
  .message-card {
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .message-wrap {
    width: min(94vw, 560px);
  }
  .screen--video {
    gap: 20px;
  }
  .video-frame {
    width: 94vw;
    max-height: 62vh;
  }
  .btn {
    padding: 14px 30px; /* удобно нажимать пальцем */
  }
  .lock-seal {
    margin-bottom: 18px;
  }
}

/* Низкие экраны (телефон в альбомной ориентации) */
@media (max-height: 520px) {
  .video-frame {
    max-height: 68vh;
  }
  .lock-card {
    padding-top: 28px;
    padding-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart,
  .bg-glow,
  .seal-pulse,
  .tile {
    animation-duration: 0.001s !important;
  }
}