/* ---------- Animation d'ouverture des coffrets (Ludo.ouverture) ---------- */
.ouverture{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--fond-o);opacity:0;transition:opacity .45s ease;cursor:pointer;overflow:hidden}
.ouverture.on{opacity:1}
.ouverture .scene-o{position:relative;width:min(78vw,420px);height:calc(min(78vw,420px) * var(--ratio,1));perspective:1100px}
.ouverture .ferme-o{position:absolute;inset:12%;background:var(--img-ferme) center/contain no-repeat;animation:popo .6s cubic-bezier(.3,1.6,.6,1) both,secoue .5s ease-in-out .6s 2}
.ouverture .ouvert-o{position:absolute;inset:0;opacity:0}
.ouverture .couvercle,.ouverture .socle{position:absolute;left:0;width:100%;background:var(--img-ouvert) no-repeat;background-size:100% auto}
.ouverture .couvercle{top:0;height:var(--h-haut);background-position:top;transform-origin:50% 100%;transform:rotateX(-92deg)}
.ouverture .socle{bottom:0;height:var(--h-bas);background-position:bottom}
.ouverture .boite{position:absolute;inset:0;background:var(--img-ouvert) center/contain no-repeat;transform-origin:50% 85%}
.ouverture .halo{position:absolute;left:50%;top:50%;width:70%;height:70%;border-radius:50%;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,#fff 0,rgba(255,255,255,.7) 35%,transparent 70%);opacity:0}
.ouverture.ouvre .ferme-o{animation:disparait .25s ease forwards}
.ouverture.ouvre .ouvert-o{opacity:1;animation:rebond .7s cubic-bezier(.3,1.5,.6,1)}
.ouverture.ouvre .couvercle{transition:transform 1.1s cubic-bezier(.25,1.35,.5,1) .1s;transform:rotateX(0)}
.ouverture.ouvre .boite{animation:boing .9s cubic-bezier(.3,1.5,.5,1)}
.ouverture.ouvre .halo{animation:halo 1.1s ease-out}
.ouverture .eclats{position:absolute;inset:0;pointer-events:none}
.ouverture .eclats i{position:absolute;left:50%;top:52%;font-style:normal;font-size:24px;opacity:0}
.ouverture.ouvre .eclats i{animation:eclat 1.3s ease-out forwards;animation-delay:var(--d)}
.ouverture .titre-o{position:absolute;left:16px;right:16px;bottom:16%;margin:0;text-align:center;font:600 26px/1.2 Fraunces,Georgia,serif;color:#080808;opacity:0;transform:translateY(12px);transition:opacity .5s ease .5s,transform .5s ease .5s}
.ouverture.ouvre .titre-o{opacity:1;transform:none}
.ouverture .passer{position:absolute;bottom:22px;left:0;right:0;text-align:center;font:700 13px Montserrat,Arial,sans-serif;color:#080808}
@keyframes popo{from{transform:scale(.3) rotate(-10deg);opacity:0}}
@keyframes secoue{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes disparait{to{transform:scale(1.15);opacity:0;filter:brightness(1.6)}}
@keyframes rebond{0%{transform:scale(.85)}60%{transform:scale(1.04)}100%{transform:none}}
@keyframes boing{0%{clip-path:inset(40% 0 0 0);transform:scale(1.1,.8)}45%{clip-path:inset(0 0 0 0);transform:scale(.94,1.08)}70%{transform:scale(1.03,.97)}100%{clip-path:inset(0 0 0 0);transform:none}}
@keyframes halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@keyframes eclat{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.2) rotate(40deg)}}
@media (prefers-reduced-motion:reduce){.ouverture *{animation:none!important;transition:none!important}.ouverture .couvercle{transform:none}.ouverture .ferme-o{display:none}.ouverture .ouvert-o{opacity:1}}