/* ============================================
   EDUPASS GLOBAL EFFECTS
   ============================================ */

/* ── Page transition overlay ── */
#ep-transition {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #4f46e5, #7c3aed, #a855f7);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .45s cubic-bezier(.77,0,.18,1), opacity .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ep-transition-logo {
    width: 360px;
    height: 360px;
    object-fit: contain;
    border-radius: 36px;
    background: rgba(255,255,255,.15);
    padding: 20px;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s ease .15s, transform .35s cubic-bezier(.22,.68,0,1.2) .15s;
}
#ep-transition.ep-out #ep-transition-logo {
    opacity: 1;
    transform: scale(1);
}
#ep-transition.ep-in #ep-transition-logo {
    opacity: 0;
    transform: scale(.7);
}
#ep-transition.ep-out {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
}
#ep-transition.ep-in {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s cubic-bezier(.77,0,.18,1) .05s;
}

/* ── Scroll reveal ── */
.ep-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .6s cubic-bezier(.22,.68,0,1.2), transform .6s cubic-bezier(.22,.68,0,1.2);
}
.ep-reveal.ep-visible {
    opacity: 1;
    transform: translateY(0);
}
.ep-reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .6s cubic-bezier(.22,.68,0,1.2), transform .6s cubic-bezier(.22,.68,0,1.2);
}
.ep-reveal-left.ep-visible { opacity: 1; transform: translateX(0); }
.ep-reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity .6s cubic-bezier(.22,.68,0,1.2), transform .6s cubic-bezier(.22,.68,0,1.2);
}
.ep-reveal-right.ep-visible { opacity: 1; transform: translateX(0); }

/* ── Cursor trail ── */
.ep-cursor-dot {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: opacity .4s;
    mix-blend-mode: screen;
}

/* ── Particles canvas ── */
#ep-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
}

/* ── Ripple on click ── */
.ep-ripple {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    transform: translate(-50%, -50%) scale(0);
    animation: epRipple .7s cubic-bezier(.22,.68,0,1.2) forwards;
}
@keyframes epRipple {
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Button hover glow ── */
.btn-nav-register,
.nlh-btn-primary,
.dt-btn-translate,
.eco-card-link {
    position: relative;
    overflow: hidden;
}
.btn-nav-register::after,
.nlh-btn-primary::after,
.dt-btn-translate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .5s;
}
.btn-nav-register:hover::after,
.nlh-btn-primary:hover::after,
.dt-btn-translate:hover::after {
    transform: translateX(100%);
}

/* ── Card tilt shadow ── */
.ep-tilt {
    transition: transform .2s, box-shadow .2s;
    will-change: transform;
}

/* ── Floating orbs on hero/header ── */
.ep-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: .35;
    animation: epOrb 8s ease-in-out infinite;
}
@keyframes epOrb {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(30px,-20px) scale(1.1); }
    66%      { transform: translate(-20px,15px) scale(.95); }
}

/* ── Typewriter cursor blink ── */
.ep-blink { animation: epBlink 1s step-end infinite; }
@keyframes epBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Stagger delay helpers ── */
.ep-d1 { transition-delay: .08s !important; }
.ep-d2 { transition-delay: .16s !important; }
.ep-d3 { transition-delay: .24s !important; }
.ep-d4 { transition-delay: .32s !important; }
.ep-d5 { transition-delay: .40s !important; }
.ep-d6 { transition-delay: .48s !important; }

/* ── Chatbot isolation — không bị ảnh hưởng bởi effects ── */
.ai-chat-window,
.ai-chat-window *,
.ai-greeting-bubble,
.ai-greeting-bubble *,
.ai-chat-button,
#aiChatWindow,
#aiChatWindow *,
#aiGreetingBubble,
#aiGreetingBubble *,
#aiChatButton {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
}

/* Khôi phục animation riêng của chatbot */
.ai-chat-window.active { display: flex !important; }
.ai-chat-button { animation: aiPulse 3s ease-in-out infinite !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; }
.ai-chat-button:hover { animation: none !important; }
.typing-dot { animation: typingDot 1.4s ease infinite !important; }
.typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
.typing-dot:nth-child(3) { animation-delay: 0.4s !important; }
.status-dot { animation: statusBlink 2s ease infinite !important; }
.ai-notification-badge { animation: badgeBounce 1.2s ease infinite !important; }
.ai-message { animation: msgFadeIn 0.25s ease !important; }