/* ============================================
   VIEW TRANSITIONS
   Morphing effects for mode switching
   ============================================ */

/* ========== ENABLE VIEW TRANSITIONS ========== */
@view-transition {
    navigation: auto;
}

/* ========== ROOT TRANSITION ========== */
::view-transition-old(root) {
    animation: glitch-out 0.4s ease-out forwards;
}

::view-transition-new(root) {
    animation: glitch-in 0.4s ease-in forwards;
}

@keyframes glitch-out {
    0% {
        filter: none;
        transform: none;
        opacity: 1;
    }

    20% {
        filter: hue-rotate(90deg) saturate(2);
        transform: translateX(-3px);
    }

    40% {
        filter: hue-rotate(-90deg) contrast(1.5);
        transform: translateX(3px) skewX(1deg);
    }

    60% {
        filter: brightness(1.5) blur(2px);
        transform: translateX(-2px) skewX(-1deg);
    }

    80% {
        filter: invert(0.1) brightness(2);
        transform: scale(1.02);
    }

    100% {
        opacity: 0;
        filter: brightness(3) blur(5px);
        transform: scale(1.05);
    }
}

@keyframes glitch-in {
    0% {
        opacity: 0;
        filter: brightness(3) blur(5px);
        transform: scale(0.95);
    }

    20% {
        opacity: 0.5;
        filter: brightness(2) hue-rotate(-90deg);
        transform: translateX(3px) skewX(-1deg);
    }

    40% {
        opacity: 0.7;
        filter: brightness(1.5) hue-rotate(90deg);
        transform: translateX(-3px) skewX(1deg);
    }

    60% {
        opacity: 0.9;
        filter: brightness(1.2) saturate(1.5);
        transform: translateX(2px);
    }

    80% {
        opacity: 1;
        filter: brightness(1.1);
        transform: translateX(-1px);
    }

    100% {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* ========== NAMED VIEW TRANSITIONS ========== */
/* Isolate specific elements for independent transitions */

.hero {
    view-transition-name: hero;
}

.features {
    view-transition-name: features;
}

.cta {
    view-transition-name: cta;
}

/* ========== HERO-SPECIFIC TRANSITION ========== */
::view-transition-old(hero) {
    animation: hero-morph-out 0.5s ease-out forwards;
}

::view-transition-new(hero) {
    animation: hero-morph-in 0.5s ease-in forwards;
}

@keyframes hero-morph-out {
    0% {
        transform: none;
        filter: none;
    }

    50% {
        transform: scale(1.1) translateY(-10px);
        filter: blur(10px) brightness(1.5);
    }

    100% {
        transform: scale(1.2) translateY(-20px);
        filter: blur(20px) brightness(2);
        opacity: 0;
    }
}

@keyframes hero-morph-in {
    0% {
        transform: scale(0.8) translateY(20px);
        filter: blur(20px) brightness(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(0.95) translateY(5px);
        filter: blur(5px) brightness(0.8);
        opacity: 0.8;
    }

    100% {
        transform: none;
        filter: none;
        opacity: 1;
    }
}

/* ========== MODE-SPECIFIC TRANSITIONS ========== */
/* Rot Mode -> Corporate Mode */
[data-mode="corporate"] {
    view-transition-name: corporate-in;
}

/* Custom transition for corporate mode */
::view-transition-group(corporate-in) {
    animation-duration: 0.6s;
}

/* ========== UTILITY TRANSITIONS ========== */
.rot-transition-morph {
    view-transition-name: morph-element;
}

::view-transition-old(morph-element) {
    animation: element-dissolve 0.3s ease-out forwards;
}

::view-transition-new(morph-element) {
    animation: element-materialize 0.3s ease-in forwards;
}

@keyframes element-dissolve {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: scale(0.8) rotateY(10deg);
    }
}

@keyframes element-materialize {
    from {
        opacity: 0;
        transform: scale(1.2) rotateY(-10deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}