/*
 * Écran surprise : deux bougies animées (l'une souffle l'autre), la nuit tombe, un chat noir
 * apparaît avec les remerciements, puis retour automatique à l'accueil (géré par js/app.js).
 * Animation reprise telle quelle du site d'origine.
 */
.surprise-page{align-items:center;background-color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;opacity:1;overflow:hidden;position:fixed;top:0;transition:background-color .5s ease,opacity 1s ease-in-out;width:100vw;z-index:999}
.surprise-page.dark-mode{background-color:#161616}
.surprise-page.fade-out-transition{opacity:0;pointer-events:none}
.credits{color:#fff;font-family:VT323,monospace;font-size:1.5rem;line-height:1.4;margin-top:50px;opacity:0;text-align:center;transform:translateY(20px);transition:opacity 2s ease,transform 2s ease;z-index:10}
.credits.show-credits{opacity:1;transform:translateY(0)}
.credits p{margin:5px 0}
.heart{font-size:2rem;margin-top:10px}
.candles-wrapper{left:50%;position:absolute;top:70%;transform:scale(1.5) translate(-50%,-50%);transition:opacity .5s}
.floor{background:#673c63;box-shadow:0 2px 5px #111;height:5px;transform:translate(-50%,-50%);width:350px;z-index:2}
.candles,.floor{left:50%;position:absolute;top:50%}
.candles{height:150px;transform:translate(-50%,-100%);width:250px;z-index:1}
.candle1{animation:expand-body 3s linear infinite;background:#fff;border:3px solid #673c63;border-bottom:0;border-radius:3px;box-shadow:inset -2px 0 #95c6f2;height:100px;left:50%;position:absolute;top:50%;transform:translate(60%,-25%);transform-origin:center right;width:35px}
.candle1__stick,.candle2__stick{background:#673c63;border-radius:8px;height:15px;left:50%;position:absolute;top:0;transform:translate(-50%,-100%);width:3px}
.candle2__stick{animation:stick-animation 3s linear infinite;height:12px;transform-origin:bottom center}
.candle1__eyes,.candle2__eyes{height:30px;left:50%;position:absolute;top:0;transform:translate(-50%);width:35px}
.candle1__eyes-one{left:30%}
.candle1__eyes-one,.candle1__eyes-two{animation:blink-eyes 3s linear infinite;background:#673c63;border-radius:100%;height:5px;position:absolute;top:20%;transform:translate(-70%);width:5px}
.candle1__eyes-two{left:70%}
.candle1__mouth{animation:uff 3s linear infinite;background:#673c63;border-radius:20px;height:0;left:40%;position:absolute;top:20%;transform:translate(-50%,-50%);width:0}
.candle__smoke-one{animation:move-left 3s linear infinite;height:3px;top:50%;width:30px}
.candle__smoke-one,.candle__smoke-two{background:gray;left:30%;position:absolute;transform:translate(-50%,-50%)}
.candle__smoke-two{animation:move-top 3s linear infinite;border-radius:10px;height:10px;top:40%;width:10px}
.candle2{animation:shake-left 3s linear infinite;background:#fff;border:3px solid #673c63;border-bottom:0;border-radius:3px;box-shadow:inset -2px 0 #95c6f2;height:60px;left:20%;position:absolute;top:65%;transform:translate(60%,-15%);transform-origin:center right;width:42px}
.candle2__eyes-one{animation:changeto-lower 3s linear infinite;left:30%}
.candle2__eyes-one,.candle2__eyes-two{background:#673c63;border:0 solid #673c63;border-radius:100%;display:inline-block;float:left;height:5px;position:absolute;top:50%;transform:translate(-80%);width:5px}
.candle2__eyes-two{animation:changeto-greater 3s linear infinite;left:70%}
.light__wave{animation:expand-light 3s linear infinite;border:2px solid hsla(0,0%,100%,.2);border-radius:100%;height:75px;left:35%;position:absolute;top:35%;transform:translate(-25%,-50%) scale(2.5);width:75px;z-index:0}
.candle2__fire{animation:dance-fire 3s linear infinite;background-color:red;background:#ff9800;border-radius:50%/60% 60% 40% 40%;display:block;height:20px;left:40%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px}
@keyframes blink-eyes{0%,35%{opacity:1;transform:translate(-70%)}
36%,39%{opacity:0;transform:translate(-70%)}
40%{opacity:1;transform:translate(-70%)}
50%,65%{transform:translate(-140%)}
66%{transform:translate(-70%)}
}
@keyframes expand-body{0%,40%{transform:scale(1) translate(60%,-25%)}
45%,55%{transform:scale(1.1) translate(60%,-28%)}
60%{transform:scale(.89) translate(60%,-25%)}
65%{transform:scale(1) translate(60%,-25%)}
70%{transform:scale(.95) translate(60%,-25%)}
75%{transform:scale(1) translate(60%,-25%)}
}
@keyframes uff{0%,40%{height:0;width:0}
50%,54%{height:15px;left:30%;width:15px}
59%{height:5px;left:20%;width:5px}
62%{height:2px;left:20%;width:2px}
67%{height:0;left:30%;width:0}
}
@keyframes move-left{0%,59%,to{left:40%;width:0}
60%{left:30%;width:30px}
68%{left:20%;width:0}
}
@keyframes move-top{0%,64%,to{height:0;top:0;width:0}
65%{height:10px;left:40%;top:40%;width:10px}
80%{height:0;top:20%;width:0}
}
@keyframes shake-left{0%,40%{left:20%;transform:translate(60%,-15%)}
50%,54%{left:20%;transform:translate(60%,-15%)}
59%{left:20%;transform:translate(60%,-15%)}
62%{left:18%;transform:translate(60%,-15%)}
65%{left:21%;transform:translate(60%,-15%)}
67%{left:20%;transform:translate(60%,-15%)}
75%{background:#fff;border-color:#673c63;left:20%;transform:scale(1.15,.85) translate(60%,-15%)}
91%{background:#f44336;border-color:#f44336;box-shadow:inset -2px 0 #f44336;left:20%;transform:scale(1.18,.82) translate(60%,-10%)}
92%{left:20%;transform:scale(.85,1.15) translate(60%,-15%)}
95%{left:20%;transform:scale(1.05,.95) translate(60%,-15%)}
97%{left:20%;transform:scale(1) translate(60%,-15%)}
}
@keyframes stick-animation{0%,40%{left:50%;top:0;transform:translate(-50%,-100%)}
50%,54%{left:50%;top:0;transform:translate(-50%,-100%)}
59%{left:50%;top:0;transform:translate(-50%,-100%)}
62%{left:50%;top:0;transform:rotate(-15deg) translate(-50%,-100%)}
65%{left:50%;top:0;transform:rotate(15deg) translate(-50%,-100%)}
70%{left:50%;top:0;transform:rotate(-5deg) translate(-50%,-100%)}
72%{left:50%;top:0;transform:rotate(5deg) translate(-50%,-100%)}
74%,84%{left:50%;top:0;transform:rotate(0) translate(-50%,-100%)}
85%{transform:rotate(180deg) translateY(120%)}
92%{left:50%;top:0;transform:translate(-50%,-100%)}
}
@keyframes expand-light{10%,29%,59%,89%{border:2px solid hsla(0,0%,100%,0);transform:translate(-25%,-50%) scale(0)}
20%,50%,90%{transform:translate(-25%,-50%) scale(1)}
26%,27%,56%,57%,95%,96%{border:2px solid hsla(0,0%,100%,.5);transform:translate(-25%,-50%) scale(2)}
0%,28%,58%,to{border:2px solid hsla(0,0%,100%,.2);transform:translate(-25%,-50%) scale(2.5)}
}
@keyframes dance-fire{59%,89%{height:0;left:40%;width:0}
0%,15%,23%,31%,39%,47%,55%,7%,90%{background:#ffc107;height:20px;left:40.8%;width:16px}
11%,19%,27%,3%,35%,43%,51%,58%,94%{background:#ff9800;height:20px;left:41.2%;width:16px}
}
@keyframes changeto-lower{0%,70%,90%{background:#673c63;border:0 solid #673c63;border-radius:100%;display:inline-block;padding:0;transform:translate(-90%)}
71%,89%{background:none;border:solid #673c63;border-radius:0;border-width:0 2px 2px 0;display:inline-block;float:left;padding:1px;transform:rotate(-45deg) translate(-50%,-65%);-webkit-transform:rotate(-45deg) translate(-50%,-65%);transform-origin:bottom left}
}
@keyframes changeto-greater{0%,70%,90%{background:#673c63;border:0 solid #673c63;border-radius:100%;display:inline-block;padding:0;top:50%;transform:translate(-80%)}
71%,89%{background:none;border:solid #673c63;border-radius:0;border-width:0 2px 2px 0;display:inline-block;float:left;padding:1px;top:30%;transform:rotate(135deg) translate(-80%,20%);-webkit-transform:rotate(135deg) translate(-80%,20%);transform-origin:bottom left}
}
.night-cat-container{display:none;opacity:0;transform:scale(1.5) translateY(150px);transition:transform 1.5s ease-out,opacity 1.5s ease-out}
.night-cat-container.appear{opacity:1;transform:scale(1.5) translateY(0)}
.night-cat{height:170px;position:relative;width:192.1px}
.surprise-page .ear{background:#fff;height:60%;position:absolute;top:-30%;width:25%}
.surprise-page .ear:after,.surprise-page .ear:before{background:#161616;border-radius:50%;bottom:24%;content:"";height:10%;position:absolute;width:5%}
.surprise-page .ear:after{transform-origin:50% 100%}
.surprise-page .ear--left{border-radius:70% 30% 0 0/100% 100% 0 0;left:-7%;transform:rotate(-15deg)}
.surprise-page .ear--left:after,.surprise-page .ear--left:before{right:10%}
.surprise-page .ear--left:after{transform:rotate(-45deg)}
.surprise-page .ear--right{border-radius:30% 70% 0 0/100% 100% 0 0;right:-7%;transform:rotate(15deg)}
.surprise-page .ear--right:after,.surprise-page .ear--right:before{left:10%}
.surprise-page .ear--right:after{transform:rotate(45deg)}
.surprise-page .face{background:#161616;border-radius:50%;height:100%;width:100%}
.surprise-page .eye,.surprise-page .face{position:absolute}
.surprise-page .eye{background:#fff;border-radius:50%/60% 60% 40% 40%;height:30%;top:35%;width:31%}
.surprise-page .eye:after{animation:blink 4s ease-in infinite;background:#161616;border-radius:0 0 50% 50%/0 0 40% 40%;height:0;left:0;top:0;width:100%}
.surprise-page .eye:after,.surprise-page .eye:before{content:"";position:absolute}
.surprise-page .eye:before{background:#fff;border-radius:50%;height:10%;top:60%;width:15%}
.surprise-page .eye--left{left:0}
.surprise-page .eye--left:before{right:-5%}
.surprise-page .eye--right{right:0}
.surprise-page .eye--right:before{left:-5%}
.surprise-page .eye-pupil{animation:look-around 4s infinite;background:#161616;border-radius:50%;height:50%;position:absolute;top:25%;width:20%}
.surprise-page .eye--left .eye-pupil{right:30%}
.surprise-page .eye--right .eye-pupil{left:30%}
.surprise-page .eye-pupil:after{border-radius:50%;content:"";height:20%;right:-5%;top:30%;width:35%}
.surprise-page .eye-pupil:after,.surprise-page .muzzle{background:#fff;position:absolute}
.surprise-page .muzzle{border-radius:50%/30% 30% 70% 70%;height:6%;left:50%;top:60%;transform:translate(-50%);width:10%}
@keyframes blink{0%{height:0}
90%{height:0}
92.5%{height:100%}
95%{height:0}
97.5%{height:100%}
to{height:0}
}
@keyframes look-around{0%{transform:translate(0)}
5%{transform:translate(50%,-25%)}
10%{transform:translate(50%,-25%)}
15%{transform:translate(-100%,-25%)}
20%{transform:translate(-100%,-25%)}
25%{transform:translate(0)}
to{transform:translate(0)}
}