/* =====================================================================
   Amo Invitar! · Sobre lacrado de entrada (Premium y Deluxe)
   Reemplaza el modal de música: al tocar el lacre se abre la solapa de
   arriba (con el lacre), después las otras tres, se desvanece el sobre,
   aparece la invitación y empieza la música.

   Formas de las solapas: máscaras PNG sacadas del diseño en PSD
   (img/sobre/mascara-*.png). Papel: color × textura en grises.
   Por modelo, en el style del #sobre:
     --sobre-papel  color de las solapas
     --sobre-fondo  color del interior / cuerpo del sobre
     --sobre-lacre  color del lacre
     --sobre-tinta  color de "Tocar para abrir la invitación"
     --sobre-filo   intensidad del filo de luz (más bajo en sobres oscuros)
   El texto de bienvenida toma la fuente y el color del modelo (inline).
   ===================================================================== */
#sobre {
  --sobre-papel: #f5eae4;
  --sobre-fondo: #ddd0ca;
  --sobre-lacre: #c2a46c;
  --sobre-tinta: rgba(58, 51, 40, .85);
  --sobre-filo: .55;
  position: fixed; inset: 0; z-index: 100000;
  overflow: hidden; cursor: pointer;
  background: var(--sobre-fondo);
  -webkit-tap-highlight-color: transparent;
}
html:has(#sobre) { overflow: hidden; }

/* Lienzo 16:9 que cubre la pantalla: el mismo sobre horizontal en
   escritorio y en celular (en celular se recorta a los lados) */
#sobre .sobre__lienzo {
  --w: max(100vw, 177.78vh);
  --h: max(100vh, 56.25vw);
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
}

/* Papel: color × textura en grises */
#sobre .sobre__papel, #sobre .sobre__canto, #sobre .sobre__filo { position: absolute; inset: 0; }
#sobre .sobre__papel {
  background-color: var(--sobre-papel);
  background-image: url(../img/sobre/papel.webp);
  background-size: calc(var(--h) * .6);
  background-blend-mode: multiply;
}
#sobre .sobre__fondo { background-color: var(--sobre-fondo); }

/* ---------- Solapas ---------- */
#sobre .sobre__ala, #sobre .sobre__sombra { position: absolute; inset: 0; }
#sobre .sobre__ala--der    { --mascara: url(../img/sobre/mascara-der.png); }
#sobre .sobre__ala--izq    { --mascara: url(../img/sobre/mascara-izq.png); }
#sobre .sobre__ala--abajo  { --mascara: url(../img/sobre/mascara-abajo.png); }
#sobre .sobre__ala--arriba { --mascara: url(../img/sobre/mascara-arriba.png); }
#sobre .sobre__ala .sobre__papel, #sobre .sobre__canto, #sobre .sobre__filo {
  -webkit-mask: var(--mascara) 0 0 / 100% 100% no-repeat;
          mask: var(--mascara) 0 0 / 100% 100% no-repeat;
}
/* Grosor del papel: un canto más oscuro de un lado y un filo de luz del otro */
#sobre .sobre__canto { background: var(--sobre-papel); filter: brightness(.74); }
#sobre .sobre__filo  { background: #fff; opacity: var(--sobre-filo); }
#sobre .sobre__ala--arriba .sobre__canto { transform: translateY(calc(var(--h) * .0026)); }
#sobre .sobre__ala--arriba .sobre__filo  { transform: translateY(calc(var(--h) * -.0012)); }
#sobre .sobre__ala--abajo  .sobre__canto { transform: translateY(calc(var(--h) * -.0022)); }
#sobre .sobre__ala--abajo  .sobre__filo  { transform: translateY(calc(var(--h) * .0012)); }
#sobre .sobre__ala--izq    .sobre__canto { transform: translateX(calc(var(--h) * .0022)); }
#sobre .sobre__ala--izq    .sobre__filo  { transform: translateX(calc(var(--h) * -.0012)); }
#sobre .sobre__ala--der    .sobre__canto { transform: translateX(calc(var(--h) * -.0022)); }
#sobre .sobre__ala--der    .sobre__filo  { transform: translateX(calc(var(--h) * .0012)); }

/* Volumen: cada hoja con una luz suave hacia el pliegue y sombra hacia la punta */
#sobre .sobre__ala .sobre__papel::after { content: ''; position: absolute; inset: 0; }
#sobre .sobre__ala--arriba .sobre__papel::after { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%, rgba(80,55,40,.06)); }
#sobre .sobre__ala--abajo  .sobre__papel::after { background: linear-gradient(0deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%, rgba(80,55,40,.07)); }
#sobre .sobre__ala--izq    .sobre__papel::after { background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%, rgba(80,55,40,.08)); }
#sobre .sobre__ala--der    .sobre__papel::after { background: linear-gradient(270deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%, rgba(80,55,40,.08)); }

/* Sombras suaves, como en el diseño */
#sobre .sobre__ala--izq > .sobre__sombra,
#sobre .sobre__ala--der > .sobre__sombra   { filter: drop-shadow(0 0 calc(var(--h) * .008) rgba(70, 45, 30, .2)); }
#sobre .sobre__ala--abajo > .sobre__sombra  { filter: drop-shadow(0 calc(var(--h) * -.003) calc(var(--h) * .012) rgba(70, 45, 30, .3)); }
#sobre .sobre__ala--arriba > .sobre__sombra { filter: drop-shadow(0 calc(var(--h) * .01) calc(var(--h) * .018) rgba(70, 45, 30, .38)); }

/* ---------- Textos ---------- */
#sobre .sobre__bienvenida, #sobre .sobre__texto {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(92vw, 90%); margin: 0; text-align: center;
  pointer-events: none;
}
/* Bienvenida: fuente y color del modelo; --bv-escala agranda las letras manuscritas */
#sobre .sobre__bienvenida {
  --bv-escala: 1;
  bottom: 59%;
  font-size: calc(min(var(--h) * .036, 6vw) * var(--bv-escala));
  line-height: 1.15; font-weight: 400;
}
#sobre .sobre__texto {
  top: 42.5%;
  font: italic 600 max(14px, min(calc(var(--h) * .023), 4.3vw))/1.3 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  color: var(--sobre-tinta); letter-spacing: .03em;
  opacity: 0; transition: opacity .8s ease;
}
#sobre.is-listo .sobre__texto { opacity: 1; }
/* Esperando la pantalla de PIN: todavía no se puede abrir */
#sobre.is-esperando { cursor: default; }
#sobre.is-esperando .sobre__texto { opacity: 0 !important; }
#sobre.is-esperando .sobre__lacre { pointer-events: none; }

/* ---------- Lacre (va pegado a la solapa de arriba) ---------- */
#sobre .sobre__lacre {
  --sello: calc(var(--h) * .21);
  position: absolute; left: 50%; top: 64%;
  width: var(--sello); height: var(--sello);
  margin: calc(var(--sello) / -2) 0 0 calc(var(--sello) / -2);
  padding: 0; border: 0; background: none; cursor: pointer;
  /* la sombra va dentro del SVG: un filter CSS acá rompe el relieve en Chrome */
  transform: rotate(-2deg);
}
#sobre .sobre__lacre svg { display: block; width: 100%; height: 100%; overflow: visible; }
#sobre .lacre-color { flood-color: var(--sobre-lacre); }
#sobre .sello-marca text { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif; font-weight: 500; }
#sobre .sobre__lacre:focus { outline: none; }
#sobre .sobre__lacre:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 4px; border-radius: 50%; }
#sobre:not(.is-listo) .sobre__lacre { animation: sobre-latido 2.2s ease-in-out infinite; }
@keyframes sobre-latido { 50% { transform: rotate(-2deg) scale(1.03); } }

/* ---------- Apertura ----------
   1) se presiona el lacre  2) se abre la solapa de arriba con el lacre
   3) se abren las otras tres  4) se desvanece y aparece la invitación */
/* El interior del sobre desaparece apenas empieza a abrirse: detrás ya se ve la invitación */
#sobre.is-abriendo { cursor: default; background: transparent; transition: background .25s ease; }
#sobre .sobre__ala { backface-visibility: visible; will-change: transform, opacity; }
#sobre .sobre__ala--arriba { transform-origin: 50% 0;    transition: transform 1.1s cubic-bezier(.45, .05, .3, 1) .18s, opacity .55s ease .7s; }
#sobre .sobre__ala--abajo  { transform-origin: 50% 100%; transition: transform 1.25s cubic-bezier(.45, .05, .3, 1) .5s, opacity .7s ease .9s; }
#sobre .sobre__ala--izq    { transform-origin: 0 50%;    transition: transform 1.25s cubic-bezier(.45, .05, .3, 1) .56s, opacity .7s ease .95s; }
#sobre .sobre__ala--der    { transform-origin: 100% 50%; transition: transform 1.25s cubic-bezier(.45, .05, .3, 1) .56s, opacity .7s ease .95s; }
#sobre .sobre__fondo { transition: opacity .25s ease; }
#sobre.is-abriendo .sobre__texto, #sobre.is-abriendo .sobre__bienvenida { opacity: 0; transition: opacity .3s; }
#sobre.is-abriendo .sobre__lacre { animation: sobre-presion .25s ease-out; }
@keyframes sobre-presion { 50% { transform: rotate(-2deg) scale(.95); } }
#sobre.is-abriendo .sobre__ala--arriba { transform: perspective(calc(var(--h) * 2.6)) rotateX(165deg); opacity: 0; }
#sobre.is-abriendo .sobre__ala--abajo  { transform: perspective(calc(var(--h) * 2.6)) rotateX(-150deg); opacity: 0; }
#sobre.is-abriendo .sobre__ala--izq    { transform: perspective(calc(var(--w) * 1.6)) rotateY(-150deg); opacity: 0; }
#sobre.is-abriendo .sobre__ala--der    { transform: perspective(calc(var(--w) * 1.6)) rotateY(150deg); opacity: 0; }
#sobre.is-abriendo .sobre__fondo { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #sobre .sobre__lacre { animation: none !important; }
  #sobre .sobre__ala, #sobre .sobre__fondo { transition: none; }
  #sobre { transition: opacity .5s ease; }
  #sobre.is-abriendo { opacity: 0; }
  #sobre.is-abriendo .sobre__ala { transform: none !important; opacity: 1; }
}