/* ================================================================
   CSU-SRPP - Modern UI  |  I-Akrotech.com
   Animations, micro-interactions, and visual polish
   ================================================================ */

/* ── 1. Keyframes ──────────────────────────────────────────────── */
@keyframes fadeIn     { from{opacity:0}                          to{opacity:1} }
@keyframes fadeUp     { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown   { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideLeft  { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(28px)}  to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.93)}     to{opacity:1;transform:scale(1)} }
@keyframes scaleInBounce {
    0%   { opacity:0; transform:scale(.88) }
    60%  { transform:scale(1.03) }
    100% { opacity:1; transform:scale(1) }
}
@keyframes gradientShift {
    0%  { background-position:0% 50% }
    50% { background-position:100% 50% }
    100%{ background-position:0% 50% }
}
@keyframes shimmer {
    0%   { background-position:-800px 0 }
    100% { background-position:800px 0 }
}
@keyframes float {
    0%,100% { transform:translateY(0) }
    50%     { transform:translateY(-7px) }
}
@keyframes pulse {
    0%,100% { transform:scale(1) }
    50%     { transform:scale(1.1) }
}
@keyframes ripple {
    to { transform:scale(20); opacity:0 }
}
@keyframes slideDown {
    from { opacity:0; transform:translateY(-8px) }
    to   { opacity:1; transform:translateY(0) }
}
@keyframes progressFill {
    from { width:0 }
}
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes statusPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(201,160,32,.45) }
    50%     { box-shadow:0 0 0 8px rgba(201,160,32,0) }
}
@keyframes borderGlow {
    0%,100% { box-shadow:0 0 0 0 rgba(30,36,105,.15) }
    50%     { box-shadow:0 0 0 4px rgba(30,36,105,.2) }
}

/* ── 2. Utility classes ────────────────────────────────────────── */
.anim-fade-up    { animation:fadeUp .5s ease both }
.anim-fade-down  { animation:fadeDown .4s ease both }
.anim-fade-in    { animation:fadeIn .4s ease both }
.anim-slide-left { animation:slideLeft .5s ease both }
.anim-scale-in   { animation:scaleIn .4s ease both }
.anim-float      { animation:float 3.5s ease-in-out infinite }

/* Stagger helpers - add .stagger-children to parent */
.stagger-children > *:nth-child(1) { animation-delay:.04s }
.stagger-children > *:nth-child(2) { animation-delay:.09s }
.stagger-children > *:nth-child(3) { animation-delay:.14s }
.stagger-children > *:nth-child(4) { animation-delay:.19s }
.stagger-children > *:nth-child(5) { animation-delay:.24s }
.stagger-children > *:nth-child(6) { animation-delay:.29s }
.stagger-children > *:nth-child(7) { animation-delay:.34s }
.stagger-children > *:nth-child(8) { animation-delay:.39s }

/* Scroll-reveal initial state (set by JS) */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease }
.reveal.visible { opacity:1; transform:none }
.reveal.delay-1 { transition-delay:.08s }
.reveal.delay-2 { transition-delay:.16s }
.reveal.delay-3 { transition-delay:.24s }
.reveal.delay-4 { transition-delay:.32s }
.reveal.delay-5 { transition-delay:.40s }

/* Loading skeleton */
.skeleton {
    background:linear-gradient(90deg,#f0f2f5 25%,#e4e7ec 50%,#f0f2f5 75%);
    background-size:800px 100%;
    animation:shimmer 1.6s infinite;
    border-radius:6px;
}

/* Badge pulse - for "new" indicators */
.badge-pulse { animation:pulse 2s ease-in-out infinite }

/* Spinner */
.spin-icon { animation:spin .7s linear infinite; display:inline-block }


/* ── 3. Dashboard layout ───────────────────────────────────────── */

/* Page entrance */
.page-content { animation:fadeIn .35s ease }

/* Alerts animate in */
.alert { animation:slideDown .3s ease both }

/* Topbar scroll-shadow (toggled by JS) */
.topbar { transition:box-shadow .25s }
.topbar.scrolled { box-shadow:0 4px 20px rgba(0,0,0,.09) }

/* Sidebar links - left-bar slide + glow */
.sidebar-link {
    position:relative;
    overflow:hidden;
    transition:color .18s, background .18s, border-left-color .18s, padding-left .18s;
}
.sidebar-link::after {
    content:'';
    position:absolute; left:0; top:0; bottom:0;
    width:3px;
    background:var(--csu-accent);
    transform:scaleY(0);
    transform-origin:center;
    transition:transform .2s ease;
}
.sidebar-link:hover::after,
.sidebar-link.active::after { transform:scaleY(1) }

/* Sidebar brand logo */
.sidebar-logo { transition:transform .25s; }
.sidebar-brand:hover .sidebar-logo { transform:rotate(-4deg) scale(1.08) }

/* Avatar ring on hover */
.avatar {
    transition:transform .2s, box-shadow .2s;
}
.avatar:hover {
    transform:scale(1.1);
    box-shadow:0 0 0 3px var(--csu-accent);
}

/* Stat tiles - stagger + hover lift */
.stat-tile {
    animation:fadeUp .5s ease both;
    transition:transform .25s ease, box-shadow .25s ease;
    cursor:default;
}
.stat-tile:hover {
    transform:translateY(-5px) scale(1.015);
    box-shadow:0 14px 36px rgba(0,0,0,.18) !important;
}
.stat-tile .tile-num {
    display:inline-block;
    transition:transform .3s;
}
.stat-tile:hover .tile-num { transform:scale(1.05) }

/* X-panels - entrance + hover */
.x-panel {
    animation:fadeUp .45s ease both;
    transition:box-shadow .25s ease;
}
.x-panel:hover { box-shadow:0 4px 22px rgba(0,0,0,.1) }

/* Table rows */
.table tbody tr {
    transition:background .15s;
}
.table tbody tr:hover td { background:rgba(30,36,105,.03) }

/* Buttons - ripple + press effect */
.btn {
    position:relative;
    overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active { transform:scale(0.965) }
.btn-csu   { transition:background .2s, box-shadow .2s, transform .15s }
.btn-csu:hover   { box-shadow:0 6px 18px rgba(30,36,105,.35) }
.btn-accent:hover { box-shadow:0 6px 18px rgba(201,160,32,.35) }

/* Ripple circle (injected by JS) */
.ripple-circle {
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    width:12px; height:12px;
    pointer-events:none;
    transform:scale(0);
    animation:ripple .55s linear;
}

/* Form controls */
.form-control, .form-select {
    transition:border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus {
    border-color:var(--csu-primary);
    box-shadow:0 0 0 3px rgba(30,36,105,.13);
}

/* Status tracker step icons */
.step-icon { transition:transform .2s, background .2s }
.status-step:hover .step-icon { transform:scale(1.15) }
.status-step.active .step-icon { animation:statusPulse 2.2s ease-in-out infinite }

/* Badges */
.badge { transition:filter .2s }
.badge:hover { filter:brightness(1.1) }

/* Progress bars */
.progress-bar { animation:progressFill .8s ease both }
.seats-fill   { transition:width .7s ease }

/* Toast/notification slide-in */
.toast        { animation:slideDown .3s ease }

/* Page section headings */
.x-panel-header h5 {
    position:relative;
}
.x-panel-header h5::after {
    content:'';
    display:block;
    height:2px; width:0;
    background:var(--csu-accent);
    border-radius:1px;
    margin-top:3px;
    transition:width .3s ease;
}
.x-panel:hover .x-panel-header h5::after { width:32px }

/* Logout button */
.sidebar-link[type="submit"] { cursor:pointer }


/* ── 4. Auth layout ────────────────────────────────────────────── */

/* Animated background gradient */
.auth-animated-bg {
    background:linear-gradient(-45deg, #1e2469, #141852, #0b1038, #1a3a6e);
    background-size:400% 400%;
    animation:gradientShift 10s ease infinite;
}

/* Card entrance */
.auth-card {
    animation:scaleInBounce .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* Brand logo float */
.brand-logo { animation:float 4s ease-in-out infinite }

/* Input focus glow */
.auth-body .form-control:focus {
    border-color:var(--csu-primary);
    box-shadow:0 0 0 3px rgba(30,36,105,.14);
    animation:borderGlow 1.6s ease-in-out infinite;
}

/* Password strength bar */
.password-strength { transition:width .35s ease, background .35s ease }

/* Google button hover */
.btn-google { transition:all .2s }
.btn-google:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.12) }

/* Link hover underline slide */
.auth-body a {
    position:relative;
    text-decoration:none;
}
.auth-body a:hover { text-decoration:underline }


/* ── 5. Landing page ───────────────────────────────────────────── */

/* Scroll-progress bar */
#scroll-progress {
    position:fixed; top:0; left:0; z-index:9999;
    height:3px; width:0;
    background:linear-gradient(90deg, var(--csu-accent,#c9a020), #f0c040);
    transition:width .1s linear;
    pointer-events:none;
}

/* Navbar scrolled glass effect */
.csu-nav {
    transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
    padding-top:10px; padding-bottom:10px;
}
.csu-nav.scrolled {
    background:rgba(20,24,82,.96) !important;
    box-shadow:0 4px 24px rgba(0,0,0,.25);
    backdrop-filter:blur(12px);
    padding-top:6px; padding-bottom:6px;
}

/* Hero elements */
.hero-badge   { animation:fadeDown .5s .05s ease both }
.hero-heading { animation:fadeUp  .65s .12s ease both }
.hero-sub     { animation:fadeUp  .65s .22s ease both }
.hero-actions { animation:fadeUp  .65s .32s ease both }
.hero-stats   { animation:fadeUp  .65s .42s ease both }
.hero-image-frame {
    animation:slideRight .7s .1s ease both;
}
.hero-image-frame img { animation:float 5s ease-in-out infinite }

/* Hero glow orbs animated */
.hero-bg-glow {
    animation:pulse 6s ease-in-out infinite;
}

/* Hero stat numbers (counter targets) */
.hero-stat-num {
    transition:transform .3s;
}

/* Program cards scroll-reveal */
.program-card {
    transition:transform .3s ease, box-shadow .3s ease;
}
.program-card:hover {
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(0,0,0,.14) !important;
}
.program-card .card-header {
    background:linear-gradient(135deg, var(--csu-primary), var(--csu-dark,#141852));
    position:relative; overflow:hidden;
}
.program-card .card-header::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.05), transparent);
    pointer-events:none;
}

/* btn-apply hover */
.btn-apply {
    transition:all .2s ease;
    letter-spacing:.02em;
}
.btn-apply:hover {
    background:#141852;
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(20,24,82,.35);
}

/* How it works steps */
.step-num {
    transition:transform .25s ease, box-shadow .25s ease;
}
.step-card:hover .step-num {
    transform:scale(1.12) rotate(-5deg);
    box-shadow:0 8px 20px rgba(30,36,105,.3);
}

/* Step connector line animate on reveal */
.step-connector {
    opacity:0;
    transition:opacity .5s .3s ease;
}
.step-connector.visible { opacity:1 }

/* Navbar toggle */
.navbar-toggler:focus { box-shadow:none }

/* Featured banner shimmer overlay */
.featured-banner {
    position:relative; overflow:hidden;
}
.featured-banner::after {
    content:'';
    position:absolute; top:0; left:-100%; width:50%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    animation:shimmer 2.5s ease-in-out infinite;
}

/* Filter tabs */
.filter-tabs .nav-link {
    transition:all .2s;
}
.filter-tabs .nav-link:hover:not(.active) {
    background:rgba(30,36,105,.06);
    color:var(--csu-primary);
}

/* Footer links */
.csu-footer a { transition:color .2s }

/* Accordion smooth */
.accordion-body { animation:fadeIn .2s ease }


/* ── 6. Reduced-motion override ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .reveal { opacity:1 !important; transform:none !important; transition:none !important }
}