/* ============================================
   ART DECO ANIMATIONS - Mike Muratore Portfolio
   Geometric Reveals & Metallic Shines
   ============================================ */

/* ========== LOADING ANIMATION ========== */
@keyframes logoRevealArtDeco {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        filter: blur(10px);
    }

    60% {
        opacity: 1;
        transform: scale(1.1) rotate(2deg);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

@keyframes goldShimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes loadingFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes orbitGlow {
    0% {
        transform: rotate(0deg);
        opacity: 0.6;
    }

    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

@keyframes loadingPulse {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(0, 68, 204, 0.25));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.35));
    }
}

@keyframes loadingSweep {
    0% {
        transform: rotate(0deg);
        opacity: 0.3;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.7;
    }
}

/* ========== DIAGONAL SLIDE-INS ========== */
@keyframes diagonalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50px, -50px) rotate(var(--diagonal-angle));
    }

    to {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--diagonal-angle));
    }
}

@keyframes diagonalSlideInNeg {
    from {
        opacity: 0;
        transform: translate(50px, -50px) rotate(var(--diagonal-angle-neg));
    }

    to {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--diagonal-angle-neg));
    }
}

@keyframes diagonalSlideUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

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

/* ========== GEOMETRIC REVEALS ========== */
@keyframes geometricExpand {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 0;
    }

    to {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}

@keyframes hexagonReveal {
    from {
        clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 50%, 50% 0%);
    }

    to {
        clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    }
}

/* ========== METALLIC SHINE EFFECTS ========== */
@keyframes metallicShine {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes goldPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.6), 0 0 60px rgba(212, 175, 55, 0.4);
    }
}

@keyframes copperGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(184, 115, 51, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(184, 115, 51, 0.8));
    }
}

/* ========== ROTATING ELEMENTS ========== */
@keyframes sunburstRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes slowRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ========== TEXT ANIMATIONS ========== */
@keyframes characterReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes goldFlash {

    0%,
    100% {
        color: var(--color-text-primary);
    }

    50% {
        color: var(--color-gold);
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    }
}

/* ========== SCROLL ANIMATIONS ========== */
@keyframes fadeInUpLuxury {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========== GEOMETRIC PATTERNS ========== */
@keyframes patternShift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100px 100px;
    }
}

/* ========== ANIMATION CLASSES ========== */

/* Diagonal Slides */
.animate-diagonal-in {
    animation: diagonalSlideIn var(--duration-slower) var(--ease-luxury) forwards;
}

.animate-diagonal-in-neg {
    animation: diagonalSlideInNeg var(--duration-slower) var(--ease-luxury) forwards;
}

.animate-diagonal-up {
    animation: diagonalSlideUp var(--duration-slow) var(--ease-out) forwards;
}

/* Geometric Reveals */
.animate-geometric-expand {
    animation: geometricExpand var(--duration-slower) var(--ease-luxury) forwards;
}

.animate-hexagon-reveal {
    animation: hexagonReveal var(--duration-slow) var(--ease-out) forwards;
}

/* Metallic Effects */
.animate-gold-pulse {
    animation: goldPulse 3s ease-in-out infinite;
}

.animate-copper-glow {
    animation: copperGlow 4s ease-in-out infinite;
}

/* Rotation */
.animate-sunburst {
    animation: sunburstRotate 60s linear infinite;
}

.animate-slow-rotate {
    animation: slowRotate 40s linear infinite;
}

/* Text */
.animate-character-reveal {
    animation: characterReveal var(--duration-normal) var(--ease-out) forwards;
}

.animate-gold-flash {
    animation: goldFlash 2s ease-in-out;
}

/* Scroll Triggered */
.scroll-animate {
    opacity: 1;
    /* Changed from 0 to fix blank page issue */
}

.scroll-animate.visible {
    animation: fadeInUpLuxury var(--duration-slower) var(--ease-luxury) forwards;
}

/* Stagger Delays */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

.delay-600 {
    animation-delay: 600ms;
}

.delay-700 {
    animation-delay: 700ms;
}

.delay-800 {
    animation-delay: 800ms;
}

.delay-900 {
    animation-delay: 900ms;
}

.delay-1000 {
    animation-delay: 1000ms;
}

/* ========== HOVER ANIMATIONS ========== */

.hover-gold-shine {
    position: relative;
    overflow: hidden;
}

.hover-gold-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: var(--gradient-metallic-shine);
    transition: left 0.6s ease;
}

.hover-gold-shine:hover::after {
    left: 150%;
}

.hover-lift-luxury {
    transition: all var(--duration-normal) var(--ease-luxury);
}

.hover-lift-luxury:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl), var(--shadow-gold);
}

.hover-tilt-3d {
    transition: transform var(--duration-normal) var(--ease-luxury);
    transform-style: preserve-3d;
}

.hover-tilt-3d:hover {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.05);
}

/* ========== TRANSITION UTILITIES ========== */

.transition-luxury {
    transition: all var(--duration-normal) var(--ease-luxury);
}

.transition-fast {
    transition: all var(--duration-fast) var(--ease-out);
}

.transition-slow {
    transition: all var(--duration-slow) var(--ease-luxury);
}

/* ========== PERFORMANCE ========== */

.will-animate {
    will-change: transform, opacity;
}

.gpu-accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ========== RESPONSIVE ANIMATIONS ========== */

@media (max-width: 768px) {

    /* Reduce animation intensity on mobile */
    .animate-diagonal-in,
    .animate-diagonal-in-neg {
        animation-duration: var(--duration-normal);
    }

    .hover-lift-luxury:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .animate-sunburst,
    .animate-slow-rotate {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    /* Disable all animations for accessibility */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}