/* ============================================================
   ATLAS AO — Auth pages (login / forgot / reset)
   Patch output13 : refonte avec branding ATLAS AO,
   logo anime (halo + orbites) et animations d'apparition.
   ============================================================ */

.auth-body{
    margin:0;
    min-height:100vh;
    background:linear-gradient(135deg,#3b82f6 0%,#7c3aed 55%,#5b21b6 100%);
    font-family:Inter,sans-serif;
    overflow-x:hidden;
    position:relative;
}

/* ---------- Decorations flottantes en arriere-plan ---------- */
.auth-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.auth-bg-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.45;
    will-change:transform;
}
.auth-bg-blob.blob-1{
    width:520px;height:520px;
    top:-180px;left:-160px;
    background:radial-gradient(circle,#60a5fa 0%,transparent 65%);
    animation:auth-float-a 18s ease-in-out infinite;
}
.auth-bg-blob.blob-2{
    width:420px;height:420px;
    bottom:-140px;left:32%;
    background:radial-gradient(circle,#a78bfa 0%,transparent 65%);
    animation:auth-float-b 22s ease-in-out infinite;
}
.auth-bg-blob.blob-3{
    width:380px;height:380px;
    top:25%;right:-120px;
    background:radial-gradient(circle,#67e8f9 0%,transparent 60%);
    animation:auth-float-c 26s ease-in-out infinite;
    opacity:.3;
}
@keyframes auth-float-a{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(80px,60px) scale(1.1)}
}
@keyframes auth-float-b{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-90px,-40px) scale(.9)}
}
@keyframes auth-float-c{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-60px,80px) scale(1.05)}
}

.auth-wrap{
    position:relative;z-index:1;
    min-height:100vh;
    display:grid;
    grid-template-columns:1.1fr 1fr;
}

/* =====================================================================
   Cote gauche : illustration / branding ATLAS AO
   ===================================================================== */
.auth-illustration{
    display:flex;align-items:center;justify-content:center;padding:40px;
    color:#fff;position:relative;overflow:hidden;
}
.auth-illustration::before{
    content:"";position:absolute;width:600px;height:600px;border-radius:50%;
    background:rgba(255,255,255,.06);top:-200px;left:-200px;
}
.auth-illustration::after{
    content:"";position:absolute;width:400px;height:400px;border-radius:50%;
    background:rgba(255,255,255,.05);bottom:-100px;right:-100px;
}
.ill-card{position:relative;max-width:500px;z-index:2}

/* ---------- Logo ATLAS AO anime ---------- */
.ill-logo-wrap{
    position:relative;
    width:120px;height:120px;
    margin:0 0 32px;
    display:flex;align-items:center;justify-content:center;
    /* Apparition au load : zoom + opacity */
    animation:auth-logo-pop .9s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes auth-logo-pop{
    0%{opacity:0;transform:scale(.4) rotate(-30deg)}
    60%{opacity:1;transform:scale(1.1) rotate(8deg)}
    100%{opacity:1;transform:scale(1) rotate(0)}
}

/* Halos pulses (deux couches concentriques) */
.ill-logo-halo{
    position:absolute;border-radius:50%;
    pointer-events:none;
}
.ill-logo-halo.halo-outer{
    inset:-12px;
    background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%);
    animation:auth-halo-out 3s ease-in-out infinite;
}
.ill-logo-halo.halo-inner{
    inset:8px;
    background:radial-gradient(circle,rgba(96,165,250,.55) 0%,rgba(167,139,250,.35) 50%,rgba(255,255,255,0) 75%);
    animation:auth-halo-in 2.4s ease-in-out infinite;
}
@keyframes auth-halo-out{
    0%,100%{opacity:.55;transform:scale(.95)}
    50%   {opacity:.95;transform:scale(1.18)}
}
@keyframes auth-halo-in{
    0%,100%{opacity:.7;transform:scale(.9)}
    50%   {opacity:1;transform:scale(1.08)}
}

/* Orbites : 2 anneaux qui tournent en sens contraire */
.ill-logo-orbit{
    position:absolute;border-radius:50%;
    border:1.5px dashed rgba(255,255,255,.45);
    pointer-events:none;
}
.ill-logo-orbit.orbit-1{
    inset:0;
    animation:auth-orbit-cw 11s linear infinite;
}
.ill-logo-orbit.orbit-2{
    inset:14px;
    border-style:dotted;
    border-color:rgba(167,139,250,.7);
    animation:auth-orbit-ccw 7s linear infinite;
}
.orbit-dot{
    position:absolute;
    width:10px;height:10px;border-radius:50%;
    background:#fff;
    box-shadow:0 0 12px rgba(255,255,255,.9), 0 0 4px rgba(96,165,250,.8);
    top:-5px;left:50%;transform:translateX(-50%);
}
.orbit-2 .orbit-dot{
    width:7px;height:7px;
    background:#a78bfa;
    box-shadow:0 0 10px rgba(167,139,250,.8);
}
@keyframes auth-orbit-cw{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}
@keyframes auth-orbit-ccw{
    from{transform:rotate(0)}
    to{transform:rotate(-360deg)}
}

/* La boussole centrale */
.ill-logo{
    position:relative;z-index:3;
    width:72px;height:72px;border-radius:20px;
    background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.12));
    display:flex;align-items:center;justify-content:center;
    font-size:32px;color:#fff;
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.3);
    /* Tic-tac discret de la boussole */
    animation:auth-compass-tick 5s ease-in-out infinite;
}
@keyframes auth-compass-tick{
    0%,90%,100%{transform:rotate(0)}
    93%{transform:rotate(-15deg)}
    96%{transform:rotate(10deg)}
}

/* ---------- Titre et baseline ---------- */
.ill-title{
    font-size:64px;font-weight:800;line-height:1;letter-spacing:-.5px;
    margin:0 0 18px;color:#fff;
    /* Apparition progressive */
    opacity:0;
    animation:auth-rise .8s cubic-bezier(.4,0,.2,1) .1s both;
}
.ill-title-main{display:inline-block;margin-right:6px}
.ill-title-accent{
    background:linear-gradient(135deg,#67e8f9,#a78bfa);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    font-weight:800;
}
.ill-tag{
    font-size:17px;line-height:1.6;margin:0 0 32px;color:rgba(255,255,255,.92);
    max-width:440px;
    opacity:0;
    animation:auth-rise .8s cubic-bezier(.4,0,.2,1) both;
}

.ill-features{list-style:none;padding:0;margin:0}
.ill-features li{
    display:flex;align-items:center;gap:12px;
    padding:9px 0;font-size:14.5px;color:rgba(255,255,255,.95);
    opacity:0;
    animation:auth-rise .7s cubic-bezier(.4,0,.2,1) both;
}
.ill-features i{
    color:#67e8f9;font-size:16px;flex-shrink:0;
    filter:drop-shadow(0 0 8px rgba(103,232,249,.4));
}

/* Stagger via data-anim-delay (1 a 6) */
[data-anim-delay="1"]{animation-delay:.25s !important}
[data-anim-delay="2"]{animation-delay:.40s !important}
[data-anim-delay="3"]{animation-delay:.55s !important}
[data-anim-delay="4"]{animation-delay:.70s !important}
[data-anim-delay="5"]{animation-delay:.85s !important}
[data-anim-delay="6"]{animation-delay:1.00s !important}

@keyframes auth-rise{
    0%{opacity:0;transform:translateY(16px)}
    100%{opacity:1;transform:translateY(0)}
}

/* =====================================================================
   Cote droit : panneau formulaire
   ===================================================================== */
.auth-panel{
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    padding:40px;flex-direction:column;position:relative;
    /* Apparition par glissement depuis la droite */
    animation:auth-slide-in .8s cubic-bezier(.4,0,.2,1) both;
}
@keyframes auth-slide-in{
    0%{opacity:0;transform:translateX(30px)}
    100%{opacity:1;transform:translateX(0)}
}

.auth-card{max-width:400px;width:100%}

.auth-card h2,
.auth-title{
    font-size:28px;margin:0 0 6px;color:#0f172a;font-weight:700;
    opacity:0;
    animation:auth-rise .7s cubic-bezier(.4,0,.2,1) .35s both;
}
.auth-card .muted,
.auth-subtitle{
    margin:0 0 28px;color:#64748b;
    opacity:0;
    animation:auth-rise .7s cubic-bezier(.4,0,.2,1) .45s both;
}
.auth-subtitle strong{color:#3b82f6;font-weight:700}

/* Champs animes via classe .auth-anim + data-anim-delay */
.auth-anim{
    opacity:0;
    animation:auth-rise .65s cubic-bezier(.4,0,.2,1) both;
}
/* Ajustement des delays pour le panneau de droite */
.auth-panel [data-anim-delay="1"]{animation-delay:.55s !important}
.auth-panel [data-anim-delay="2"]{animation-delay:.65s !important}
.auth-panel [data-anim-delay="3"]{animation-delay:.75s !important}
.auth-panel [data-anim-delay="4"]{animation-delay:.85s !important}

/* Hover/focus subtil sur les champs */
.input-icon{
    transition:transform .2s ease;
}
.input-icon:focus-within{
    transform:translateY(-1px);
}
.input-icon:focus-within input{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* Bouton primaire avec petit shimmer au hover */
.auth-card .btn-primary{
    position:relative;overflow:hidden;
    transition:transform .15s, box-shadow .2s;
}
.auth-card .btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px -4px rgba(59,130,246,.4);
}
.auth-card .btn-primary::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
    transform:translateX(-100%);
    transition:transform .6s;
}
.auth-card .btn-primary:hover::after{
    transform:translateX(100%);
}

.auth-foot{
    margin-top:32px;text-align:center;color:#94a3b8;
    opacity:0;
    animation:auth-rise .6s ease-out 1.1s both;
}
.row-between{display:flex;justify-content:space-between;align-items:center}
.row-center{display:flex;justify-content:center;margin-top:14px}
.link{color:#3b82f6;font-weight:500;font-size:13px;transition:color .15s}
.link:hover{color:#7c3aed}

/* =====================================================================
   Mobile
   ===================================================================== */
@media (max-width:900px){
    .auth-wrap{grid-template-columns:1fr}
    .auth-illustration{display:none}
    .auth-panel{min-height:100vh}
}

/* =====================================================================
   Reduced motion : on neutralise toutes les animations infinies
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
    .ill-logo-halo,
    .ill-logo-orbit,
    .ill-logo,
    .auth-bg-blob{
        animation:none !important;
    }
    .ill-logo-wrap,
    .ill-title,
    .ill-tag,
    .ill-features li,
    .auth-panel,
    .auth-anim,
    .auth-title,
    .auth-subtitle,
    .auth-foot{
        animation-duration:.01ms !important;
        animation-delay:0s !important;
        opacity:1 !important;
    }
}