/* ALBANOVA · Edición Cinta de Seda / 13 nov 2026.
   CSS sin dependencias; piezas de lazo: SVG original con gradientes.
   La riqueza material fotorrealista absoluta requiere elementos 3D prerenderizados (Blender).
*/
:root{--navy:#203e58;--blue:#487a9e;--ice:#e5f4fc;--ivory:#fffaf2}
html{scroll-padding-top:0}
.intro{background:radial-gradient(ellipse at 50% 20%,#fffdf9 0%,#eef8ff 38%,#c3deef 100%)}
.envelope-stage.royal-envelope{width:min(97vw,555px,calc((100svh - 119px)*.708));max-height:calc(100svh - 119px);filter:drop-shadow(0 26px 35px rgba(23,65,94,.26));}
.royal-envelope .envelope-shell{box-shadow:0 2px 0 #f5fcff,inset 0 0 0 9px rgba(255,255,255,.22),inset 6px 5px 30px rgba(35,76,103,.22),0 16px 27px rgba(28,69,95,.26)}
.royal-envelope .envelope-shell::before{opacity:1;filter:drop-shadow(1px 2px 1px rgba(50,95,118,.42))}
.royal-envelope .pocket{background:linear-gradient(130deg,#a6cce0 0%,#b8d9ea 12%,#6f9fbe 42%,#d9f0fa 62%,#679ab9 100%)}
.royal-envelope .pocket:before{opacity:.94;filter:drop-shadow(1px 2px 2px rgba(46,77,112,.29))}
.royal-envelope .wax{z-index:15;filter:drop-shadow(0 7px 6px rgba(25,59,83,.5))}
.ribbon-theatre{position:absolute;inset:0;pointer-events:none;z-index:17;transform:translateZ(4px);}
.silk-band{position:absolute;display:block;filter:drop-shadow(0 7px 6px rgba(25,61,85,.25));border:1px solid rgba(240,251,255,.42);background:linear-gradient(95deg,#1b4461 0%,#85b4d2 18%,#edfbff 34%,#7aa9c9 43%,#336687 64%,#c5e4f4 85%,#2c5475 100%);}
.silk-vertical{height:100%;width:10%;left:45%;top:0;background:linear-gradient(90deg,#264a69,#8bbbd6 18%,#f7feff 39%,#5e90b1 60%,#326185 85%,#9bc6e1)}
.silk-horizontal{width:100%;height:7%;top:40.8%;left:0}
.satin-bow{position:absolute;z-index:3;width:93%;left:3.5%;top:26%;overflow:visible;filter:drop-shadow(0 14px 8px rgba(24,68,95,.3));transform-origin:50% 48%;}
.bow-loop,.bow-tail,.bow-knot,.bow-jewel{transform-box:fill-box;transform-origin:center;}
/* Al tocar: los lazos se abren, las colas se deslizan y la cinta sale del sobre. */
.intro.is-opening .bow-loop-left{animation:silkLoopL 1.5s .08s cubic-bezier(.17,.6,.22,1) both}
.intro.is-opening .bow-loop-right{animation:silkLoopR 1.55s .07s cubic-bezier(.17,.6,.22,1) both}
.intro.is-opening .bow-tail-left{animation:silkTailL 1.65s .23s cubic-bezier(.24,.75,.25,1) both}
.intro.is-opening .bow-tail-right{animation:silkTailR 1.65s .23s cubic-bezier(.24,.75,.25,1) both}
.intro.is-opening .bow-knot,.intro.is-opening .bow-jewel{animation:silkKnot 1.6s .18s cubic-bezier(.22,.66,.2,1) both}
.intro.is-opening .silk-band.silk-vertical{animation:silkBandV 1.7s .75s cubic-bezier(.19,.65,.23,1) both}
.intro.is-opening .silk-band.silk-horizontal{animation:silkBandH 1.6s .85s cubic-bezier(.19,.65,.23,1) both}
.intro.is-opening .satin-bow{animation:silkDepart .75s 1.53s ease-in both}
@keyframes silkLoopL{0%,15%{transform:rotate(0) scale(1);opacity:1}45%{transform:rotate(-13deg) translate(-7px,4px)}100%{transform:translate(-115px,-43px) rotate(-82deg) scale(.63);opacity:0}}
@keyframes silkLoopR{0%,15%{transform:rotate(0) scale(1);opacity:1}45%{transform:rotate(15deg) translate(9px,2px)}100%{transform:translate(116px,-40px) rotate(85deg) scale(.6);opacity:0}}
@keyframes silkTailL{0%,18%{transform:rotate(0);opacity:1}60%{transform:rotate(-18deg) translate(-25px,20px)}100%{transform:translate(-108px,132px) rotate(-48deg);opacity:0}}
@keyframes silkTailR{0%,18%{transform:rotate(0);opacity:1}60%{transform:rotate(18deg) translate(22px,17px)}100%{transform:translate(111px,140px) rotate(55deg);opacity:0}}
@keyframes silkKnot{0%,25%{transform:scale(1);opacity:1}57%{transform:scale(.91) rotate(11deg)}100%{transform:translateY(-120px) scale(.4) rotate(35deg);opacity:0}}
@keyframes silkBandV{0%,15%{transform:translateY(0);opacity:1}100%{transform:translateY(-125%);opacity:0}}
@keyframes silkBandH{0%,15%{transform:translateX(0);opacity:1}100%{transform:translateX(115%);opacity:0}}
@keyframes silkDepart{to{opacity:0}}
/* Sobre -> extracción de carta: fases sin superposición accidental. */
.intro.is-opening .royal-envelope .wax{animation:realWax 1s 2.03s cubic-bezier(.2,.72,.21,1) both}
.intro.is-opening .royal-envelope .flap{animation:curvedFlap 1.68s 2.85s cubic-bezier(.22,.72,.18,1) both}
.intro.is-opening .royal-envelope .folded-letter{animation:paperExtraction 5.45s 3.16s cubic-bezier(.18,.72,.18,1) both}
.intro.is-opening .royal-envelope .unfold-panel.left-panel{animation:unfoldLeft 1.45s 6.06s cubic-bezier(.18,.72,.18,1) both}
.intro.is-opening .royal-envelope .unfold-panel.right-panel{animation:unfoldRight 1.45s 6.06s cubic-bezier(.18,.72,.18,1) both}
.intro.is-opening .royal-envelope .pocket,.intro.is-opening .royal-envelope .envelope-shell,.intro.is-opening .envelope-liner,.intro.is-opening .envelope-gold-edge,.intro.is-opening .royal-envelope .envelope-date,.intro.is-opening .royal-envelope .envelope-floral-edges{animation:envelopeRetire 1.25s 6s cubic-bezier(.24,.68,.27,1) both}
.intro.is-opening .butterfly-theatre{animation:butterflyJourney 4.15s 5.1s cubic-bezier(.22,.61,.21,1) both}
.intro.is-opening .intro-footer,.intro.is-opening .intro-eyebrow,.intro.is-opening .intro-line{animation:coverWordsHide 1s 6.1s both}
.intro.is-opening .intro-glint.g1{animation:glitter 2.1s 5.5s both}
.intro.is-opening .intro-glint.g2{animation:glitter 2.1s 6.5s both}
/* La invitación se lee como páginas; los controles prácticos siguen accesibles al final. */
.invitation{background:#eef6fa}
.story-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:rgba(201,225,237,.44);z-index:80;pointer-events:none}
.story-progress>div{height:100%;background:linear-gradient(90deg,#6eaccb,#244d6d);transform-origin:left;transform:scaleX(0);will-change:transform}
.cinema-scene{min-height:100svh;position:relative;overflow:hidden;isolation:isolate;scroll-margin:0;transition:background-color 1s ease}
.cinema-scene:not(.events):not(.rsvp){display:flex;flex-direction:column;align-items:center;justify-content:center}
.cinema-scene::selection{background:#8eabc8}
.atelier-floral{position:absolute;width:min(70vw,360px);aspect-ratio:1;pointer-events:none;z-index:1;background:url('assets/flores-azul.webp') center/contain no-repeat;opacity:0;filter:drop-shadow(0 14px 10px rgba(36,74,99,.22));transition:opacity 1.3s ease,transform 2s cubic-bezier(.18,.75,.16,1)}
.atelier-floral-tr{top:-45px;right:-94px;transform:translate3d(60px,-50px,0) rotate(16deg) scale(.8)}
.atelier-floral-bl{bottom:-125px;left:-115px;transform:translate3d(-65px,65px,0) rotate(198deg) scale(.8);opacity:0}
.cinema-scene.in-view .atelier-floral-tr{opacity:.66;transform:translate3d(0,0,0) rotate(-10deg) scale(1)}
.cinema-scene.in-view .atelier-floral-bl{opacity:.42;transform:translate3d(0,0,0) rotate(176deg) scale(.92)}
.cinema-scene.in-view .scene-ornament .engrave-art path{transition-duration:2.2s;stroke:#5384a4}
.cinema-scene.in-view .reveal.visible{transition-duration:1.15s,1.3s}
.cinema-scene h2{position:relative;z-index:2}
.cinema-scene:not(.events):not(.rsvp) .eyebrow{position:relative;z-index:2}
.cinema-scene .scene-ornament{z-index:2;filter:drop-shadow(1px 2px 1px rgba(44,84,114,.16));}
.hero{background:radial-gradient(circle at 50% 34%,#fffefb 0%,#eef8fc 50%,#aacbe0 100%)}
.story{background:radial-gradient(ellipse at 30% 50%,#204763 0%,#356f90 51%,#173c58 100%)}
.promise{background:linear-gradient(135deg,#dceff7 0%,#fffaf3 48%,#bad8e9 100%)}
.family{background:radial-gradient(ellipse at 50% 45%,#fffdf7 0%,#e7f4fb 55%,#c4deec 100%)}
.goodbye{background:radial-gradient(circle at 50% 50%,#fffefa,#e1eef5 63%,#96bcd6)}
.events{padding-top:100px;padding-bottom:100px}
.events:before,.rsvp:before{pointer-events:none}
.events .event-card,.rsvp-card{transition:transform .9s cubic-bezier(.18,.7,.19,1),opacity .8s,box-shadow .5s}
.events .event-card.visible{box-shadow:0 17px 40px rgba(38,73,103,.22)}
/* Intentionally no clothing section and no animation-skip button. */
@media(max-width:560px){
  .envelope-stage.royal-envelope{width:min(98vw,calc((100svh - 106px)*.708));max-height:calc(100svh - 106px)}
  .intro-button{margin-top:9px}
  .atelier-floral{width:270px}
  .atelier-floral-tr{right:-136px;top:-55px}
  .atelier-floral-bl{left:-141px;bottom:-130px}
  .cinema-scene:not(.events):not(.rsvp){padding-top:95px;padding-bottom:90px}
}
@media(prefers-reduced-motion:reduce){
 .intro.is-opening .ribbon-theatre{opacity:0!important;transition:opacity .12s!important}
 .intro.is-opening .royal-envelope .folded-letter{animation:none!important;opacity:1!important}
 .atelier-floral{transition:none!important}
 .cinema-scene.in-view .atelier-floral{transform:none!important;opacity:.35!important}
}

/* Fundido de página al entrar y navegación por escenas, sin permitir omitir la apertura. */
.scene-wash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:1;will-change:opacity;background:linear-gradient(160deg,rgba(248,253,255,.87),rgba(219,238,250,.9));transition:opacity 1.5s cubic-bezier(.16,.71,.21,1)}
.story .scene-wash{background:linear-gradient(160deg,#244965,#497b9c)}
.cinema-scene.in-view .scene-wash{opacity:0}
.next-scene{position:fixed;z-index:78;bottom:19px;right:max(15px,calc((100vw - 700px)/2 + 22px));border:1px solid rgba(255,255,255,.6);border-radius:50px;padding:10px 16px;letter-spacing:.17em;font:700 10px var(--sans);background:rgba(30,66,92,.86);color:#fff;box-shadow:0 8px 24px rgba(28,58,80,.28);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .35s,transform .35s}
body.opened .next-scene.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.next-scene:hover{background:#194868;transform:translateY(-2px)!important}
@media(prefers-reduced-motion:reduce){.scene-wash{transition:none;opacity:0!important}}