/* Toutes les animations et transitions. Coupées si l'utilisateur préfère réduire les mouvements. */

/* Fond de grille animée de l'inscription */
#waves{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:var(--wo,.1)}

/* Apparition des écrans : fondu et montée de 12 px */
.screen,.home{animation:in .45s ease both}
@keyframes in{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Chargement du calcul */
.ring .arc{transition:stroke-dashoffset .12s linear}
.h-ring .arc{transition:stroke-dashoffset .6s ease}

/* Fenêtres du bas : montée de 30 px */
.sheet{animation:up .25s ease both}
@keyframes up{from{transform:translate(-50%,30px);opacity:.001}to{transform:translate(-50%,0);opacity:1}}

/* Notifications : descente de 10 px */
.toast{animation:tdown .25s ease both}
@keyframes tdown{from{opacity:.001;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}

/* Barre de menu : pastille qui glisse avec un léger rebond, zoom de l'onglet touché */
.tab{transition:color .3s}
.tab-ind{transition:transform .45s cubic-bezier(.34,1.4,.5,1)}
.tab.pop{animation:tabpop .42s ease}
@keyframes tabpop{0%{transform:scale(1)}30%{transform:scale(.84)}65%{transform:scale(1.1)}100%{transform:scale(1)}}

/* Barres de macros */
.mbar i{transition:width .6s ease}

/* Eau : remplissage en 1 s, deux vagues opposées, six bulles */
.water-fill{transition:height 1s cubic-bezier(.3,.8,.3,1)}
.wave.w1{animation:sway 3.2s ease-in-out infinite alternate}
.wave.w2{animation:sway 4.4s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.bubbles i{animation:rise var(--t) ease-in infinite;animation-delay:var(--d)}
@keyframes rise{0%{bottom:0;opacity:0;transform:translateX(0)}15%{opacity:.9}50%{transform:translateX(4px)}90%{opacity:.7}100%{bottom:92%;opacity:0;transform:translateX(-3px)}}
.glass-txt b,.glass-txt small{transition:color .7s ease,text-shadow .7s ease}

/* Divers */
.adv-toggle svg{transition:transform .2s}
.dots span{transition:background .3s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bubbles{display:none}
}