/* ============================================================
   CoHub IA ITB Jatim — UI Kit (clean, smooth, modern)
   Animasi parallax, reveal on scroll, loader & transition
   ============================================================ */

/* ---------- Base smooth ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

[x-cloak] { display: none !important; }

/* ---------- Page transition ---------- */
.page-enter { animation: pageEnter .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px) scale(.995); }
    to   { opacity: 1; transform: none; }
}
.fade-in { animation: fadeIn .3s ease-in both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Scroll reveal (dipicu IntersectionObserver di cohub.js) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ---------- Parallax hero ---------- */
.parallax { position: relative; overflow: hidden; isolation: isolate; }
.parallax-layer { position: absolute; inset: -12% -6%; pointer-events: none; z-index: 0; will-change: transform; transition: transform .18s linear; }
.parallax-blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .5; }
.parallax-orb { position: absolute; border-radius: 9999px; opacity: .35; border: 1px solid rgba(255,255,255,.35); will-change: transform; transition: transform .25s ease-out; }
.parallax-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 75%); }

/* ---------- Floating animation ---------- */
.float-slow { animation: floaty 7s ease-in-out infinite; }
.float-slower { animation: floaty 10s ease-in-out infinite reverse; }
@keyframes floaty { 0%,100% { transform: translateY(-10px); } 50% { transform: translateY(12px); } }

/* ---------- Hover lift untuk kartu ---------- */
.hover-lift { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(49,46,129,.28); }

/* ---------- Shimmer text (hero) ---------- */
.shimmer { background: linear-gradient(110deg, #fff 30%, #c7d2fe 45%, #fff 60%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5.5s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- Loader overlay (login & pindah halaman) ---------- */
#cohub-loader { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
    background: rgba(24,24,40,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#cohub-loader.active { display: flex; animation: fadeIn .18s ease-in both; }
.loader-spinner { width: 52px; height: 52px; border-radius: 9999px; border: 4px solid rgba(255,255,255,.25); border-top-color: #a5b4fc; border-right-color: #6366f1;
    animation: spin .8s linear infinite; box-shadow: 0 0 32px rgba(99,102,241,.55); }
.loader-spinner.sm { width: 20px; height: 20px; border-width: 3px; box-shadow: none; border-top-color: #6366f1; border-right-color: #4f46e5; }
.loader-text { color: #e0e7ff; font-size: .85rem; font-weight: 600; letter-spacing: .06em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Top progress bar ---------- */
#cohub-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9998; border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, #6366f1, #a5b4fc, #6366f1); background-size: 200% 100%; animation: shimmerP 1.2s linear infinite;
    transition: width .28s ease, opacity .3s ease; opacity: 0; }
#cohub-progress.active { opacity: 1; }
@keyframes shimmerP { to { background-position: -200% 0; } }

/* ---------- Captcha ---------- */
.captcha-box { display: inline-flex; align-items: center; gap: 2px; padding: .45rem .8rem; border-radius: .75rem; user-select: none;
    background: repeating-linear-gradient(45deg, #eef2ff 0 8px, #e0e7ff 8px 16px);
    background-color: #eef2ff; border: 1px solid #c7d2fe; box-shadow: inset 0 1px 3px rgba(49,46,129,.15);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: .28em; font-size: 1.35rem; line-height: 1;
    color: #312e81; text-shadow: 1px 1px 0 rgba(255,255,255,.6); }
.captcha-box .captcha-char { display: inline-block; }

/* ---------- Toggle intip password ---------- */
.pw-toggle { position: absolute; inset-y: 0; right: .65rem; display: flex; align-items: center; padding: 0 .35rem; font-size: 1.05rem; line-height: 1;
    background: transparent; border: 0; cursor: pointer; opacity: .55; transition: opacity .2s ease, transform .2s ease; }
.pw-toggle:hover { opacity: 1; transform: scale(1.12); }

/* ---------- Bottom navigation (mobile) ---------- */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #e5e7eb; box-shadow: 0 -8px 24px -12px rgba(17,24,39,.18);
    padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom, 0px)); transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.bottom-nav.hidden-down { transform: translateY(110%); opacity: 0; pointer-events: none; }
#bottom-nav-restore { transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.hidden-down { transform: translateY(140%); opacity: 0; pointer-events: none; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .3rem 0; font-size: .65rem; font-weight: 600; color: #6b7280;
    border-radius: .75rem; transition: color .2s ease, background .2s ease; }
.bottom-nav a .bn-icon { font-size: 1.25rem; line-height: 1; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.bottom-nav a.active { color: #4f46e5; background: #eef2ff; }
.bottom-nav a.active .bn-icon { transform: translateY(-2px) scale(1.12); }

/* ---------- Scrollbar halus ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f2f6; }
::-webkit-scrollbar-thumb { background: #c7cbd9; border-radius: 8px; border: 2px solid #f1f2f6; }
::-webkit-scrollbar-thumb:hover { background: #a5aab8; }

/* ---------- Sidebar minimized (desktop) ---------- */
#sidebar { transition: width .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1); }
#sidebar.minimized { width: 5rem; }
#sidebar.minimized nav a { justify-content: center; }
#sidebar.minimized .sidebar-label { opacity: 0; pointer-events: none; width: 0; overflow: hidden; white-space: nowrap; margin: 0; }
.sidebar-label { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; transition: opacity .2s ease; }