/* Experiencias: sobre con sello al abrir (solo para diseños con theme.intro). */

/* ---------- Sobre con sello (antes de la portada) ---------- */
.has-intro, .has-intro body { overflow: hidden; }
.iv-intro { position: fixed; inset: 0; z-index: 50; max-width: var(--iv-w); margin: 0 auto; overflow: hidden; perspective: 1400px; color: #fff; }
.is-embed .iv-intro { position: absolute; height: 844px; }
.iv-intro__body, .iv-intro__flap { position: absolute; inset: 0; overflow: hidden; }
.iv-intro__body img, .iv-intro__flap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iv-intro__body i, .iv-intro__flap i { position: absolute; inset: 0; mix-blend-mode: multiply; }
.is-light .iv-intro__body i, .is-light .iv-intro__flap i { mix-blend-mode: normal; }
.iv-intro__body { transition: transform 1s cubic-bezier(.6, 0, .2, 1) .45s, opacity .6s .75s; }
.iv-intro__fold { position: absolute; inset: 44% 0 0; z-index: 1; background: linear-gradient(to top right, transparent 49.7%, rgba(0, 0, 0, .12) 50%, transparent 50.6%) left / 50% 100% no-repeat, linear-gradient(to top left, transparent 49.7%, rgba(0, 0, 0, .12) 50%, transparent 50.6%) right / 50% 100% no-repeat; transition: opacity .4s .5s; }
.iv-intro__flap { z-index: 2; height: 58%; inset: 0 0 auto; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; filter: brightness(.86) drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); transition: transform .9s cubic-bezier(.5, 0, .2, 1) .2s; }
.iv-intro::after { content: ''; position: absolute; inset: 0 0 auto; z-index: 2; height: 58%; clip-path: polygon(0 0, 100% 0, 50% 100%, 49% 100%); background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, .18)); pointer-events: none; transition: opacity .3s; }
.iv-intro__script { position: absolute; z-index: 3; left: 0; right: 0; bottom: 22%; margin: 0; text-align: center; font-family: var(--iv-script); font-size: 3.4rem; color: rgba(40, 32, 26, .78); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); transform: rotate(-4deg); transition: opacity .4s; }
.iv-intro__seal { position: absolute; z-index: 4; top: 58%; left: 50%; width: 150px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .4s .2s; }
.iv-intro__seal svg { width: 100%; height: 100%; }
.iv-intro__seal:hover { transform: translate(-50%, -50%) scale(1.04); }
.iv-intro__seal:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 50%; }
.iv-intro__hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: 7%; margin: 0; text-align: center; font: 500 .66rem var(--iv-sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.is-light .iv-intro__hint { color: rgba(40, 32, 26, .7); text-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .iv-intro__seal svg { animation: seal-breathe 2.4s ease-in-out infinite; }
}
@keyframes seal-breathe { 50% { transform: scale(1.035); } }
/* Al abrir: el sello salta y se desvanece, la solapa gira, el sobre baja. */
.iv-intro.is-opening .iv-intro__seal { transform: translate(-50%, -80%) scale(1.25) rotate(-12deg); opacity: 0; }
.iv-intro.is-opening .iv-intro__flap { transform: rotateX(180deg); }
.iv-intro.is-opening::after, .iv-intro.is-opening .iv-intro__script, .iv-intro.is-opening .iv-intro__hint, .iv-intro.is-opening .iv-intro__fold { opacity: 0; }
.iv-intro.is-opening .iv-intro__body { transform: translateY(105%); }
.iv-intro.is-opening .iv-intro__flap { transition: transform .9s cubic-bezier(.5, 0, .2, 1) .2s, opacity .4s 1s; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .iv-intro * { transition-duration: .01s !important; transition-delay: 0s !important; }
}