/**
 * Psikotes Online - Authentication Portal Stylesheet
 * External CSS for all auth views (Superadmin & Participant)
 */

/* Material Symbols alignment helper */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ==========================================================================
   Background Dot Matrix Patterns (Replaces inline style gradients)
   ========================================================================== */
.bg-dot-matrix-slate {
    background-image: radial-gradient(#94A3B8 1.5px, transparent 1.5px);
    background-size: 18px 18px;
}

.bg-dot-matrix-amber {
    background-image: radial-gradient(#EAA222 1.5px, transparent 1.5px);
    background-size: 18px 18px;
}

/* ==========================================================================
   Smooth Micro-Animations & Keyframe Definitions
   ========================================================================== */
@keyframes shimmer {
    0% { left: -60%; }
    20% { left: 140%; }
    100% { left: 140%; }
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pulseAuraSlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.04);
    }
}

@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-9px);
    }
}

@keyframes floatBadgeReverse {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(7px) rotate(-1deg);
    }
}

@keyframes floatBadgeDirect {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(1deg);
    }
}

@keyframes pulseAura {
    0%, 100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes amberWobble {
    0%, 100% {
        transform: rotate(3deg) scale(1);
    }
    50% {
        transform: rotate(4.5deg) scale(1.02);
    }
}

/* ==========================================================================
   Animation Utility Classes
   ========================================================================== */
.anim-fade-in-left {
    animation: fadeInLeft 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-float-admin {
    animation: floatGentle 6s ease-in-out infinite;
}

.anim-float-mockup {
    animation: floatSlow 6s ease-in-out infinite;
    will-change: transform;
}

.anim-badge-top {
    animation: floatBadgeDirect 5s ease-in-out infinite;
    will-change: transform;
}

.anim-badge-bottom {
    animation: floatBadgeReverse 5.5s ease-in-out infinite;
    will-change: transform;
}

.anim-pulse-aura {
    animation: pulseAura 4s ease-in-out infinite;
}

.anim-pulse-orb {
    animation: pulseAuraSlow 9s ease-in-out infinite;
}

.anim-amber-shape {
    animation: amberWobble 10s ease-in-out infinite;
}

.anim-entrance-card {
    animation: cardEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-stagger-1 {
    animation: fadeInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.anim-stagger-2 {
    animation: fadeInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.anim-stagger-3 {
    animation: fadeInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Shimmer Button Light Sweep Effect */
.anim-shimmer-btn {
    position: relative;
    overflow: hidden;
}

.anim-shimmer-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    animation: shimmer 4.5s infinite;
    pointer-events: none;
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .anim-entrance-card,
    .anim-pulse-orb,
    .anim-pulse-aura,
    .anim-shimmer-btn::after,
    .anim-fade-in-left,
    .anim-float-admin,
    .anim-float-mockup,
    .anim-badge-top,
    .anim-badge-bottom,
    .anim-amber-shape,
    .anim-stagger-1,
    .anim-stagger-2,
    .anim-stagger-3 {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}