/*------------------------------------------------------------------
  Envelope Overlay - Estilo sello de cera realista
  Fondo limpio + sello grande + listón diagonal
------------------------------------------------------------------*/

/* ══════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════ */
.envelope-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: linear-gradient(170deg, #f5ede4 0%, #efe6db 50%, #eadfd3 100%);
  transition: opacity 0.9s ease, visibility 0.9s ease;
  overflow: hidden;
}

.envelope-overlay.opened {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.envelope-closed {
  overflow: hidden;
}

/* ══════════════════════════════════════
   LISTÓN DIAGONAL (como en la foto)
   ══════════════════════════════════════ */
.seal-ribbon {
  position: absolute;
  top: 0; right: 0;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 20%,
    var(--wonderland-gold-light, #dbc88e) 40%,
    var(--wonderland-gold, #c5a55a) 50%,
    var(--wonderland-gold-light, #dbc88e) 60%,
    transparent 80%
  );
  transform-origin: center;
  transform: rotate(-35deg) translate(10%, -50vh);
  opacity: 0.35;
  pointer-events: none;
}

/* ══════════════════════════════════════
   TEXTO SUPERIOR
   ══════════════════════════════════════ */
.envelope-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  animation: envTextIn 0.8s ease 0.4s forwards;
}

.envelope-subtitle {
  font-family: 'Alice', serif;
  font-size: 13px;
  color: var(--wonderland-text, #5a5a6e);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.envelope-name {
  font-family: 'Great Vibes', cursive;
  font-size: 50px;
  color: var(--wonderland-heading, #4a6670);
  line-height: 1.1;
}

.envelope-date {
  font-family: 'Alice', serif;
  font-size: 13px;
  color: var(--wonderland-text, #5a5a6e);
  letter-spacing: 3px;
}

@media (max-width: 767px) {
  .envelope-name { font-size: 40px; }
  .envelope-subtitle { font-size: 11px; letter-spacing: 3px; }
  .envelope-date { font-size: 12px; }
}

@keyframes envTextIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   SELLO DE CERA - Grande y centrado
   ══════════════════════════════════════ */
.wax-seal {
  position: relative;
  width: 120px;
  height: 120px;
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  animation: sealAppear 0.6s ease 1s forwards;
}

@media (max-width: 767px) {
  .wax-seal {
    width: 105px;
    height: 105px;
  }
}

@keyframes sealAppear {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* Círculo de cera principal */
.wax-seal .seal-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(ellipse at 38% 32%,
      #c6dbe8 0%,
      #aecde0 12%,
      #9ec5d6 30%,
      #8bb8cc 50%,
      #7cadc2 70%,
      #6ea2b8 100%
    );
  box-shadow:
    0 6px 20px rgba(0,0,0,0.25),
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 4px 8px rgba(255,255,255,0.25),
    inset 0 -5px 10px rgba(0,0,0,0.18),
    inset 3px 2px 6px rgba(255,255,255,0.1),
    inset -3px -2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.wax-seal:hover .seal-circle {
  transform: scale(1.04);
}
.wax-seal:active .seal-circle {
  transform: scale(0.97);
}

/* Gotas irregulares de cera */
.wax-seal .seal-circle::after {
  content: "";
  position: absolute;
  top: -5px; left: -6px; right: -4px; bottom: -6px;
  border-radius: 48% 52% 45% 55% / 50% 46% 54% 50%;
  background: inherit;
  z-index: -1;
  opacity: 0.55;
  filter: blur(0.5px);
}

/* Anillo elevado interior (borde del sello) */
.seal-ring {
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.13);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.1),
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 1px rgba(0,0,0,0.06);
  pointer-events: none;
}

/* Área del grabado floral */
.wax-seal .seal-emboss {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.wax-seal .seal-rose {
  filter:
    drop-shadow(0 0.5px 0 rgba(0,0,0,0.12))
    drop-shadow(0 -0.5px 0 rgba(255,255,255,0.08));
}

@media (max-width: 767px) {
  .wax-seal .seal-emboss {
    width: 58px;
    height: 58px;
  }
  .wax-seal .seal-rose {
    width: 48px;
    height: 48px;
  }
}

/* Pulso que invita a tocar */
.wax-seal::before {
  content: "";
  position: absolute;
  top: -10px; left: -10px; right: -10px; bottom: -10px;
  border-radius: 50%;
  border: 2px solid rgba(197, 165, 90, 0.2);
  animation: sealPulse 2.5s ease-in-out 2s infinite;
  pointer-events: none;
}

@keyframes sealPulse {
  0%, 100% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

/* ══════════════════════════════════════
   TEXTO INFERIOR "Toca el sello"
   ══════════════════════════════════════ */
.envelope-tap-text {
  z-index: 2;
  font-family: 'Alice', serif;
  font-size: 13px;
  color: var(--wonderland-text, #5a5a6e);
  letter-spacing: 2px;
  opacity: 0;
  animation: tapIn 0.6s ease 1.6s forwards, tapBlink 2.5s ease-in-out 2.8s infinite;
}

.envelope-tap-text::before {
  content: "\2191";
  display: block;
  text-align: center;
  font-size: 16px;
  margin-bottom: 5px;
  opacity: 0.5;
  animation: arrowBounce 1.5s ease-in-out infinite;
}

@media (max-width: 767px) {
  .envelope-tap-text { font-size: 12px; }
}

@keyframes tapIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.6; transform: translateY(0); }
}

@keyframes tapBlink {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.25; }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ══════════════════════════════════════
   SOBRE QUE APARECE AL ABRIR
   (oculto por defecto)
   ══════════════════════════════════════ */
.envelope-shape {
  position: absolute;
  width: 320px;
  height: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  perspective: 600px;
}

@media (max-width: 767px) {
  .envelope-shape {
    width: 280px;
    height: 195px;
  }
}

/* Cuerpo del sobre */
.env-body {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 145px;
  background: linear-gradient(180deg, #f5efe6 0%, #eee7dc 50%, #e8e0d4 100%);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
  z-index: 3;
}

.env-body::after {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px solid rgba(197,165,90,0.1);
  border-radius: 0 0 3px 3px;
}

@media (max-width: 767px) {
  .env-body { height: 128px; }
}

/* Solapa del sobre */
.env-flap {
  position: absolute;
  bottom: 145px; left: 0;
  width: 100%; height: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 95px solid #ede6db;
  transform-origin: bottom center;
  transform: rotateX(0deg);
  z-index: 5;
  filter: drop-shadow(0 -2px 3px rgba(0,0,0,0.04));
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) {
  .env-flap {
    bottom: 128px;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-bottom: 82px solid #ede6db;
  }
}

/* Carta dentro del sobre */
.env-card {
  position: absolute;
  bottom: 12px; left: 14px; right: 14px;
  height: 175px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}

.env-card::before {
  content: "";
  position: absolute;
  top: 5px; left: 5px; right: 5px; bottom: 5px;
  border: 1px solid rgba(158,197,214,0.15);
  border-radius: 2px;
}

@media (max-width: 767px) {
  .env-card {
    bottom: 10px; left: 12px; right: 12px;
    height: 155px;
  }
}

.env-card-sub {
  font-family: 'Alice', serif;
  font-size: 11px;
  color: var(--wonderland-text, #5a5a6e);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.env-card-name {
  font-family: 'Great Vibes', cursive;
  font-size: 38px;
  color: var(--wonderland-heading, #4a6670);
  line-height: 1;
}

.env-card-line {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wonderland-gold, #c5a55a), transparent);
}

.env-card-date {
  font-family: 'Alice', serif;
  font-size: 12px;
  color: var(--wonderland-text, #5a5a6e);
  letter-spacing: 2px;
}

@media (max-width: 767px) {
  .env-card-name { font-size: 30px; }
}

/* ══════════════════════════════════════
   ANIMACIÓN DE APERTURA - 3 FASES
   ══════════════════════════════════════ */

/*
  FASE 1 (0-0.6s): Sello se rompe, texto y listón desaparecen
  FASE 2 (0.6-1.2s): Sobre aparece escalando al centro
  FASE 3 (1.2-2.8s): Solapa se abre, carta sube
  FASE 4 (3.2s+): Todo se desvanece
*/

/* FASE 1: Sello se rompe */
.envelope-overlay.opening .wax-seal {
  animation: sealCrack 0.6s ease forwards !important;
}

@keyframes sealCrack {
  0%   { transform: scale(1) rotate(0); opacity: 1; }
  40%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(0) rotate(20deg); opacity: 0; }
}

/* Fragmentos de cera */
.seal-fragment {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  border-radius: 40% 60% 50% 50%;
  background: linear-gradient(135deg, #9ec5d6, #6ea2b8);
  opacity: 0;
  pointer-events: none;
  z-index: 11;
}

.envelope-overlay.opening .seal-fragment:nth-child(1) { animation: sf1 0.7s ease 0.1s forwards; }
.envelope-overlay.opening .seal-fragment:nth-child(2) { animation: sf2 0.7s ease 0.15s forwards; }
.envelope-overlay.opening .seal-fragment:nth-child(3) { animation: sf3 0.7s ease 0.1s forwards; }
.envelope-overlay.opening .seal-fragment:nth-child(4) { animation: sf4 0.7s ease 0.15s forwards; }
.envelope-overlay.opening .seal-fragment:nth-child(5) { animation: sf5 0.7s ease 0.12s forwards; }
.envelope-overlay.opening .seal-fragment:nth-child(6) { animation: sf6 0.7s ease 0.18s forwards; }

@keyframes sf1 { 0%{transform:translate(-50%,-50%) scale(1);opacity:0} 15%{opacity:0.9} 100%{transform:translate(-50px,-65px) rotate(200deg) scale(0.3);opacity:0} }
@keyframes sf2 { 0%{transform:translate(-50%,-50%) scale(1);opacity:0} 15%{opacity:0.9} 100%{transform:translate(55px,-50px) rotate(-180deg) scale(0.2);opacity:0} }
@keyframes sf3 { 0%{transform:translate(-50%,-50%) scale(1);opacity:0} 15%{opacity:0.9} 100%{transform:translate(-45px,55px) rotate(150deg) scale(0.3);opacity:0} }
@keyframes sf4 { 0%{transform:translate(-50%,-50%) scale(1);opacity:0} 15%{opacity:0.9} 100%{transform:translate(50px,60px) rotate(-220deg) scale(0.2);opacity:0} }
@keyframes sf5 { 0%{transform:translate(-50%,-50%) scale(1);opacity:0} 15%{opacity:0.9} 100%{transform:translate(-65px,10px) rotate(260deg) scale(0.25);opacity:0} }
@keyframes sf6 { 0%{transform:translate(-50%,-50%) scale(1);opacity:0} 15%{opacity:0.9} 100%{transform:translate(65px,-12px) rotate(-140deg) scale(0.25);opacity:0} }

/* Texto y listón desaparecen */
.envelope-overlay.opening .envelope-text {
  animation: fadeUp 0.4s ease 0.1s forwards;
}

.envelope-overlay.opening .envelope-tap-text {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease;
}

.envelope-overlay.opening .seal-ribbon {
  animation: fadeUp 0.4s ease 0.2s forwards;
}

@keyframes fadeUp {
  to { opacity: 0; transform: translateY(-20px); }
}

/* FASE 2: Sobre aparece */
.envelope-overlay.opening .envelope-shape {
  animation: envAppear 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

@keyframes envAppear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* FASE 3: Solapa se abre + carta sube */
.envelope-overlay.opening .env-flap {
  transform: rotateX(180deg);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.4s;
}

.envelope-overlay.opening .env-card {
  transform: translateY(-220px);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 2s;
}

@media (max-width: 767px) {
  .envelope-overlay.opening .env-card {
    transform: translateY(-195px);
  }
}

/* FASE 4: Todo se desvanece */
.envelope-overlay.opening {
  animation: overlayOut 0.9s ease 3.2s forwards;
}

@keyframes overlayOut {
  to { opacity: 0; visibility: hidden; }
}

/* ══════════════════════════════════════
   BOTÓN FLOTANTE DE MÚSICA
   ══════════════════════════════════════ */
.music-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wonderland-rose-dark, #d4829f), var(--wonderland-rose, #e8b4c8));
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(212, 130, 159, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  visibility: hidden;
}

.music-btn.visible {
  opacity: 1;
  visibility: visible;
  animation: musicBtnIn 0.5s ease forwards;
}

.music-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(212, 130, 159, 0.5);
}

.music-btn:active {
  transform: scale(0.95);
}

.music-btn .eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.music-btn .eq-bars .bar {
  width: 3px;
  background: #fff;
  border-radius: 2px;
  animation: eqBar 0.8s ease-in-out infinite alternate;
}

.music-btn .eq-bars .bar:nth-child(1) { height: 8px;  animation-delay: 0s; }
.music-btn .eq-bars .bar:nth-child(2) { height: 14px; animation-delay: 0.2s; }
.music-btn .eq-bars .bar:nth-child(3) { height: 6px;  animation-delay: 0.4s; }
.music-btn .eq-bars .bar:nth-child(4) { height: 12px; animation-delay: 0.1s; }

.music-btn.paused .eq-bars .bar {
  animation: none;
  height: 4px !important;
  transition: height 0.3s ease;
}

@keyframes eqBar {
  0%   { height: 4px; }
  100% { height: 18px; }
}

@keyframes musicBtnIn {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (max-width: 767px) {
  .music-btn {
    width: 44px;
    height: 44px;
    bottom: 18px;
    right: 18px;
  }
}