/* Shared fixes for subpages to prevent mobile horizontal drift */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    margin: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.page-transition-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Transition overlays (used by transitions.js) */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.page-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.liquid-morph-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}

.liquid-morph-blob {
    position: absolute;
    background: white;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0) scale(0);
    opacity: 0;
    will-change: transform, opacity;
}

.liquid-morph-blob.expanding {
    opacity: 1;
    animation: liquidExpand 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Disable SVG filter on mobile/touch — causes intermittent visual artifacts */
@media (hover: none) and (pointer: coarse),
       (max-width: 768px),
       screen and (pointer: coarse) {
    .liquid-morph-blob {
        filter: none;
    }
}

.liquid-ripple {
    position: absolute;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}

.liquid-ripple.animate {
    animation: rippleOut 0.8s ease-out forwards;
}

.liquid-particle {
    position: absolute;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}

.liquid-particle.animate {
    animation: particleBurst 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes liquidExpand {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(0);
        border-radius: 50%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    50% {
        border-radius: 45% 55% 50% 50%;
        opacity: 1;
    }
    100% {
        transform: translate3d(-50%, -50%, 0) scale(1);
        border-radius: 0%;
        opacity: 1;
    }
}

@keyframes rippleOut {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

@keyframes particleBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(1);
        opacity: 0;
    }
}

/* ==================== Custom Cursor (used by cursor.js) ==================== */
.custom-cursor-active { cursor: none !important; }
.custom-cursor-active * { cursor: none !important; }

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
}

.cursor-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: all 0.15s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.cursor-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.cursor.cursor-link .cursor-dot { width: 12px; height: 12px; }
.cursor.cursor-link .cursor-ring { width: 50px; height: 50px; border-color: rgba(255, 255, 255, 0.8); }

.cursor.cursor-button .cursor-dot { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.3); }
.cursor.cursor-button .cursor-ring { width: 45px; height: 45px; }

.cursor.cursor-text .cursor-dot { width: 3px; height: 24px; border-radius: 2px; }
.cursor.cursor-text .cursor-ring { opacity: 0; }

.cursor.cursor-clicking .cursor-dot { transform: translate(-50%, -50%) scale(0.7); }
.cursor.cursor-clicking .cursor-ring { transform: translate(-50%, -50%) scale(0.8); }

@media (hover: none) and (pointer: coarse) {
    .cursor { display: none !important; }
    .custom-cursor-active, .custom-cursor-active * { cursor: auto !important; }
}

/* ==================== Page Transitions ==================== */
.page-transition-wrapper {
    opacity: 1;
    transition: opacity 0.4s ease;
}

.page-exit { opacity: 0 !important; }
.page-enter { animation: pageEnterAnim 0.4s ease-out forwards; }

@keyframes pageEnterAnim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}