/**
 * PP5 global soft motion — all roles / pages.
 * Soft hover, modal, view switches, dropdowns, page enter.
 * Loaded after core CSS so timings win without fighting subject-card locks.
 */

:root {
    --pp5-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --pp5-ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
    /* Snappy dashboard motion — long durations + filter/shadow transitions feel laggy */
    --pp5-motion-fast: 90ms;
    --pp5-motion: 130ms;
    --pp5-motion-slow: 170ms;
    --pp5-motion-view: 120ms;
    --pp5-motion-modal: 140ms;
}

html {
    scroll-behavior: smooth;
}

/*
 * Page enter must NOT animate `filter` on body.
 * Even a residual filter (e.g. blur(0)) creates a containing block, which
 * breaks position:fixed overlays (login modal) — especially on long tablet pages.
 */
html.pp5-motion-ready body {
    animation: pp5PageEnter var(--pp5-motion-slow) var(--pp5-ease-out) both;
}

@keyframes pp5PageEnter {
    from {
        opacity: 0.88;
    }
    to {
        opacity: 1;
    }
}

html.pp5-motion-ready body.pp5-page-entered {
    animation: none;
    filter: none !important;
}

/* Soft interactive surfaces (exclude inputs/textareas for typing feel) */
html.pp5-motion-ready :is(
    a,
    button,
    .btn,
    .sidebar-link,
    .header-account-toggle,
    .header-account-action,
    .student-course-tool,
    .pp5-profile-photo-btn,
    .course-card,
    .student-course-card,
    .pp5-subject-card,
    .student-anim-card,
    .student-trust-anim-card,
    .pp5-student-trust__item,
    .pp5-exam-card,
    .teacher-overview-card,
    .report-summary-card,
    .homeroom-avatar,
    [role="menuitem"],
    [role="button"],
    .admin-nav-item,
    .pp5-admin-toolbar button
):not(:disabled):not([disabled]) {
    /* Avoid filter + box-shadow transitions — they repaint and feel choppy */
    transition-property: transform, background-color, background, border-color, color, opacity;
    transition-duration: var(--pp5-motion);
    transition-timing-function: var(--pp5-ease-out);
}

html.pp5-motion-ready :is(
    .sidebar-link,
    .header-account-toggle,
    .header-account-action,
    .student-course-tool,
    .pp5-profile-photo-btn,
    button.btn,
    .btn
):not(:disabled):not([disabled]):active {
    transform: translateY(1px) scale(0.985);
    transition-duration: 80ms;
}

/* Soft lift for content cards (subject cards keep their own longer ease) */
html.pp5-motion-ready :is(
    .student-anim-card,
    .student-trust-anim-card,
    .pp5-exam-card,
    .teacher-overview-card,
    .report-summary-card,
    .student-profile-card,
    .student-stat-card,
    .saas-insights,
    .pp5-admin-card,
    .admin-stat-card
):hover {
    transform: translateY(-2px);
}

/* Softer view / panel transitions (override style.css) */
html.pp5-motion-ready .view-section {
    transition:
        opacity var(--pp5-motion-view) var(--pp5-ease-out),
        transform var(--pp5-motion-view) var(--pp5-ease-out) !important;
}

html.pp5-motion-ready .view-section.view-section--entering {
    transform: translateY(14px) scale(0.992) !important;
}

html.pp5-motion-ready .view-section.view-section--leaving {
    transform: translateY(-10px) scale(0.994) !important;
}

html.pp5-motion-ready .pp5-panel-transition {
    transition:
        opacity var(--pp5-motion-view) var(--pp5-ease-out),
        transform var(--pp5-motion-view) var(--pp5-ease-out) !important;
}

/* Modal shell — softer (exclude teacher-eval popups: they use `.is-open`, not `.pp5-modal--visible`) */
html.pp5-motion-ready :is(
    .pp5-modal-shell:not(.hidden),
    .app-modal:not(.hidden),
    .modal-overlay:not(.hidden),
    .student-tasks-modal:not(.hidden),
    .pp5-change-password-modal:not(.hidden),
    [id$="-modal"]:not(.hidden):not(.pp5-teval-popup):not(#pp5-teval-modal)
) {
    opacity: 0;
    transition: opacity var(--pp5-motion-modal) var(--pp5-ease-out) !important;
}

html.pp5-motion-ready :is(
    .pp5-modal-shell.pp5-modal--visible,
    .app-modal.pp5-modal--visible,
    .modal-overlay.pp5-modal--visible,
    .student-tasks-modal.pp5-modal--visible,
    .pp5-change-password-modal.pp5-modal--visible,
    [id$="-modal"].pp5-modal--visible:not(.pp5-teval-popup):not(#pp5-teval-modal)
) {
    opacity: 1 !important;
}

html.pp5-motion-ready :is(
    .pp5-modal-shell .pp5-admin-modal-panel,
    .pp5-modal-shell > .bg-white,
    .pp5-modal-shell > .inline-block.align-bottom,
    .pp5-modal-shell > div.relative.z-10,
    .app-modal .modal-shell,
    .modal-overlay .club-modal-panel,
    .student-tasks-modal__panel,
    .pp5-change-password-modal__panel,
    [id$="-modal"]:not(.pp5-teval-popup):not(#pp5-teval-modal) > .bg-white,
    [id$="-modal"]:not(.pp5-teval-popup):not(#pp5-teval-modal) .pp5-admin-modal-panel
) {
    transform: translateY(10px) scale(0.985);
    opacity: 0;
    transition:
        transform var(--pp5-motion-modal) var(--pp5-ease-out),
        opacity var(--pp5-motion-modal) var(--pp5-ease-soft) !important;
}

html.pp5-motion-ready :is(
    .pp5-modal-shell.pp5-modal--visible .pp5-admin-modal-panel,
    .pp5-modal-shell.pp5-modal--visible > .bg-white,
    .pp5-modal-shell.pp5-modal--visible > .inline-block.align-bottom,
    .pp5-modal-shell.pp5-modal--visible > div.relative.z-10,
    .app-modal.pp5-modal--visible .modal-shell,
    .modal-overlay.pp5-modal--visible .club-modal-panel,
    .student-tasks-modal.pp5-modal--visible .student-tasks-modal__panel,
    .pp5-change-password-modal.pp5-modal--visible .pp5-change-password-modal__panel,
    [id$="-modal"].pp5-modal--visible:not(.pp5-teval-popup):not(#pp5-teval-modal) > .bg-white,
    [id$="-modal"].pp5-modal--visible:not(.pp5-teval-popup):not(#pp5-teval-modal) .pp5-admin-modal-panel
) {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

html.pp5-motion-ready :is(
    .pp5-modal-shell.pp5-modal--closing .pp5-admin-modal-panel,
    .pp5-modal-shell.pp5-modal--closing > .bg-white,
    .modal-overlay.pp5-modal--closing .club-modal-panel,
    .student-tasks-modal.pp5-modal--closing .student-tasks-modal__panel,
    .pp5-change-password-modal.pp5-modal--closing .pp5-change-password-modal__panel
) {
    transform: translateY(6px) scale(0.99) !important;
    opacity: 0 !important;
}

html.pp5-motion-ready :is(
    .pp5-modal-shell.pp5-modal--closing,
    .app-modal.pp5-modal--closing,
    .modal-overlay.pp5-modal--closing,
    .student-tasks-modal.pp5-modal--closing,
    .pp5-change-password-modal.pp5-modal--closing
) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Let PP5Motion own open/close — kill one-shot keyframes that fight transitions */
html.pp5-motion-ready .student-tasks-modal__panel {
    animation: none !important;
}

html.pp5-motion-ready .student-tasks-modal__backdrop {
    opacity: 0;
    transition: opacity var(--pp5-motion-modal) var(--pp5-ease-soft) !important;
}

html.pp5-motion-ready .student-tasks-modal.pp5-modal--visible .student-tasks-modal__backdrop {
    opacity: 1;
}

html.pp5-motion-ready .student-tasks-modal.pp5-modal--closing .student-tasks-modal__backdrop {
    opacity: 0 !important;
}

/* Student dashboard: smooth section / view switches */
html.pp5-motion-ready body.student-admin-page .student-main__canvas {
    transition:
        opacity var(--pp5-motion) var(--pp5-ease-out),
        transform var(--pp5-motion) var(--pp5-ease-out);
}

html.pp5-motion-ready body.student-admin-page .student-main__canvas.pp5-student-view--leaving {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}

html.pp5-motion-ready body.student-admin-page .student-main__canvas.pp5-student-view--enter {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html.pp5-motion-ready body.student-admin-page .student-main__canvas,
    html.pp5-motion-ready body.student-admin-page .student-main__canvas.pp5-student-view--leaving,
    html.pp5-motion-ready body.student-admin-page .student-main__canvas.pp5-student-view--enter {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}
    transform-origin: top right;
    transition:
        opacity var(--pp5-motion) var(--pp5-ease-out),
        transform var(--pp5-motion) var(--pp5-ease-out),
        visibility var(--pp5-motion) var(--pp5-ease-out) !important;
}

html.pp5-motion-ready :is(
    .header-account-dropdown:not(.hidden),
    .student-notif-panel:not(.hidden),
    #student-notif-panel:not(.hidden),
    .pp5-notif-dropdown:not(.hidden)
) {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

html.pp5-motion-ready :is(
    .header-account-dropdown.hidden,
    .student-notif-panel.hidden,
    #student-notif-panel.hidden,
    .pp5-notif-dropdown.hidden
) {
    /* Keep layout for a beat via JS class; CSS fallback */
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
}

/* Sidebar links */
html.pp5-motion-ready .sidebar-link,
html.pp5-motion-ready #admin-sidebar a,
html.pp5-motion-ready .admin-sidebar-nav a {
    transition:
        background-color var(--pp5-motion) var(--pp5-ease-out),
        color var(--pp5-motion) var(--pp5-ease-out),
        transform var(--pp5-motion) var(--pp5-ease-out),
        box-shadow var(--pp5-motion) var(--pp5-ease-out),
        padding var(--pp5-motion) var(--pp5-ease-out) !important;
}

html.pp5-motion-ready .sidebar-link:hover {
    transform: translateX(2px);
}

/* Global rise (admin + shared) */
html.pp5-motion-ready .pp5-rise:not(.pp5-in) {
    opacity: 0;
    transform: translateY(8px);
}

html.pp5-motion-ready .pp5-rise {
    transition:
        opacity var(--pp5-motion-slow) var(--pp5-ease-out),
        transform var(--pp5-motion-slow) var(--pp5-ease-out);
}

html.pp5-motion-ready .pp5-rise.pp5-in {
    opacity: 1;
    transform: none;
}

/* Soften legacy fade-in-up */
html.pp5-motion-ready .animate-fade-in-up {
    animation: pp5FadeInUpSoft var(--pp5-motion-slow) var(--pp5-ease-out) both !important;
}

@keyframes pp5FadeInUpSoft {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SweetAlert softer */
html.pp5-motion-ready .pp5-swal-animate-in {
    animation: pp5SwalIn 180ms var(--pp5-ease-out) forwards !important;
}

html.pp5-motion-ready .pp5-swal-animate-out {
    animation: pp5SwalOut 120ms var(--pp5-ease-soft) forwards !important;
}

html.pp5-motion-ready .pp5-swal-backdrop-in {
    animation: pp5BackdropIn 160ms ease forwards !important;
}

html.pp5-motion-ready .pp5-swal-backdrop-out {
    animation: pp5BackdropOut 120ms ease forwards !important;
}

/* Loading overlay fade */
html.pp5-motion-ready #loading-overlay {
    transition: opacity var(--pp5-motion-slow) var(--pp5-ease-out), visibility var(--pp5-motion-slow) !important;
}

html.pp5-motion-ready #loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.pp5-motion-ready body {
        animation: none !important;
    }

    html.pp5-motion-ready :is(
        a,
        button,
        .btn,
        .sidebar-link,
        .header-account-toggle,
        .header-account-action,
        .course-card,
        .student-course-card,
        .pp5-subject-card,
        .student-anim-card,
        .student-trust-anim-card,
        .pp5-exam-card,
        .pp5-rise,
        .view-section,
        .pp5-panel-transition,
        .pp5-modal-shell,
        .modal-overlay,
        .app-modal,
        .student-tasks-modal,
        .pp5-change-password-modal,
        .header-account-dropdown,
        #loading-overlay
    ) {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    html.pp5-motion-ready .pp5-rise:not(.pp5-in),
    html.pp5-motion-ready .pp5-rise.pp5-in {
        opacity: 1 !important;
    }
}