@tailwind base;
@tailwind components;
@tailwind utilities;

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar (Haunted Edition) */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #fb923c; /* Pumpkin */
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9333ea; /* Witch Purple */
}

/* Base Animations */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.2; transform: translate(-50%, -50%) scale(1.1); }
}

/* Flicker Animation for Haunted Text */
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 0.9;
        text-shadow: 2px 2px 0px rgba(249, 115, 22, 0.4);
    }
    20%, 24%, 55% {
        opacity: 0.4;
        text-shadow: none;
    }
}

.haunted-text {
    animation: flicker 4s infinite alternate;
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-spin-reverse {
    animation: spin-reverse 25s linear infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 8s ease-in-out infinite;
}

/* Glitch Effect Classes */
.glitch-container {
    position: relative;
    display: inline-block;
}

/* Reveal on Scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    filter: blur(10px);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

.delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }

/* Contact Section Slant */
.clip-path-slant {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}

@media (max-width: 768px) {
    .clip-path-slant {
        clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
    }
}

/* Custom Selection Color */
::selection {
    background: #fb923c;
    color: #fff;
    text-shadow: none;
}

/* Hamburger Line Helper */
.hamburger-line::before,
.hamburger-line::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    transition: all 0.3s;
}

.hamburger-line::before { top: -8px; }
.hamburger-line::after { top: 8px; }

/* 3D Tilt Helper */
.js-tilt {
    transform-style: preserve-3d;
    will-change: transform;
}