/* ================================================================
   RiseUp — Polish + Animasi (Phase 3)
   Layer polesan yang bekerja bersama design token di riseup-ui.css.
   Bebas framework, murni CSS + sedikit JS trigger (di animations.js).
   Menghormati `prefers-reduced-motion`.
   ================================================================ */

/* ---------- 1. Global smoothing ---------- */

body {
    /* transisi halus buat perubahan warna/latar antar state */
    transition: background-color .4s ease, color .3s ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--riseup-orange-soft, #fff3d4); color: var(--riseup-dark, #1f2937); }

/* Semua tautan & tombol dapet transisi standar */
a, button, .btn, .riseup-nav-link, .riseup-nav-button {
    transition:
        transform .18s ease,
        box-shadow .22s ease,
        background-color .22s ease,
        color .22s ease,
        filter .22s ease,
        border-color .22s ease;
}

/* Fokus keyboard yang jelas & konsisten (aksesibilitas) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(255, 138, 0, .35);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- 2. Reveal on scroll (fade-up) ---------- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Stagger buat elemen berurutan (dipakai oleh animations.js) */
.reveal[data-stagger] { transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- 3. Card/section hover lift ---------- */

.card,
.saveup-card,
.saveup-vault,
.quick-action,
.learning-card,
.quest-card,
.badge-card,
.jrn-entry,
.jrn-card,
.riseup-stat-card {
    transition:
        transform .25s cubic-bezier(.2, .8, .2, 1),
        box-shadow .28s ease,
        border-color .25s ease;
    will-change: transform;
}

.card:hover,
.saveup-card:hover,
.saveup-vault:hover,
.quick-action:hover,
.learning-card:hover,
.quest-card:hover,
.badge-card.owned:hover,
.jrn-entry:hover,
.jrn-card:hover,
.riseup-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--riseup-shadow-md, 0 18px 48px rgba(31, 41, 55, 0.10));
}

/* Badge locked jangan ikut angkat (biar kelihatan "belum aktif") */
.badge-card.locked:hover { transform: none; }

/* Sedikit bounce di icon quick-action pas hover */
.quick-action strong { display: inline-block; transition: transform .25s ease; }
.quick-action:hover strong { transform: translateX(2px); }

/* ---------- 4. Tombol: press feedback + shine ---------- */

.btn,
.riseup-nav-button,
.wdr-btn,
.btn-midtrans,
.jrn-btn {
    position: relative;
    overflow: hidden;
}

.btn:hover:not(:disabled),
.riseup-nav-button:hover:not(:disabled),
.jrn-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(249, 115, 22, 0.25);
}
.btn:active:not(:disabled),
.riseup-nav-button:active:not(:disabled),
.jrn-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.18);
}

/* Kilau tipis lewat, dipicu class .btn-shine (opsional) */
.btn-shine::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .55s ease;
}
.btn-shine:hover::after { left: 130%; }

/* ---------- 5. Nav link underline animasi ---------- */

.riseup-nav-link {
    position: relative;
}
.riseup-nav-link::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 6px;
    height: 2px; border-radius: 2px;
    background: var(--riseup-orange, #ff8a00);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.riseup-nav-link:hover::after,
.riseup-nav-link.is-active::after { transform: scaleX(1); }

/* ---------- 6. Kalender: reveal per-sel + hover ---------- */

.calendar-grid > * {
    animation: calCell .38s ease both;
    animation-delay: calc(var(--i, 0) * 12ms);
}
.calendar-grid > *:hover:not(.empty):not(.none) {
    transform: scale(1.08);
    z-index: 2;
    box-shadow: 0 6px 16px rgba(31, 41, 55, 0.15);
}
.calendar-grid > * { transition: transform .18s ease, box-shadow .2s ease; }

@keyframes calCell {
    from { opacity: 0; transform: translateY(6px) scale(.9); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 7. Progress bar (SaveUp, badge, dll) ---------- */

.saveup-progress span,
.b-bar span,
.progress-bar span {
    transition: width 1s cubic-bezier(.2, .8, .2, 1);
}

/* Efek shimmer tipis pas progress mendekati 100% */
.saveup-progress.is-full span,
.b-bar.is-full span {
    background-image: linear-gradient(
        90deg,
        var(--riseup-green, #22c55e) 0%,
        var(--riseup-green-dark, #16a34a) 50%,
        var(--riseup-green, #22c55e) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ---------- 8. Angka: count-up smoothing ---------- */

.count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- 9. Toast (opsional dipakai session flash) ---------- */

.toast-wrap {
    position: fixed;
    top: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 9999;
    pointer-events: none;
}
.toast {
    background: var(--riseup-white, #fff);
    border: 1px solid var(--riseup-line, #e5e7eb);
    border-left: 4px solid var(--riseup-orange, #ff8a00);
    box-shadow: var(--riseup-shadow-md, 0 18px 48px rgba(31, 41, 55, 0.10));
    padding: 12px 16px; border-radius: 12px;
    min-width: 260px; max-width: 380px;
    font-size: 14px; font-weight: 600;
    color: var(--riseup-dark, #1f2937);
    transform: translateX(120%);
    opacity: 0;
    animation: toastIn .35s cubic-bezier(.2,.7,.2,1) forwards, toastOut .3s ease 4.2s forwards;
    pointer-events: auto;
}
.toast.is-success { border-left-color: var(--riseup-green, #22c55e); }
.toast.is-error   { border-left-color: var(--riseup-red, #ef4444); }

@keyframes toastIn  { to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* ---------- 10. Skeleton loader (buat state loading kalau perlu) ---------- */

.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #eaecef 37%, #f3f4f6 63%);
    background-size: 400% 100%;
    animation: skeleton 1.4s ease infinite;
    border-radius: 8px;
    color: transparent;
}
@keyframes skeleton {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- 11. Detail kecil ---------- */

/* success / error flash: slide masuk halus */
.success, .error-flash, .jrn-flash, .ach-flash {
    animation: flashIn .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Tabel row hover halus */
.wdr-table tbody tr,
.table-wrap table tbody tr {
    transition: background-color .18s ease;
}
.wdr-table tbody tr:hover,
.table-wrap table tbody tr:hover {
    background: var(--riseup-cream-light, #fffdf5);
}

/* Input focus glow */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="password"], textarea, select {
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(255, 138, 0, .18);
}

/* ---------- 12. Respect user preference ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}