/*
 * Bandeau de gauche des pages de connexion (layout auth) : motion design, 09/10/2026.
 * Commun aux 7 pages (connexion, inscription, oubli, réinitialisation, double authentification,
 * intégration, mot de passe expiré).
 *
 * ❶ balayage de lumière sur le dégradé, ❷ logo en fondu, ❸ phrase révélée de haut en bas,
 * ❹ image qui monte et se pose (~1,4 s), pendant que le nombre de formations compte de 0 à sa
 * valeur en 8 s. Ensuite l'image et deux halos suivent le pointeur, et un « moment » se joue
 * à intervalle réglable, en alternance parmi les moments choisis (maquettes du 09/10/2026 ;
 * exception voulue par Sébastien à la règle AT2 « aucun mouvement en boucle »).
 * Comportement : frontend/assets/js/auth-motion.js ; logo : resources/views/auth/partials/left-logo.blade.php.
 *
 * Tout se règle dans Paramètres › Graphisme › Animation (App\Support\AuthMotion) : la police
 * Laila + Caveat (body.auth-font-holix) et les moments ne s'appliquent que choisis.
 *
 * Les états de départ ne s'appliquent que sous html.auth-motion (posé par le script) : sans script,
 * le bandeau s'affiche fixe. « Réduire les animations » coupe tout.
 */

/* ── Police Laila + Caveat (réglage « Police de la phrase ») : Laila corrigée (css/laila-corrigee.css),
      Caveat sur le nombre et le mot qui le suit ─────────────────────────────── */
@font-face {
    font-family: 'Caveat Holix';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    /* Sous-ensemble latin de Caveat (OFL). Les caveat-400.woff2 de typography:fonts-download
       ne contiennent que le cyrillique (constaté le 09/10/2026). */
    src: url('/fonts/caveat-700.woff2') format('woff2');
}

body.auth-font-holix .sign-up-left-content > p {
    font-family: 'Laila', Georgia, serif;
    font-weight: 400;
    letter-spacing: .005em;
}

body.auth-font-holix .sign-up-left-content .auth-hl {
    font-family: 'Caveat Holix', 'Laila', cursive;
    font-weight: 700;
    font-size: 1.42em;
    line-height: 1;
    letter-spacing: .01em;
    color: #eaf5df;
}

.sign-up-left-content .auth-count {
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ── Logo vectoriel ─────────────────────────────────────────────────────── */
.sign-up-top-logo .auth-logo {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    max-height: 12vh;
    margin: 0 auto;
    overflow: visible;
}

.sign-up-left-content {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sign-up-left-content > * {
    position: relative;
    z-index: 2;
}

/* ── Halos de lumière (créés par le script, décoratifs) ─────────────────── */
.sign-up-left-content > .auth-halo {
    position: absolute;
    z-index: 0;
    width: min(46vw, 560px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(14px);
    opacity: 0;
    transform: translate3d(calc(var(--auth-mx, 0) * var(--auth-depth)), calc(var(--auth-my, 0) * var(--auth-depth)), 0);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.auth-halo--a {
    --auth-depth: -34px;
    top: -18%;
    right: -22%;
    background: radial-gradient(circle, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 68%);
}

.auth-halo--b {
    --auth-depth: 26px;
    bottom: -20%;
    left: -24%;
    background: radial-gradient(circle, var(--theme-color, #cd9d45) 0%, rgba(255, 255, 255, 0) 70%);
}

/* ── Balayage de lumière, une fois ─────────────────────────────────────── */
.sign-up-left-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
    background-size: 260% 100%;
    background-position: 130% 0;
    opacity: 0;
}

/* ── Parallaxe de l'image (le conteneur bouge, l'image garde son entrée) ── */
.sign-up-left-content .sign-up-bottom-img {
    transform: translate3d(calc(var(--auth-mx, 0) * -14px), calc(var(--auth-my, 0) * -10px), 0);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

/* ── États de départ : seulement quand le script est là ─────────────────── */
html.auth-motion .sign-up-top-logo,
html.auth-motion .sign-up-left-content > p,
html.auth-motion .sign-up-bottom-img img {
    opacity: 0;
}

/* ── Lecture de la chorégraphie ─────────────────────────────────────────── */
html.auth-motion-play .sign-up-left-content::after {
    animation: auth-sweep 1.3s cubic-bezier(.4, 0, .2, 1) .1s both;
}

html.auth-motion-play .sign-up-left-content > .auth-halo {
    animation: auth-halo-in 1.4s ease-out .15s forwards;
}

html.auth-motion-play .sign-up-top-logo {
    animation: auth-logo-in .7s cubic-bezier(.16, 1, .3, 1) both;
}

html.auth-motion-play .sign-up-left-content > p {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    animation: auth-text-in .95s cubic-bezier(.33, 1, .68, 1) .25s both;
}

html.auth-motion-play .sign-up-bottom-img img {
    animation: auth-image-in .95s cubic-bezier(.16, 1, .3, 1) .45s both;
}

@keyframes auth-sweep {
    0%   { opacity: 1; background-position: 130% 0; }
    100% { opacity: 1; background-position: -30% 0; }
}

@keyframes auth-halo-in {
    from { opacity: 0; }
    to   { opacity: .55; }
}

@keyframes auth-logo-in {
    from { opacity: 0; transform: translateY(-10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes auth-text-in {
    from { opacity: 0; transform: translateY(10px); -webkit-mask-position: 0 100%; mask-position: 0 100%; }
    to   { opacity: 1; transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@keyframes auth-image-in {
    from { opacity: 0; transform: translateY(44px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── Moments (un à chaque intervalle, posés par le script en classe sur le bandeau) ── */
.sign-up-left-content > .auth-dawn,
.sign-up-left-content > .auth-fx,
.sign-up-left-content > .auth-thread {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sign-up-left-content > .auth-dawn {
    z-index: 1;
    opacity: 0;
    background: radial-gradient(circle at 46% 84%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
}

.sign-up-left-content > .auth-fx {
    z-index: 3;
    width: 100%;
    height: 100%;
}

.sign-up-left-content > .auth-thread {
    z-index: 4;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sign-up-bottom-img {
    position: relative;
}

.sign-up-bottom-img img {
    transition: scale 2.2s ease-in-out, rotate 1.6s ease-in-out;
}

/* Souffle : trois ondes depuis la tablette, la lumière monte puis redescend */
.auth-rings {
    position: absolute;
    left: 65%;
    top: 35%;
    width: 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}

.auth-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(32px, 4.2vw, 72px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    opacity: 0;
}

.m-souffle .auth-ring {
    animation: auth-ring 3.4s cubic-bezier(.22, .61, .36, 1) both;
}

.m-souffle .auth-ring:nth-child(2) { animation-delay: .6s; }
.m-souffle .auth-ring:nth-child(3) { animation-delay: 1.2s; }

.m-souffle > .auth-dawn {
    animation: auth-breathe 4.6s ease-in-out both;
}

.m-souffle .sign-up-bottom-img img.auth-inhale {
    scale: 1.018;
}

/* Feuilles au vent : la photo se balance à peine */
.m-vent .sign-up-bottom-img img.auth-sway {
    rotate: -.7deg;
}

/* Fil Holix et lumières : le nombre s'illumine */
.auth-count.auth-glow {
    animation: auth-glow 1.1s ease-out both;
}

/* Mot qui change */
.auth-word {
    display: inline-block;
    position: relative;
}

.auth-word__w {
    display: inline-block;
}

.auth-word::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .02em;
    height: .09em;
    border-radius: 1em;
    background: rgba(255, 255, 255, .75);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.auth-word.is-on::after {
    transform: scaleX(1);
}

.auth-word__w.is-out {
    transition: opacity .26s ease, transform .26s ease, filter .26s ease;
    opacity: 0;
    transform: translateY(-.35em);
    filter: blur(3px);
}

.auth-word__w.is-in {
    animation: auth-word-in .34s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes auth-ring {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    14%  { opacity: .85; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(7.5); }
}

@keyframes auth-breathe {
    0%, 100% { opacity: 0; }
    45%      { opacity: 1; }
}

@keyframes auth-glow {
    0%   { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    35%  { text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 0 4px #fff; }
    100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes auth-word-in {
    from { opacity: 0; transform: translateY(.35em); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ── Réduire les animations : bandeau fixe, comme avant ────────────────── */
@media (prefers-reduced-motion: reduce) {
    html.auth-motion .sign-up-top-logo,
    html.auth-motion .sign-up-left-content > p,
    html.auth-motion .sign-up-bottom-img img {
        opacity: 1;
        animation: none !important;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .sign-up-left-content::after,
    .sign-up-left-content > .auth-halo,
    .sign-up-left-content > .auth-dawn,
    .sign-up-left-content > .auth-fx,
    .sign-up-left-content > .auth-thread,
    .auth-rings {
        display: none;
    }

    .sign-up-left-content .sign-up-bottom-img {
        transform: none;
        transition: none;
    }
}