:root {
    --pc-total: 2600ms; /* total runtime */
    --pc-letters: 1400ms; /* letters finish by this */
    --pc-uline: 1000ms; /* underline draw */
    --pc-fade: 220ms; /* fade-out at end */
    --pc-spark-delay: 900ms; /* when spark starts moving */
    --pc-spark-dur: 900ms; /* spark travel duration */
}

/* Logo fade in */
#pc-logo {
    animation: pcLogoIn 500ms ease forwards;
    animation-delay: 120ms;
}

@keyframes pcLogoIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Optional: subtle pop-in when shown */
#modalMsgTeacher:not(.hidden) .modal-panel {
    animation: modalIn .18s ease-out;
    transform-origin: top center;
}

@keyframes modalIn {
    from {
        transform: translateY(10px) scale(.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Letters */
.pc-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    animation-name: pcLetterIn;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
    animation-fill-mode: forwards;
}
/* ===== Slim scrollbars (Chrome/Edge/Safari) ===== */
.scrollbar-slim::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-slim::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-slim::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45); /* slate-400-ish */
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.scrollbar-slim:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.65); /* slate-500-ish */
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ===== Firefox ===== */
.scrollbar-slim {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.55) transparent;
}

.scrollbar-hover::-webkit-scrollbar-thumb {
    background: transparent;
}

.scrollbar-hover:hover::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.55);
}



@keyframes pcLetterIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Page Transition (Pi-C) ===== */
#pc-page {
    opacity: 1;
    transform: translate3d(0,0,0); /* important */
    transition: opacity .22s ease, transform .22s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    #pc-page.pc-enter {
        opacity: 0;
        transform: translate3d(0,10px,0);
    }

        #pc-page.pc-enter.pc-enter-active {
            opacity: 1;
            transform: translate3d(0,0,0);
        }

    #pc-page.pc-exit {
        opacity: 0;
        transform: translate3d(0,10px,0);
    }

    /* When we finish the animation, we remove will-change to stop blur */
    #pc-page.pc-done {
        will-change: auto;
    }

@media (prefers-reduced-motion: reduce) {
    #pc-page {
        transition: none !important;
        transform: none !important;
    }
}
@media (max-width: 640px) {
    .fancy-timer-wrap {
        width: 100%;
    }

    /* Underline draw */
    #pc-underline .pc-line {
        stroke-dasharray: 560;
        stroke-dashoffset: 560;
        animation: pcDrawLine calc(var(--pc-uline)) ease forwards;
        animation-delay: 220ms;
    }

    @keyframes pcDrawLine {
        to {
            stroke-dashoffset: 0;
        }
    }

    /* Spark travels along the line */
    #pc-underline .pc-spark {
        opacity: 0;
        animation: pcSparkIn 120ms ease forwards calc(var(--pc-spark-delay)), pcSparkMove calc(var(--pc-spark-dur)) ease forwards calc(var(--pc-spark-delay));
    }

    @keyframes pcSparkIn {
        to {
            opacity: 1;
        }
    }

    @keyframes pcSparkMove {
        from {
            transform: translate(10px,10px);
        }

        to {
            transform: translate(550px,10px);
        }
    }

    /* Bloom background */
    .pc-bloom {
        background: radial-gradient(circle at 50% 45%, rgba(249,115,22,.18), transparent 55%), radial-gradient(circle at 50% 60%, rgba(251,146,60,.12), transparent 60%);
        filter: blur(10px);
    }

    .pp-rotator {
        --bg-color: #fff;
    }
    /* set this to your header bg if not white */

    .pp-words {
        overflow: hidden;
        position: relative;
        height: 1em; /* matches line height */
        line-height: 1;
    }

        .pp-words::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

    .pp-word {
        display: block;
        height: 1em;
        padding-left: .3ch;
        animation: pp-spin 4.8s infinite;
        will-change: transform;
    }

    /* step animation tuned for 5 rows (first word repeated at end) */
    @keyframes pp-spin {
        10% {
            transform: translateY(-102%);
        }

        25% {
            transform: translateY(-100%);
        }

        35% {
            transform: translateY(-202%);
        }

        50% {
            transform: translateY(-200%);
        }

        60% {
            transform: translateY(-302%);
        }

        75% {
            transform: translateY(-300%);
        }

        85% {
            transform: translateY(-402%);
        }

        100% {
            transform: translateY(-400%);
        }
    }


    /* ===== Pretty modern animations + your orange palette ===== */
    .blob {
        position: absolute;
        width: 520px;
        height: 520px;
        filter: blur(45px);
        opacity: .35;
        border-radius: 999px;
        mix-blend-mode: multiply;
        transform: translate3d(0,0,0);
        animation: floaty 10s ease-in-out infinite;
    }

    .blob-a {
        left: -160px;
        top: -160px;
        background: radial-gradient(circle at 30% 30%, rgba(249,115,22,.7), rgba(251,146,60,.2));
    }

    .blob-b {
        right: -180px;
        top: 120px;
        background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.65), rgba(251,146,60,.15));
        animation-duration: 12s;
    }

    .blob-c {
        left: 20%;
        bottom: -260px;
        background: radial-gradient(circle at 30% 30%, rgba(234,88,12,.55), rgba(251,146,60,.12));
        animation-duration: 14s;
    }

    @keyframes floaty {
        0%, 100% {
            transform: translate(0,0) scale(1);
        }

        50% {
            transform: translate(22px,-18px) scale(1.05);
        }
    }

    /* Reveal animation */
    .pc-reveal {
        opacity: 0;
        transform: translateY(14px) scale(.99);
        transition: opacity .6s ease, transform .6s ease;
    }

        .pc-reveal.pc-in {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

    /* Grade progress bar fill */
    .grade-btn.is-active {
        border-color: rgba(249,115,22,.35);
        box-shadow: 0 12px 30px rgba(249,115,22,.12);
        transform: translateY(-2px);
    }

        .grade-btn.is-active .grade-bar {
            width: 100%;
            transition: width .45s ease;
        }

    /* Class button active */
    .class-btn.is-active {
        border-color: rgba(249,115,22,.35);
        box-shadow: 0 12px 30px rgba(249,115,22,.12);
        transform: translateY(-2px);
        background: linear-gradient(135deg, rgba(255,247,237,.9), rgba(255,255,255,.95));
    }

    /* Subject chip active */
    .subject-chip.is-active {
        border-color: rgba(249,115,22,.35);
        background: linear-gradient(135deg, rgba(255,247,237,.95), rgba(255,255,255,1));
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(249,115,22,.10);
    }

        .subject-chip.is-active i {
            display: inline-block !important;
            color: #c2410c;
        }

    /* Micro “pop” */
    .pop {
        animation: pop .22s ease;
    }
    /* elements used for tour steps */
    #tour-profile, #tour-stats, #tour-createpost, #tour-feed, #tour-privacy {
        scroll-margin-top: 90px; /* adjust if your header height differs */
    }
    #pc-page.pc-no-transform,
    #pc-page.pc-no-transform * {
        transform: none !important;
    }

    @keyframes pop {
        0% {
            transform: scale(1);
        }

        55% {
            transform: scale(1.03);
        }

        100% {
            transform: scale(1);
        }
    }