/* Sonaë Universe — ouverture cinématique et transitions entre pages (v13.2). Chargée après universe-premium.css. */

/* ── Arrivée : la page qui reçoit une transition se dévoile depuis le noir ── */
html.sr-arriving body::after{content:'';position:fixed;inset:0;z-index:9990;background:#020a12;pointer-events:none;animation:sr-arrive 1s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes sr-arrive{from{opacity:1}to{opacity:0;visibility:hidden}}

/* ── Transition (v13.5) : fondu au noir → le portail s'ouvre en iris sur le film (zoom lent, balayage de lumière, poussière
   d'or, vignette) → légende ornée → filet de progression → fondu au noir → page suivante depuis le noir ── */
.sr-cinema-cut{display:grid!important;position:fixed;inset:0;z-index:10000;background:#020a12;isolation:isolate;opacity:0;transition:opacity .32s ease}
.sr-cinema-cut.sr-cut-visible{opacity:1}
.sr-cut-scene{position:absolute;inset:0;z-index:-2;clip-path:circle(0% at 50% 50%);opacity:0;transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.sr-cut-playing .sr-cut-scene{clip-path:circle(142% at 50% 50%);opacity:1}
.sr-cinema-cut video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform;transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.sr-cut-playing video{transform:scale(1.0)}
.sr-cut-light{position:absolute;inset:-10%;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(243,211,154,.22) 50%,transparent 62%);mix-blend-mode:screen;transform:translateX(-70%);opacity:0}
.sr-cut-playing .sr-cut-light{animation:sr-cut-light 1.7s .2s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes sr-cut-light{0%{transform:translateX(-70%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(70%);opacity:0}}
.sr-cut-dust{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .8s .3s}
.sr-cut-playing .sr-cut-dust{opacity:.9}
.sr-cinema-cut::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 32%,rgba(2,10,18,.5) 76%,rgba(2,10,18,.94)),linear-gradient(180deg,rgba(2,10,18,.72),transparent 24%,transparent 66%,rgba(2,10,18,.97))}
.sr-cinema-cut::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;box-shadow:inset 0 1px 0 rgba(243,211,154,.28),inset 0 -1px 0 rgba(243,211,154,.28);opacity:0;transition:opacity .8s .3s}
.sr-cut-playing::after{opacity:1}
.sr-cut-caption{align-self:end;text-align:center;margin-bottom:13vh;padding:0 1rem;text-shadow:0 .1em .6em rgba(0,0,0,.85);position:relative;z-index:1}
.sr-cut-caption::before{content:'──── ◇ ────';display:block;color:var(--sr-gold,#d8b675);font-size:.9rem;letter-spacing:.32em;opacity:0;transform:translateY(.6rem);transition:opacity .5s .12s,transform .5s .12s;margin-bottom:.9rem}
.sr-cut-caption span{display:block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sr-gold,#d8b675);opacity:0;transform:translateY(.5rem);transition:opacity .45s .22s,transform .45s .22s}
.sr-cut-caption strong{display:block;font-family:var(--font-display,'Cormorant Garamond',serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.05;color:#f6dfa6;margin-top:.35rem;letter-spacing:.01em;text-shadow:0 1px 0 #cfae66,0 2px 0 #957a3d,0 .12em .3em rgba(0,0,0,.6),0 .4em 1em rgba(0,0,0,.55);opacity:0;transform:translateY(.8rem) scale(.98);filter:blur(4px);transition:opacity .6s .3s,transform .8s .3s cubic-bezier(.2,.8,.2,1),filter .6s .3s}
.sr-cut-playing .sr-cut-caption::before,.sr-cut-playing .sr-cut-caption span,.sr-cut-playing .sr-cut-caption strong{opacity:1;transform:none;filter:blur(0)}
.sr-cut-progress{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--sr-gold-dark,#8a6a2b),var(--sr-gold-light,#f5db9e));box-shadow:0 0 .8rem rgba(243,211,154,.6);z-index:2}
.sr-cut-playing .sr-cut-progress{animation:sr-cut-progress var(--cut-ms,1.85s) linear forwards}
@keyframes sr-cut-progress{from{width:0}to{width:100%}}
.sr-cut-playing /* Fin de scène : tout retourne au noir */
.sr-cut-out .sr-cut-scene,.sr-cut-out .sr-cut-caption,.sr-cut-out .sr-cut-dust,.sr-cut-out .sr-cut-out .sr-cut-progress{animation-play-state:paused}
.sr-cut-fast .sr-cut-scene,.sr-cut-fast .sr-cut-caption{transition-duration:.15s!important}
/* La page que l'on quitte s'assombrit sous le voile */
html.sr-cinema-leaving body>main,html.sr-cinema-leaving body>.sr-header{transition:filter .4s ease;filter:brightness(.6)}
@media(max-width:760px){.sr-cut-caption{margin-bottom:16vh}.sr-cut-caption strong{font-size:2.1rem}html.sr-cinema-leaving body>main,html.sr-cinema-leaving body>.sr-header{filter:none}}
@media(prefers-reduced-motion:reduce){.sr-cinema-cut,html.sr-reduced .sr-cinema-cut{display:none!important}}

/* ── Ouverture (v13.6) : le sceau seul ── */
.sr-intro{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;background:#020a12;overflow:hidden;isolation:isolate;cursor:pointer}
.sr-intro[hidden]{display:none}
html.sr-intro-ready .sr-intro[hidden]{display:grid!important}
html.sr-intro-ready body{overflow:hidden}
html.sr-intro-ready body.sr-intro-done{overflow:visible}
body.sr-intro-open{overflow:hidden}
.sr-intro .sr-intro-glow{position:absolute;left:50%;top:50%;width:min(140vw,72rem);aspect-ratio:1;transform:translate(-50%,-50%) scale(.55);border-radius:50%;background:radial-gradient(circle,rgba(215,170,87,.34) 0%,rgba(215,170,87,.14) 24%,rgba(120,97,45,.06) 42%,transparent 62%);opacity:0;transition:opacity 1.6s ease,transform 2.6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.sr-intro.sr-intro-s1 .sr-intro-glow{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sr-intro canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1s}
.sr-intro.sr-intro-s2 canvas{opacity:.9}
.sr-intro .sr-intro-emblem{position:relative;z-index:2;width:clamp(11rem,26vw,17rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.sr-intro .sr-intro-ring{position:absolute;inset:-7%;width:114%;height:114%;transform:rotate(-90deg);pointer-events:none}
.sr-intro .sr-intro-ring circle{fill:none;stroke:var(--sr-gold,#d8b675);stroke-width:.55;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .1s;filter:drop-shadow(0 0 .35rem rgba(243,211,154,.6))}
.sr-intro.sr-intro-s1 .sr-intro-ring circle{stroke-dashoffset:0}
.sr-intro .sr-intro-logo{width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:0;transform:scale(.8);filter:blur(12px) brightness(1.25);transition:opacity 1.2s ease,transform 1.7s cubic-bezier(.2,.8,.2,1),filter 1.3s ease;box-shadow:0 0 0 1px rgba(243,211,154,.35),0 1.2rem 3rem rgba(0,0,0,.7),0 0 4rem rgba(215,170,87,.35)}
.sr-intro.sr-intro-s2 .sr-intro-logo{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}
.sr-intro .sr-intro-sweep{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:3}
.sr-intro .sr-intro-sweep::after{content:'';position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,240,200,.55) 50%,transparent 60%);transform:translateX(-80%);mix-blend-mode:screen;opacity:0}
.sr-intro.sr-intro-s3 .sr-intro-sweep::after{animation:sr-intro-sweep 1.1s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes sr-intro-sweep{0%{transform:translateX(-80%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(80%);opacity:0}}
.sr-intro .sr-intro-hint{position:absolute;bottom:calc(1.4rem + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(238,225,194,.4);opacity:0;transition:opacity 1s 1.4s;pointer-events:none;margin:0}
.sr-intro.sr-intro-s2 .sr-intro-hint{opacity:1}
.sr-intro.sr-intro-out{transition:opacity .75s ease;opacity:0;pointer-events:none}
.sr-intro.sr-intro-out .sr-intro-logo{transition:transform .8s ease,filter .8s ease;transform:scale(1.08);filter:blur(0) brightness(1.6)}
.sr-intro.sr-intro-out .sr-intro-glow{transition:transform .8s ease,opacity .6s;transform:translate(-50%,-50%) scale(1.3);opacity:0}
@media(prefers-reduced-motion:reduce){.sr-intro{display:none!important}}