/* =========================================================
   Auth pages (login.php / register.php) animation styles
   ========================================================= */

/* ---------- Animated ambient background ---------- */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, #eef4ff 0%, #f0f8f7 45%, #f5f0ff 100%);
}

.auth-bg::before,
.auth-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    will-change: transform;
}

.auth-bg::before {
    width: 58vw;
    height: 58vw;
    max-width: 720px;
    max-height: 720px;
    top: -22%;
    left: -12%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.35) 0%, rgba(102, 126, 234, 0) 65%);
    animation: authBlobA 15s ease-in-out infinite alternate;
}

.auth-bg::after {
    width: 55vw;
    height: 55vw;
    max-width: 680px;
    max-height: 680px;
    bottom: -25%;
    right: -14%;
    background: radial-gradient(circle, rgba(13, 153, 160, 0.32) 0%, rgba(13, 153, 160, 0) 65%);
    animation: authBlobB 17s ease-in-out infinite alternate;
}

@keyframes authBlobA {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 70px) scale(1.18); }
}

@keyframes authBlobB {
    0%   { transform: translate(0, 0) scale(1.15); }
    100% { transform: translate(-65px, -55px) scale(0.95); }
}

/* Floating orbs */
.orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.4;
    will-change: transform;
}

.orb-1 {
    width: 210px;
    height: 210px;
    top: -50px;
    right: 14%;
    background: #7cd6e0;
    animation: authOrb1 12s ease-in-out infinite;
}

.orb-2 {
    width: 260px;
    height: 260px;
    bottom: -70px;
    left: 8%;
    background: #c4b5fd;
    animation: authOrb2 16s ease-in-out infinite;
}

.orb-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    left: 44%;
    background: #93c5fd;
    animation: authOrb3 19s ease-in-out infinite;
}

@keyframes authOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(45px, 55px) scale(1.2); }
}

@keyframes authOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-55px, -45px) scale(1.15); }
}

@keyframes authOrb3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(35px, -60px) scale(1.25); }
}

/* Sit the content above the ambient layer */
.login-page .main-content,
.register-page .main-content {
    position: relative;
    z-index: 1;
}

/* ---------- Card entrances ---------- */
.login-row .col-lg-8 .card {
    animation: authCardIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.login-row .col-lg-4 .card {
    animation: authCardIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(46px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- Image: slow Ken Burns zoom ---------- */
.login-row .main-image {
    animation: authKenBurns 18s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes authKenBurns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.09) translate(-1.5%, 1%); }
}

/* ---------- Headings: flowing gradient text ---------- */
.login-title,
.register-title {
    background: linear-gradient(270deg, #0b6b70, #667eea, #764ba2, #0b6b70);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: authTitleFlow 9s linear infinite;
}

@keyframes authTitleFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ---------- Submit button: continuous shine sweep (GPU-transformed) ---------- */
.login-btn2,
.register-btn2 {
    position: relative;
    overflow: hidden;
}

.login-btn2::after,
.register-btn2::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    animation: authBtnShine 3.5s ease-in-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes authBtnShine {
    0%   { transform: translateX(0%) skewX(-18deg); opacity: 0; }
    15%  { opacity: 1; }
    55%  { transform: translateX(180%) skewX(-18deg); }
    72%  { transform: translateX(350%) skewX(-18deg); opacity: 1; }
    80%  { opacity: 0; }
    100% { transform: translateX(350%) skewX(-18deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg::before,
    .auth-bg::after,
    .orb,
    .login-row .col-lg-8 .card,
    .login-row .col-lg-4 .card,
    .login-row .main-image,
    .login-title,
    .register-title,
    .login-btn2::after,
    .register-btn2::after {
        animation: none;
    }
}