/* Explain: Base reset, typography, animations, and 3D rotating cursor. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.splash-lock {
    overflow: hidden;
}

.app-splash {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.app-splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-splash-logo {
    animation: splash-logo-pulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 18px 35px rgba(234, 88, 12, 0.18));
}

.app-splash-progress {
    width: 0;
    animation: splash-progress 2s ease forwards;
}

@keyframes splash-logo-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

@keyframes splash-progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes drive-rtl {
    0% { left: 100%; }
    100% { left: -20%; }
}

.animate-drive-rtl {
    animation: drive-rtl 12s linear infinite;
    position: absolute;
}

@keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.animate-marquee-right {
    animation: marquee-right 20s linear infinite;
    width: 200%;
}

@keyframes gradient-slow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-slow {
    background-size: 200% 200%;
    animation: gradient-slow 15s ease infinite;
}

[x-cloak] {
    display: none !important;
}

/* Advanced Scroll Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

@media print {
    body, html {
        background: white !important;
    }
    .no-print, header, nav, footer, .lg\:col-span-5 {
        display: none !important;
    }
    main, .flex-grow, .lg\:col-span-7 {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #cv-preview {
        box-shadow: none !important;
        border: none !important;
        margin: 0 auto !important;
    }
    @page {
        size: A4;
        margin: 0;
    }
}

/* Custom 3D Cursor */
@media (pointer: fine) {
    * {
        cursor: none !important;
    }
    .custom-cursor-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 999999;
        will-change: transform;
    }
    .custom-cursor-inner {
        width: 28px;
        height: 28px;
        margin-top: -2px;
        margin-left: -4px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d4af37" stroke="%230a0a0a" stroke-width="1"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.42c.45 0 .67-.54.35-.85L5.5 3.21z"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
        animation: rotateCursor3D 3s linear infinite;
        transform-style: preserve-3d;
    }
    @keyframes rotateCursor3D {
        0% { transform: rotateY(0deg); }
        100% { transform: rotateY(360deg); }
    }
}

/* Fix form inputs text color on light backgrounds site-wide */
.input:not(.bg-slate-800):not(.bg-slate-900):not(.bg-black), 
.textarea:not(.bg-slate-800):not(.bg-slate-900):not(.bg-black),
.select:not(.bg-slate-800):not(.bg-slate-900):not(.bg-black) {
    color: #0f172a !important;
}

.input:not(.bg-slate-800):not(.bg-slate-900):not(.bg-black)::placeholder,
.textarea:not(.bg-slate-800):not(.bg-slate-900):not(.bg-black)::placeholder {
    color: #94a3b8 !important;
}