/* ============================================================
   Конверт-сцена: только PNG-кадры (4 стадии открытия).
   SVG-fallback убран — раньше он просвечивал сквозь PNG и давал
   странную «тень» на старте.
   ============================================================ */

.envelope-scene {
  position: fixed;
  inset: 0;
  z-index: var(--z-envelope);
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 30%,
                    color-mix(in oklab, var(--color-paper) 95%, transparent) 0%,
                    var(--color-bg) 55%,
                    var(--color-bg-deep) 100%);
  transition: opacity 600ms var(--ease-in-out),
              visibility 0s linear 600ms;
  overflow: hidden;
}
.envelope-scene.is-gone {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
/* Когда сцена уходит — конверт улетает ВВЕРХ, чтобы не было застывшего кадра. */
.envelope-scene.is-gone .envelope {
  transform: translateY(-48px) scale(0.94);
  transition: transform 600ms var(--ease-out-expo);
  animation: none;
  opacity: 0.4;
}

/* Парящие точки на фоне сцены */
.envelope-scene__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.envelope-scene__particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: 0;
  animation: env-particle 8s var(--ease-in-out) infinite;
}
.envelope-scene__particles span:nth-child(1) { left: 12%; top: 18%; animation-delay: 0s;   width: 5px; height: 5px; }
.envelope-scene__particles span:nth-child(2) { left: 85%; top: 22%; animation-delay: 1.2s; width: 4px; height: 4px; opacity: 0.6; }
.envelope-scene__particles span:nth-child(3) { left: 22%; top: 70%; animation-delay: 2.4s; }
.envelope-scene__particles span:nth-child(4) { left: 78%; top: 68%; animation-delay: 3.6s; width: 7px; height: 7px; }
.envelope-scene__particles span:nth-child(5) { left: 50%; top: 12%; animation-delay: 4.8s; }
.envelope-scene__particles span:nth-child(6) { left: 8%;  top: 50%; animation-delay: 5.2s; width: 3px; height: 3px; }
.envelope-scene__particles span:nth-child(7) { left: 92%; top: 50%; animation-delay: 6.4s; }
.envelope-scene__particles span:nth-child(8) { left: 50%; top: 88%; animation-delay: 7.6s; width: 5px; height: 5px; }
@keyframes env-particle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  20%, 80% { opacity: 0.55; }
  50%      { opacity: 1; transform: translateY(-20px) scale(1); }
}

/* === Кнопка-конверт === */
.envelope {
  --w: clamp(280px, 60vw, 540px);
  --h: var(--w);                  /* квадрат под формат 1200×1200 PNG */

  position: relative;
  width: var(--w);
  height: var(--h);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 600ms var(--ease-out-expo);
  animation: env-breathe 4.5s var(--ease-in-out) infinite;
}
.envelope:hover { transform: translateY(-6px) scale(1.01); }
@keyframes env-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* === Подсказка над конвертом === */
.envelope__hint {
  position: absolute;
  top: -88px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  white-space: nowrap;
  pointer-events: none;
  animation: env-hint-bob 2.4s var(--ease-in-out) infinite;
}
.envelope__hint-text {
  font-family: var(--font-hand);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
}
.envelope__hint-arrow {
  width: 22px;
  height: 28px;
  color: var(--color-gold);
  opacity: 0.85;
}
@keyframes env-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0);  opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
.envelope.is-open .envelope__hint {
  opacity: 0;
  animation: none;
  transition: opacity 200ms ease-out;
}

/* === Стопка из 4 PNG-кадров === */
.envelope__photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.envelope__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  /* drop-shadow убран: у твоих PNG уже есть свой shadow, два слоя
     давали странную «двойную тень» вокруг конверта в стартовом кадре. */
}
/* Стартовое состояние: видна только первая фотка. */
.envelope__photo--1 { opacity: 1; }

/* Анимация перелистывания: длительность 1600мс синхронизирована с OPEN_DELAY=1700 в envelope.js. */
.envelope.is-open .envelope__photo--1 { animation: env-fade-1 1600ms forwards ease-out; }
.envelope.is-open .envelope__photo--2 { animation: env-fade-2 1600ms forwards ease-out; }
.envelope.is-open .envelope__photo--3 { animation: env-fade-3 1600ms forwards ease-out; }
.envelope.is-open .envelope__photo--4 { animation: env-fade-4 1600ms forwards ease-out; }

@keyframes env-fade-1 {
  0%    { opacity: 1; }
  18%   { opacity: 0; }
  100%  { opacity: 0; }
}
@keyframes env-fade-2 {
  0%, 10% { opacity: 0; }
  20%     { opacity: 1; }
  38%     { opacity: 1; }
  48%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes env-fade-3 {
  0%, 40% { opacity: 0; }
  50%     { opacity: 1; }
  68%     { opacity: 1; }
  78%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes env-fade-4 {
  0%, 70% { opacity: 0; transform: translateY(0); }
  82%     { opacity: 1; transform: translateY(-8px); }
  100%    { opacity: 1; transform: translateY(-24px); }
}

@media (prefers-reduced-motion: reduce) {
  .envelope, .envelope__hint, .envelope-scene__particles span {
    animation: none !important;
  }
  .envelope.is-open .envelope__photo--1,
  .envelope.is-open .envelope__photo--2,
  .envelope.is-open .envelope__photo--3 { animation: none; opacity: 0; }
  .envelope.is-open .envelope__photo--4 { animation: none; opacity: 1; }
}