/* =========================================
   ANIMATIONS & KEYFRAMES
   ========================================= */

/* Body background animations */
@keyframes grid-breathe {
    0%, 100% { background-image: 
        linear-gradient(rgba(138, 43, 226, 0.15) 3px, transparent 3px),
        linear-gradient(90deg, rgba(138, 43, 226, 0.15) 3px, transparent 3px),
        linear-gradient(to bottom, #05000a 0%, #05000a 20%, #0e001c 20%, #0e001c 40%, #17002e 40%, #17002e 60%, #1f0040 60%, #1f0040 80%, #280052 80%, #280052 100%);
    }
    50% { background-image: 
        linear-gradient(rgba(138, 43, 226, 0.22) 3px, transparent 3px),
        linear-gradient(90deg, rgba(138, 43, 226, 0.22) 3px, transparent 3px),
        linear-gradient(to bottom, #05000a 0%, #05000a 20%, #0e001c 20%, #0e001c 40%, #17002e 40%, #17002e 60%, #1f0040 60%, #1f0040 80%, #280052 80%, #280052 100%);
    }
}

@keyframes bg-drift {
    0%, 100% { transform: scale(1) translateY(0); }
    50%       { transform: scale(1.03) translateY(-8px); }
}

/* Loading screen animations */
@keyframes bounce-load {
    0% { transform: translateY(0) scale(1); filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.8)); }
    100% { transform: translateY(-20px) scale(1.1); filter: drop-shadow(4px 20px 0px rgba(0,0,0,0.4)); }
}

@keyframes loader-window-in {
    0% { opacity: 0; transform: scale(0.94); filter: contrast(1.8) hue-rotate(18deg); }
    44% { opacity: 1; transform: scale(1.015); filter: brightness(1.45); }
    100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes loader-window-out {
    0% { opacity: 1; transform: scale(1); filter: none; }
    100% { opacity: 0; transform: scale(0.985); filter: contrast(1.45) brightness(1.2); }
}

@keyframes loader-progress-fill {
    0% { transform: scaleX(0.08); }
    64% { transform: scaleX(0.78); }
    100% { transform: scaleX(1); }
}

@keyframes loader-party-ready {
    0% { transform: translateY(0) scale(1); filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.8)) saturate(0.92); }
    100% { transform: translateY(-8px) scale(1.06); filter: drop-shadow(4px 12px 0 rgba(0,0,0,0.45)) saturate(1.22) brightness(1.08); }
}

/* Entrance animations */
@keyframes fadeUpReveal {
    0%   { opacity: 0; transform: translateY(40px) scale(0.97); filter: brightness(2) blur(2px); }
    40%  { opacity: 0.85; filter: brightness(1.3) blur(0px); }
    60%  { opacity: 1; transform: translateY(-6px) scale(1.01); filter: brightness(1); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

/* Glitch effect */
@keyframes glitch-anim {
    0%    { transform: translate(0) skew(0deg);   filter: none; opacity: 1; }
    1.5%  { transform: translate(-5px, 2px) skew(4deg);  filter: contrast(180%) saturate(400%) hue-rotate(90deg) invert(12%);  opacity: 0.88; }
    3%    { transform: translate(5px, -3px) skew(-4deg); filter: contrast(180%) saturate(400%) hue-rotate(-90deg) invert(12%); opacity: 0.88; }
    4%    { transform: translate(-2px, 1px) skew(1deg);  filter: brightness(1.4) saturate(200%); opacity: 0.95; }
    5%    { transform: translate(0) skew(0deg);   filter: none; opacity: 1; }
    49%   { transform: translate(0) skew(0deg);   filter: none; opacity: 1; }
    49.5% { transform: translate(3px, 0) skew(0deg);     filter: brightness(2) hue-rotate(30deg); opacity: 0.9; }
    50%   { transform: translate(-3px, 0) skew(0deg);    filter: brightness(2) hue-rotate(-30deg); opacity: 0.9; }
    50.5% { transform: translate(0) skew(0deg);   filter: none; opacity: 1; }
    100%  { transform: translate(0) skew(0deg);   filter: none; opacity: 1; }
}

/* Neon pulse for logos */
@keyframes neon-pulse {
    0%, 100% { filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.8)); }
    50%       { filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.8)) drop-shadow(0 0 10px rgba(138,43,226,0.7)); }
}

/* Scanline sweep for menu boxes */
@keyframes scanline-sweep { 0% { top: -40%; } 100% { top: 130%; } }

/* Char button jitter */
@keyframes char-jitter {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    25%       { transform: translate(-2px, 1px) rotate(-1deg); }
    75%       { transform: translate(2px, -1px) rotate(1deg); }
}

/* Cursor blink */
@keyframes blinker { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Logo idle float */
@keyframes logo-idle-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

/* Subtitle border pulse */
@keyframes subtitle-border-pulse {
    0%, 100% { border-color: #fff; }
    50%       { border-color: var(--neon-cyan); }
}

/* Mitsuki warning pulse */
@keyframes mitsuki-warn-pulse {
    0%, 100% { filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.8)); }
    50%       { filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.8)) drop-shadow(0 0 12px rgba(255,0,68,0.7)); }
}

/* Modal pop-in */
@keyframes popIn {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Animation utility classes */
.animate-in { opacity: 0; transform: translateY(40px); }
body.page-loaded .animate-in {
    animation: fadeUpReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.7s; }
.delay-6 { animation-delay: 0.85s; }
.delay-7 { animation-delay: 1.0s; }

.glitch-effect { animation: glitch-anim 3s infinite; position: relative; }

/* =========================================
   VISUAL REFRESH 2026 - Shared motion layer
   ========================================= */

@keyframes cg-card-scan {
    0% { transform: translateX(-135%); }
    55% { transform: translateX(-135%); }
    100% { transform: translateX(135%); }
}

@keyframes cg-soft-pop {
    0% { opacity: 0; transform: translateY(24px) scale(0.97); filter: brightness(1.8) blur(2px); }
    60% { opacity: 1; transform: translateY(-3px) scale(1.01); filter: brightness(1.08) blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@keyframes cg-panel-boot {
    0% { opacity: 0; transform: scale(0.92); filter: contrast(1.8) hue-rotate(18deg); }
    40% { opacity: 0.7; transform: scale(1.015); filter: brightness(1.5); }
    100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes cg-neon-border {
    0%, 100% { box-shadow: 6px 6px 0 rgba(0,0,0,0.82), 0 0 10px rgba(0,255,255,0.18); }
    50% { box-shadow: 6px 6px 0 rgba(0,0,0,0.82), 0 0 20px rgba(255,105,180,0.34), inset 0 0 14px rgba(0,255,255,0.08); }
}

@keyframes cg-warning-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes fadeUpReveal {
    0% { opacity: 0; transform: translateY(34px) scale(0.98); filter: brightness(1.7) blur(2px); }
    45% { opacity: 0.82; filter: brightness(1.25) blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@keyframes start-crt-power {
    0% { opacity: 1; transform: scaleY(0.01) scaleX(0); filter: brightness(4); }
    16% { opacity: 1; transform: scaleY(0.015) scaleX(1); }
    34% { opacity: 0.95; transform: scaleY(1) scaleX(1); }
    58% { opacity: 0.22; transform: scaleY(1) scaleX(1); }
    100% { opacity: 0; transform: scaleY(1) scaleX(1); visibility: hidden; }
}

@keyframes start-boot-hide {
    0%, 72% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes start-logo-glow {
    0% { opacity: 0; transform: scale(0.92); filter: brightness(3) blur(4px); }
    40% { opacity: 1; transform: scale(1.04); filter: brightness(1.7) blur(0); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes start-os-appear {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes start-title-enter {
    0% { opacity: 0; transform: scale(1.02); filter: contrast(2) hue-rotate(24deg); }
    60% { opacity: 1; transform: scale(1); filter: brightness(1.35); }
    100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes start-title-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.015); }
}

@keyframes start-press-blink {
    0%, 52% { opacity: 1; }
    53%, 100% { opacity: 0.58; }
}

@keyframes start-akane-run {
    0%, 24.99% { background-image: url('../assets/start-window/akane-run-1.png'); }
    25%, 49.99% { background-image: url('../assets/start-window/akane-run-2.png'); }
    50%, 74.99% { background-image: url('../assets/start-window/akane-run-3.png'); }
    75%, 100% { background-image: url('../assets/start-window/akane-run-4.png'); }
}

@keyframes start-akane-bob {
    0%, 100% { margin-bottom: 0; }
    50% { margin-bottom: 4px; }
}

@keyframes start-panel-shine {
    0% { transform: translateX(-120%); opacity: 0; }
    28% { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

@keyframes start-terminal-line {
    0% { opacity: 0; transform: translateX(-8px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes start-boot-progress {
    0% { transform: scaleX(0.08); }
    100% { transform: scaleX(1); }
}

@keyframes start-monitor-idle {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.08) saturate(1.08); }
}

@keyframes start-glass-sweep {
    0%, 62% { transform: skewX(-12deg) translateX(-140%); opacity: 0; }
    72% { opacity: 0.82; }
    100% { transform: skewX(-12deg) translateX(330%); opacity: 0; }
}

@keyframes start-widget-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, -4px); }
}

@keyframes start-signal-bars {
    0% { transform: scaleY(0.42); opacity: 0.48; }
    100% { transform: scaleY(1); opacity: 1; }
}

@keyframes start-logo-glitch {
    0%, 92%, 100% { transform: translate(0, 0); }
    93% { transform: translate(-2px, 1px); }
    94% { transform: translate(2px, -1px); }
    95% { transform: translate(0, 0); }
}

@keyframes start-button-aura {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(0,255,255,0)); }
    50% { filter: drop-shadow(0 0 13px rgba(0,255,255,0.62)); }
}

@keyframes start-button-scan {
    0%, 42% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

/* Garage Mixer // trazos de ecualizador retro */
.mixer-eq {
    height: 58px;
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    gap: 2px;
    padding: 5px 7px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.68);
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--mixer-accent) 16%, transparent);
}

.mixer-eq-line {
    --eq-low: 0.18;
    --eq-mid: 0.74;
    --eq-high: 0.42;
    width: 100%;
    height: 2px;
    display: block;
    align-self: center;
    background: var(--mixer-accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--mixer-accent) 72%, transparent);
    opacity: 0.42;
    transform: scaleX(var(--eq-low));
    transform-origin: left center;
}

.mixer-eq-line:nth-child(even) {
    transform-origin: right center;
}

.mixer-eq.is-playing .mixer-eq-line,
.mixer-visualizer.is-playing .mixer-eq-line {
    animation-name: mixerEqTrace;
    animation-duration: 0.56s;
    animation-timing-function: steps(5, end);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.mixer-eq-line:nth-child(2) {
    --eq-low: 0.34;
    --eq-mid: 0.92;
    --eq-high: 0.58;
    animation-duration: 0.43s !important;
    animation-delay: -0.21s;
}

.mixer-eq-line:nth-child(3) {
    --eq-low: 0.12;
    --eq-mid: 0.62;
    --eq-high: 0.88;
    animation-duration: 0.68s !important;
    animation-delay: -0.37s;
}

.mixer-eq-line:nth-child(4) {
    --eq-low: 0.48;
    --eq-mid: 0.78;
    --eq-high: 0.25;
    animation-duration: 0.51s !important;
    animation-delay: -0.12s;
}

.mixer-eq-line:nth-child(5) { --eq-low: 0.22; --eq-mid: 0.98; --eq-high: 0.67; animation-duration: 0.74s !important; animation-delay: -0.46s; }
.mixer-eq-line:nth-child(6) { --eq-low: 0.56; --eq-mid: 0.81; --eq-high: 0.31; animation-duration: 0.47s !important; animation-delay: -0.28s; }
.mixer-eq-line:nth-child(7) { --eq-low: 0.29; --eq-mid: 0.69; --eq-high: 0.94; animation-duration: 0.63s !important; animation-delay: -0.52s; }
.mixer-eq-line:nth-child(8) { --eq-low: 0.43; --eq-mid: 0.87; --eq-high: 0.53; animation-duration: 0.39s !important; animation-delay: -0.17s; }
.mixer-eq-line:nth-child(9) { --eq-low: 0.16; --eq-mid: 0.57; --eq-high: 0.79; animation-duration: 0.59s !important; animation-delay: -0.33s; }
.mixer-eq-line:nth-child(10) { --eq-low: 0.51; --eq-mid: 0.95; --eq-high: 0.36; animation-duration: 0.70s !important; animation-delay: -0.41s; }

@keyframes mixerEqTrace {
    0% { opacity: 0.48; transform: scaleX(var(--eq-low)); }
    52% { opacity: 1; transform: scaleX(var(--eq-mid)); }
    100% { opacity: 0.76; transform: scaleX(var(--eq-high)); }
}

@media (prefers-reduced-motion: reduce) {
    .start-boot-window::after,
    .start-title-content,
    .start-title-content::after,
    .start-widget,
    .start-widget-signal b,
    .start-series-logo,
    .press-start-btn,
    .press-start-btn::after,
    .start-akane-runner {
        animation: none !important;
    }

    .mixer-eq.is-playing .mixer-eq-line,
    .mixer-visualizer.is-playing .mixer-eq-line {
        animation: none;
        opacity: 0.8;
        transform: scaleX(var(--eq-high));
    }
}

@keyframes fadeUpRevealMobile {
    0% { opacity: 0; transform: translateY(28px) scale(0.985); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.005); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    body.page-loaded .animate-in {
        animation-name: fadeUpRevealMobile;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.16);
    }

    .start-title-content,
    .start-monitor-idle {
        animation: none !important;
        filter: none !important;
    }

    .start-series-logo {
        animation: start-title-pulse 3.1s ease-in-out infinite !important;
    }

    .main-logo {
        animation: logo-idle-float 6s ease-in-out infinite !important;
    }

    .press-start-btn {
        animation: start-press-blink 1.25s steps(2, end) infinite !important;
        filter: none !important;
    }

    .press-start-btn::after,
    .start-title-content::after {
        animation-duration: 5.6s !important;
    }

    .mitsuki-trigger-btn {
        animation: none !important;
    }

    .glitch-effect {
        animation-duration: 4.8s;
    }

    .menu-box::after {
        animation-duration: 10s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .start-title-content,
    .start-title-content::after,
    .start-series-logo,
    .main-logo,
    .press-start-btn,
    .press-start-btn::after,
    .start-akane-runner {
        animation: none !important;
    }
}