/* =========================================
   BASE STYLES & PAGE LOAD
========================================= */
html {
    scroll-behavior: smooth;
}

.opacity-100-ready {
    opacity: 1 !important;
}

.page-enter-right {
    animation: slideInRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.page-exit-right {
    animation: slideOutRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* =========================================
   AMBIENT BACKGROUND & GLASS EFFECTS
========================================= */
.blob {
    position: absolute;
    filter: blur(60px);
    z-index: -1;
    opacity: 0.4;
    animation: move 14s infinite alternate ease-in-out;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes move {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, -40px) scale(1.15);
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* =========================================
   UTILITIES
========================================= */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: autoReveal 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes autoReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

/* =========================================
   TREE NODES & STATIC EXAMPLES
========================================= */
.tree-node {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 10;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tree-node:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 30px -10px rgba(16, 185, 129, 0.4);
    border-color: #10b981;
}

.tree-node:active {
    transform: scale(0.95);
}

.node-sprout {
    opacity: 0;
    animation: sprout 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sprout {
    0% {
        transform: translateY(-30px) scale(0.7);
        opacity: 0;
    }

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

.slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.pop-in {
    opacity: 0;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% {
        transform: scale(0.5) translateY(20px);
        opacity: 0;
    }

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

/* =========================================
   MODAL CORE TRANSITIONS
========================================= */
.modal-active {
    display: flex !important;
}

.modal-content-show {
    transform: scale(1) !important;
    opacity: 1 !important;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
}

/* =========================================
   AI DYNAMIC CONTENT & HIGHLIGHT BOUNCE
========================================= */
.bounce-in-up {
    opacity: 0;
    animation: bounceInUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.02);
    }

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

.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

/* --- Special Terminations Bouncing CSS --- */

@keyframes bounceEnding {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }

    60% {
        transform: translateY(-3px);
    }
}

/* Static Panel Endings (Tree view) */
.static-ending {
    display: inline-block;
    color: #ec4899;
    /* Pink 500 */
    background-color: #fdf2f8;
    border: 2px solid #fbcfe8;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.2);
    animation: bounceEnding 1.8s infinite ease-in-out;
}

/* Dynamic AI Panel Endings (Conjugation Modal) */
.ending-highlight {
    color: #ec4899;
    /* Pink 500 */
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
    display: inline-block;
    animation: bounceEnding 1.8s infinite ease-in-out;
    font-weight: 900;
    position: relative;
}