/* ===========================================================================
   El sobre lacrado — lo primero que ve un invitado, solo en su primera visita
   (plan portada-y-diseno §7). Idea de Anabel.

   Séptima versión (24/09/2026). Las anteriores pasaban fotos de una a otra y
   eso nunca iba a parecer una animación. Ahora es una animación de verdad:

     · el sobre (la foto de Álvaro y Anabel) ocupa TODA la pantalla;
     · sus CUATRO solapas están recortadas de esa misma foto y **giran a la vez**
       sobre sus bordes, en 3D, a 60 imágenes por segundo;
     · debajo aparece el interior en penumbra, sale un destello dorado que
       ilumina toda la pantalla y, en esa luz, la tarjeta con los nombres;
     · después, la portada.

   Todas las capas viven dentro de `.sobre__escena`, que tiene exactamente la
   forma de la foto y se agranda hasta cubrir la pantalla. Así los recortes de
   las solapas (en %) caen justo donde están los dobleces del papel.

   Medidas sacadas de la foto: los cuatro dobleces se juntan en el lacre, que
   está en el centro, al 49 % de la altura.
   =========================================================================== */

/* Mientras el sobre está delante: la portada ni se ve ni gasta su animación. */
html.con-sobre body{overflow:hidden}
html.con-sobre .portada__col{visibility:hidden}
html.con-sobre .portada__marco,
html.con-sobre .portada__marco .portada__foto,
html.con-sobre .portada__contenido{animation-play-state:paused}

.sobre{display:none}
html.con-sobre .sobre{
  display:block;position:fixed;inset:0;z-index:100;background:#4f5c45;overflow:hidden;
  transition:opacity .9s ease;
  transition-delay:2.7s;                 /* no se va hasta que acaba la apertura */
}

/* La escena tiene la forma de la foto y se agranda hasta cubrir la pantalla:
   lo que sobra se sale por los lados, como en el vídeo de la referencia. */
.sobre__escena{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100vw, 100vh * 0.681);aspect-ratio:880/1292;
  /* Solo «perspective»: con «preserve-3d» las capas se ordenan por su sitio en
     el espacio y el interior tapaba las solapas. */
  perspective:1400px;
}

/* ── Las capas de papel ─────────────────────────────────────────────────── */
.sobre__capa{
  position:absolute;inset:0;
  background-image:url(/sobre.jpg);
  background-image:image-set(url(/sobre.webp) type("image/webp"), url(/sobre.jpg) type("image/jpeg"));
  background-size:100% 100%;background-repeat:no-repeat;
  backface-visibility:visible;
}
/* El interior: la misma foto en penumbra. Se ve al abrirse las solapas. */
.sobre__interior{z-index:1;filter:brightness(.55) saturate(.9) blur(1.5px)}

/* Las cuatro solapas, recortadas de la foto. Cada una gira sobre SU borde. */
.sobre__solapa{z-index:4;transition:transform 1.15s cubic-bezier(.45,.05,.2,1)}
.sobre__solapa--arriba{clip-path:polygon(0 0, 100% 0, 50% 49%);transform-origin:center top}
.sobre__solapa--abajo {clip-path:polygon(0 100%, 100% 100%, 50% 49%);transform-origin:center bottom}
.sobre__solapa--izq   {clip-path:polygon(0 0, 50% 49%, 0 100%);transform-origin:left center}
.sobre__solapa--der   {clip-path:polygon(100% 0, 50% 49%, 100% 100%);transform-origin:right center}

/* ── La luz de dentro y el fogonazo ─────────────────────────────────────── */
.sobre__luz{
  position:absolute;z-index:2;left:50%;top:49%;width:120%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
  background:radial-gradient(circle, rgba(255,246,219,.95) 0%, rgba(255,235,190,.6) 30%, rgba(255,230,180,0) 62%);
  mix-blend-mode:screen;
  transition:opacity .7s ease, transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.sobre__destello{
  position:absolute;z-index:6;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 49%, rgba(255,250,232,.95) 0%, rgba(255,242,214,.75) 35%, rgba(255,238,205,.45) 70%);
  transition:opacity .45s ease;
}
.sobre__destello--on{opacity:1}

/* ── La tarjeta que aparece en la luz ───────────────────────────────────── */
.sobre__carta{
  position:absolute;z-index:3;left:50%;top:49%;
  width:54%;aspect-ratio:.74;
  transform:translate(-50%,-50%) scale(.72);opacity:0;
  display:flex;align-items:center;justify-content:center;padding:1.4%;
  background:linear-gradient(170deg,#fffdf6 0%,#f6f1e3 100%);
  box-shadow:0 2px 8px rgba(28,34,20,.35), 0 26px 44px -22px rgba(28,34,20,.8);
  transition:transform 1s cubic-bezier(.25,.8,.3,1), opacity .6s ease;
}
.sobre__carta--fuera{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sobre__marco{
  flex:1;align-self:stretch;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9%;
  border:1px solid rgba(125,143,112,.5);outline:3px solid #fffdf6;outline-offset:-5px;
  padding:9% 8%;text-align:center;
}
.sobre__kicker{
  margin:0;font-size:clamp(7px,1.9vw,10px);letter-spacing:.32em;text-transform:uppercase;
  color:var(--acento-osc);
}
.sobre__nombres{
  margin:0;font-family:var(--serif);font-weight:400;line-height:1.15;
  font-size:clamp(18px,5vw,30px);color:var(--tinta);white-space:nowrap;
}
.sobre__nombres em{font-style:italic;color:var(--acento)}
/* Los números, en Jost: en Cormorant el 1 parece una I (regla de Álvaro). */
.sobre__fecha{
  margin:0;font-family:var(--sans);font-weight:300;
  font-size:clamp(9px,2.4vw,12px);letter-spacing:.42em;color:#6b675e;
}

/* ── La zona tocable, encima del lacre ──────────────────────────────────── */
.sobre__sello{
  position:absolute;z-index:7;left:50%;top:49%;transform:translate(-50%,-50%);
  width:30%;aspect-ratio:1;border:none;background:none;padding:0;
  border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.sobre__sello:focus-visible{outline:3px solid rgba(255,253,246,.9);outline-offset:6px}
.sobre__sello::after{
  content:'';position:absolute;inset:14%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,253,246,.7);
  animation:selloLatido 2.8s ease-in-out infinite;
}
@keyframes selloLatido{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.22);opacity:0}}

.sobre__pista{
  position:absolute;z-index:8;left:0;right:0;
  bottom:calc(7% + env(safe-area-inset-bottom));margin:0;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#fffdf6;
  text-align:center;text-shadow:0 1px 5px rgba(20,28,14,.85);
  transition:opacity .35s ease;animation:pistaRespira 3s ease-in-out infinite;
}
@keyframes pistaRespira{0%,100%{opacity:.6}50%{opacity:1}}

/* ── Abriendo ───────────────────────────────────────────────────────────── */
.sobre--abriendo .sobre__sello{pointer-events:none}
.sobre--abriendo .sobre__sello::after{animation:none;opacity:0}
/* «animation:none» además de la opacidad: si no, el latido del propio texto
   manda sobre el apagado y se queda encendido mientras se abre. */
.sobre--abriendo .sobre__pista{opacity:0;animation:none}
.sobre--abriendo .sobre__solapa--arriba{transform:rotateX(-158deg)}
.sobre--abriendo .sobre__solapa--abajo {transform:rotateX(158deg)}
.sobre--abriendo .sobre__solapa--izq   {transform:rotateY(158deg)}
.sobre--abriendo .sobre__solapa--der   {transform:rotateY(-158deg)}
.sobre--abriendo .sobre__luz{opacity:1;transform:translate(-50%,-50%) scale(1)}
html.con-sobre .sobre--abriendo{opacity:0}

/* Por si acaso: con «reducir movimiento» el script ni lo enseña, pero si
   llegara a verse, se abre sin aspavientos. */
@media (prefers-reduced-motion:reduce){
  .sobre,.sobre__solapa,.sobre__carta,.sobre__luz,.sobre__destello{transition-duration:.01ms !important}
  .sobre__sello::after,.sobre__pista{animation:none}
}