/* ============================================================================
   StudentHub — Animation Layer
   Scroll-reveal (fade-up / fade-in / zoom), hover micro-interactions, loaders.
   SAFE: reveal only hides elements once JS confirms support (body.sh-anim-on).
   If JS fails or reduced-motion is set, everything stays fully visible.
   ============================================================================ */

/* ---------------------------------------------------------------- keyframes */
@keyframes shFadeUp   { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
@keyframes shFadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes shFadeDown { from { opacity:0; transform: translateY(-18px); } to { opacity:1; transform:none; } }
@keyframes shFadeLeft { from { opacity:0; transform: translateX(-22px); } to { opacity:1; transform:none; } }
@keyframes shFadeRight{ from { opacity:0; transform: translateX(22px); }  to { opacity:1; transform:none; } }
@keyframes shZoomIn   { from { opacity:0; transform: scale(.94); } to { opacity:1; transform:none; } }
@keyframes shPop      { 0%{transform:scale(.9);opacity:0;} 60%{transform:scale(1.02);} 100%{transform:scale(1);opacity:1;} }
@keyframes shShimmer  { 0%{background-position:-468px 0;} 100%{background-position:468px 0;} }
@keyframes shFloat    { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes shRowIn    { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

/* -------------------------------------------------- scroll-reveal (opt-in) */
/* Elements are hidden ONLY when body has .sh-anim-on (added by JS on support) */
body.sh-anim-on .sh-reveal {
    opacity: 0;
    will-change: opacity, transform;
}
body.sh-anim-on .sh-reveal.sh-in {
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(.22,.61,.36,1);
    animation-fill-mode: both;
}
body.sh-anim-on .sh-reveal[data-anim="fade-up"].sh-in    { animation-name: shFadeUp; }
body.sh-anim-on .sh-reveal[data-anim="fade-in"].sh-in    { animation-name: shFadeIn; }
body.sh-anim-on .sh-reveal[data-anim="fade-down"].sh-in  { animation-name: shFadeDown; }
body.sh-anim-on .sh-reveal[data-anim="fade-left"].sh-in  { animation-name: shFadeLeft; }
body.sh-anim-on .sh-reveal[data-anim="fade-right"].sh-in { animation-name: shFadeRight; }
body.sh-anim-on .sh-reveal[data-anim="zoom-in"].sh-in    { animation-name: shZoomIn; }
body.sh-anim-on .sh-reveal[data-anim="pop"].sh-in        { animation-name: shPop; }
/* default when no data-anim */
body.sh-anim-on .sh-reveal:not([data-anim]).sh-in        { animation-name: shFadeUp; }

/* ------------------------------------------------------------ page entrance */
.page-title { animation: shFadeDown .5s ease both; }
.page-body > .container-fluid:first-child { animation: shFadeIn .45s ease both; }

/* --------------------------------------------------- datatable rows fade in */
@media (prefers-reduced-motion: no-preference) {
    table.dataTable tbody tr { animation: shRowIn .35s ease both; }
    table.dataTable tbody tr:nth-child(1){animation-delay:.02s}
    table.dataTable tbody tr:nth-child(2){animation-delay:.05s}
    table.dataTable tbody tr:nth-child(3){animation-delay:.08s}
    table.dataTable tbody tr:nth-child(4){animation-delay:.11s}
    table.dataTable tbody tr:nth-child(5){animation-delay:.14s}
    table.dataTable tbody tr:nth-child(6){animation-delay:.17s}
    table.dataTable tbody tr:nth-child(7){animation-delay:.20s}
    table.dataTable tbody tr:nth-child(n+8){animation-delay:.22s}
}

/* --------------------------------------------------------- hover lift/press */
@media (prefers-reduced-motion: no-preference) {
    .card, .card-h-100 { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
    .card:hover, .card-h-100:hover { transform: translateY(-3px); }

    .btn { transition: transform .16s ease, box-shadow .2s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0) scale(.99); }

    /* table action icons */
    table.dataTable tbody td a.btn, .table td a.btn, td .btn-sm { transition: transform .15s ease, background-color .15s, color .15s, border-color .15s; }
    table.dataTable tbody td a.btn:hover, .table td a.btn:hover, td .btn-sm:hover { transform: translateY(-1px); }

    /* sidebar links slide */
    .sidebar-menu .sidebar-list .sidebar-link,
    .sidebar-menu .sidebar-submenu li a { transition: background .18s ease, color .18s ease, padding-left .18s ease, transform .18s ease; }
    .sidebar-menu .sidebar-submenu li a:hover { transform: translateX(2px); }

    /* stat number gentle pop on reveal */
    .counter-value { display: inline-block; }

    /* nav profile avatar */
    .profile-dropdown img { transition: transform .2s ease, border-color .2s ease; }
    .profile-dropdown:hover img { transform: scale(1.05); }

    /* badges */
    .badge { transition: transform .15s ease; }
    tr:hover .badge { transform: scale(1.04); }
}

/* ------------------------------------------------------------- login bubbles */
.login_design .bg-bubbles li { animation-timing-function: linear; }
.login_design .auth-bg::before { animation: shFloat 7s ease-in-out infinite; }
.login_design .auth-bg::after  { animation: shFloat 9s ease-in-out infinite; }
.login-card .login-main { animation: shFadeUp .6s cubic-bezier(.22,.61,.36,1) both; }
.login_design .testi-contain { animation: shFadeIn .8s ease both; }

/* ---------------------------------------------------------- modal entrance */
.modal.fade .modal-dialog { transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease; transform: translateY(14px) scale(.98); }
.modal.show .modal-dialog { transform: none; }

/* --------------------------------------------------------- button spinner */
.sh-btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.sh-btn-loading::after {
    content:""; position:absolute; top:50%; left:50%; width:16px; height:16px;
    margin:-8px 0 0 -8px; border-radius:50%;
    border:2px solid rgba(255,255,255,.55); border-top-color:#fff;
    animation: sh-spin .6s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ skeleton shimmer */
.sh-skeleton {
    background: #eef0f6;
    background-image: linear-gradient(90deg, #eef0f6 0px, #f7f8fc 40px, #eef0f6 80px);
    background-size: 600px 100%;
    animation: shShimmer 1.3s linear infinite;
    border-radius: 8px;
}

/* ---------------------------------------------------- reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
    body.sh-anim-on .sh-reveal { opacity: 1 !important; animation: none !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ============================================================================
   PREMIUM MICRO-INTERACTIONS + EFFECTS + CURSOR
   ============================================================================ */
@media (prefers-reduced-motion: no-preference){
  /* button ripple */
  .btn{ position:relative; overflow:hidden; }
  .btn .sh-ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.45); animation:shRipple .6s linear; pointer-events:none; }
  .btn-secondary .sh-ripple,.btn-air-light .sh-ripple,.btn-outline .sh-ripple{ background:rgba(124,108,231,.25); }
  @keyframes shRipple{ to{ transform:scale(3); opacity:0; } }

  /* KPI icon subtle float on hover */
  .first-row-boxs .card-body[class*="boxs"]:hover::before{ transform:translateY(-2px); transition:transform .25s ease; }

  /* row hover accent */
  table.dataTable tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--brand-500); }

  /* sidebar active indicator slide */
  .sidebar-menu .sidebar-list .sidebar-link.active{ position:relative; }
  .sidebar-menu .sidebar-list .sidebar-link.active::after{ content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:3px; background:var(--brand-500); }

  /* nav link icon pop on hover */
  .sidebar-menu .sidebar-list .sidebar-link:hover .stroke-icon,.sidebar-menu .sidebar-list .sidebar-link:hover > i{ transform:scale(1.08); transition:transform .18s ease; }

  /* card entrance already via reveal; add smooth link underline */
  a.sh-ph-forgot,.sh-auth__forgot{ background-image:linear-gradient(var(--brand-500),var(--brand-500)); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .25s ease; }
  a.sh-auth__forgot:hover{ background-size:100% 1px; }

  /* focus glow on inputs */
  .form-control:focus,.form-select:focus{ animation:shFocusPop .2s ease; }
  @keyframes shFocusPop{ from{ box-shadow:0 0 0 0 rgba(124,108,231,.18);} to{ box-shadow:0 0 0 3px rgba(124,108,231,.10);} }
}

/* ---- custom cursor (dot + ring follower) ---- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .sh-cursor-dot,.sh-cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:99999; mix-blend-mode:normal; opacity:0; }
  .sh-cursor-dot{ width:6px; height:6px; background:var(--brand-500); transform:translate(-50%,-50%); transition:opacity .25s ease; animation:shCursorPulse 1.6s ease-in-out infinite; }
  .sh-cursor-ring{
    width:30px; height:30px; border:1.5px solid rgba(124,108,231,.5); transform:translate(-50%,-50%) scale(1);
    transition:width .18s ease,height .18s ease,border-color .18s ease,background-color .18s ease,opacity .25s ease,transform .15s ease;
  }
  .sh-cursor-ring.hover{ width:44px; height:44px; border-color:rgba(124,108,231,.85); background:rgba(124,108,231,.1); }
  .sh-cursor-ring.down{ transform:translate(-50%,-50%) scale(.8); }
  @keyframes shCursorPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(124,108,231,.35);} 50%{ box-shadow:0 0 0 5px rgba(124,108,231,0);} }
}