/* ========================================================
   PREMIUM FX — 4 Hiệu ứng Nâng cấp
   ======================================================== */

/* ═══════════════════════════════════════════════════════
   1. GLOWING SCROLL PROGRESS BAR
   ═══════════════════════════════════════════════════════ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    z-index: 99999;
    background: linear-gradient(90deg, #C8192B, #E84055, #FF6B3A);
    box-shadow:
        0 0 8px rgba(200, 25, 43, 0.6),
        0 0 20px rgba(232, 64, 85, 0.3);
    border-radius: 0 2px 2px 0;
    transition: width 0.05s linear;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   2. CUSTOM MORPHING CURSOR (Desktop only)
   ═══════════════════════════════════════════════════════ */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition:
        width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.35s ease,
        opacity 0.35s ease,
        mix-blend-mode 0.2s ease;
    opacity: 0.9;
}

.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(200, 25, 43, 0.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    transform: translate(-50%, -50%);
    transition:
        width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.35s ease,
        background 0.35s ease,
        opacity 0.35s ease;
    opacity: 0.6;
}

/* Hover state: phình to + blend mode */
.cursor-dot.is-hover {
    width: 48px;
    height: 48px;
    background: rgba(200, 25, 43, 0.15);
    mix-blend-mode: difference;
    opacity: 1;
}

.cursor-ring.is-hover {
    width: 60px;
    height: 60px;
    border-color: rgba(200, 25, 43, 0.5);
    opacity: 0.9;
}

/* Text hover: hiệu ứng nhỏ hơn cho text */
.cursor-dot.is-text {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: var(--red);
    mix-blend-mode: difference;
}

.cursor-ring.is-text {
    width: 0;
    height: 0;
    opacity: 0;
}

/* Ẩn cursor tuỳ chỉnh trên mobile/tablet */
@media (hover: none), (max-width: 1024px) {
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }
}

/* Ẩn cursor mặc định trên desktop */
@media (hover: hover) and (min-width: 1025px) {
    body,
    a,
    button,
    input,
    textarea,
    select {
        cursor: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   3. SHIMMER / SWEEP TEXT EFFECT
   ═══════════════════════════════════════════════════════ */
.shimmer-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.shimmer-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 80%,
        transparent 100%
    );
    animation: shimmerSweep 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes shimmerSweep {
    0%, 85% {
        left: -100%;
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 200%;
        opacity: 0;
    }
}

/* Variant cho các nền sáng (chữ đỏ) */
.shimmer-text-dark::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 25, 43, 0) 20%,
        rgba(200, 25, 43, 0.12) 50%,
        rgba(200, 25, 43, 0) 80%,
        transparent 100%
    );
}

/* Stagger animation cho nhiều shimmer text */
.shimmer-text:nth-child(2)::after { animation-delay: 2s; }
.shimmer-text:nth-child(3)::after { animation-delay: 4s; }

/* ═══════════════════════════════════════════════════════
   4. LIQUID PAGE TRANSITION
   ═══════════════════════════════════════════════════════ */
.liquid-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99990;
    pointer-events: none;
    display: flex;
}

.liquid-transition .liq-col {
    flex: 1;
    height: 100%;
    background: linear-gradient(180deg, #7A0010, #C8192B, #E84055);
    transform: scaleY(0);
    transform-origin: bottom;
}

/* Animation chạy vào */
.liquid-transition.is-entering .liq-col {
    animation: liqColIn 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Animation chạy ra */
.liquid-transition.is-leaving .liq-col {
    animation: liqColOut 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Stagger delay cho từng cột */
.liquid-transition .liq-col:nth-child(1) { animation-delay: 0s; }
.liquid-transition .liq-col:nth-child(2) { animation-delay: 0.04s; }
.liquid-transition .liq-col:nth-child(3) { animation-delay: 0.08s; }
.liquid-transition .liq-col:nth-child(4) { animation-delay: 0.12s; }
.liquid-transition .liq-col:nth-child(5) { animation-delay: 0.16s; }

@keyframes liqColIn {
    0%   { transform: scaleY(0); transform-origin: bottom; }
    100% { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes liqColOut {
    0%   { transform: scaleY(1); transform-origin: top; }
    100% { transform: scaleY(0); transform-origin: top; }
}


/*==============================
   PAGE EXIT ANIMATIONS
==============================*/
.exit-up {
    animation: slideExitUp 0.45s forwards cubic-bezier(0.22, 1, 0.36, 1);
}
.exit-down {
    animation: slideExitDown 0.45s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideExitUp {
    0% { transform: translateY(0); opacity: 1; filter: blur(0); }
    100% { transform: translateY(-50px); opacity: 0; filter: blur(4px); }
}

@keyframes slideExitDown {
    0% { transform: translateY(0); opacity: 1; filter: blur(0); }
    100% { transform: translateY(50px); opacity: 0; filter: blur(4px); }
}
/* ═══════════════════════════════════════════════════════
   ĐIỀU CHỈNH VỊ TRÍ NÚT BACK-TO-TOP TRÊN ĐIỆN THOẠI
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    #back-to-top {
        bottom: 90px !important;
        right: 20px !important; 
        transform: scale(0.85) !important; 
    }
}