/* ============================================================================
   ZENIKIT — Effects CSS
   Micro-animations, hover effects, scroll reveal, gradient shift,
   particle backgrounds, and premium visual utilities.
   ============================================================================ */

/* ─── Gradient Animation ─── */
@keyframes zk-gradient-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 100% 0%;
    }

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

    75% {
        background-position: 0% 100%;
    }
}

/* ─── Glow Pulse ─── */
@keyframes zk-glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 20px var(--zk-brand-500);
    }

    50% {
        box-shadow: 0 0 40px var(--zk-brand-400), 0 0 60px var(--zk-brand-600);
    }
}

/* ─── Ripple ─── */
@keyframes zk-ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ─── Float ─── */
@keyframes zk-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ─── Bounce In ─── */
@keyframes zk-bounce-in {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ─── Slide Up ─── */
@keyframes zk-slide-in-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

/* ─── Slide Down ─── */
@keyframes zk-slide-in-down {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

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

/* ─── Scale In ─── */
@keyframes zk-scale-in {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

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

/* ─── Rotate ─── */
@keyframes zk-rotate {
    from {
        transform: rotate(0deg);
    }

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

/* ─── Wave ─── */
@keyframes zk-wave {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

/* ─── Staggered Fade ─── */
@keyframes zk-stagger-fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ============================================================================
   ANIMATION UTILITIES
   ============================================================================ */

/* Entrance Animations */
.zk-animate-fade-in {
    animation: zk-fade-in 400ms ease forwards;
}

.zk-animate-slide-up {
    animation: zk-slide-in-up 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.zk-animate-slide-down {
    animation: zk-slide-in-down 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.zk-animate-bounce-in {
    animation: zk-bounce-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.zk-animate-scale-in {
    animation: zk-scale-in 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Continuous Animations */
.zk-animate-float {
    animation: zk-float 3s ease-in-out infinite;
}

.zk-animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.zk-animate-wave {
    animation: zk-wave 1s ease-in-out infinite;
}

.zk-animate-rotate {
    animation: zk-rotate 1s linear infinite;
}

.zk-animate-shimmer {
    animation: zk-shimmer 1.5s ease-in-out infinite;
}

/* Stagger delays (for child elements) */
.zk-stagger>*:nth-child(1) {
    animation-delay: 0ms;
}

.zk-stagger>*:nth-child(2) {
    animation-delay: 60ms;
}

.zk-stagger>*:nth-child(3) {
    animation-delay: 120ms;
}

.zk-stagger>*:nth-child(4) {
    animation-delay: 180ms;
}

.zk-stagger>*:nth-child(5) {
    animation-delay: 240ms;
}

.zk-stagger>*:nth-child(6) {
    animation-delay: 300ms;
}

.zk-stagger>*:nth-child(7) {
    animation-delay: 360ms;
}

.zk-stagger>*:nth-child(8) {
    animation-delay: 420ms;
}

.zk-stagger>*:nth-child(n+9) {
    animation-delay: 480ms;
}

/* Scroll Reveal */
.zk-scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-scroll-reveal.zk-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================================
   HOVER EFFECTS
   ============================================================================ */

.zk-hover-lift {
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--zk-shadow-lg);
}

.zk-hover-glow {
    transition: box-shadow 300ms ease;
}

.zk-hover-glow:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.zk-hover-scale {
    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-hover-scale:hover {
    transform: scale(1.03);
}

.zk-hover-bright:hover {
    filter: brightness(1.08);
}

/* ============================================================================
   BACKGROUND PATTERNS
   ============================================================================ */

.zk-bg-grid {
    background-image: linear-gradient(var(--zk-gray-100) 1px, transparent 1px),
        linear-gradient(90deg, var(--zk-gray-100) 1px, transparent 1px);
    background-size: 40px 40px;
}

[data-theme="dark"] .zk-bg-grid {
    background-image: linear-gradient(var(--zk-gray-800) 1px, transparent 1px),
        linear-gradient(90deg, var(--zk-gray-800) 1px, transparent 1px);
}

.zk-bg-dots {
    background-image: radial-gradient(circle, var(--zk-gray-300) 1px, transparent 1px);
    background-size: 20px 20px;
}

[data-theme="dark"] .zk-bg-dots {
    background-image: radial-gradient(circle, var(--zk-gray-700) 1px, transparent 1px);
}

.zk-bg-gradient-brand {
    background: linear-gradient(135deg, var(--zk-brand-500), var(--zk-brand-700));
}

.zk-bg-gradient-dark {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%);
}

.zk-bg-gradient-mesh {
    background:
        radial-gradient(at 0% 0%, hsla(245, 82%, 67%, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(280, 70%, 60%, 0.1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(340, 75%, 60%, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(200, 80%, 55%, 0.1) 0px, transparent 50%);
}

/* ============================================================================
   BADCAVE-INSPIRED EFFECTS (Phase 12)
   ============================================================================ */

/* ─── Glitch Text ─── */
@keyframes zk-glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes zk-glitch-color-1 {
    0% {
        clip-path: inset(20% 0 60% 0);
    }

    20% {
        clip-path: inset(40% 0 30% 0);
    }

    40% {
        clip-path: inset(80% 0 5% 0);
    }

    60% {
        clip-path: inset(10% 0 70% 0);
    }

    80% {
        clip-path: inset(50% 0 20% 0);
    }

    100% {
        clip-path: inset(20% 0 60% 0);
    }
}

@keyframes zk-glitch-color-2 {
    0% {
        clip-path: inset(60% 0 10% 0);
    }

    20% {
        clip-path: inset(15% 0 65% 0);
    }

    40% {
        clip-path: inset(45% 0 25% 0);
    }

    60% {
        clip-path: inset(75% 0 5% 0);
    }

    80% {
        clip-path: inset(25% 0 55% 0);
    }

    100% {
        clip-path: inset(60% 0 10% 0);
    }
}

.zk-glitch {
    position: relative;
    display: inline-block;
}

.zk-glitch::before,
.zk-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.zk-glitch::before {
    color: #ff00ff;
    animation: zk-glitch-color-1 3s infinite linear alternate-reverse;
    left: 2px;
    text-shadow: -2px 0 #ff00ff;
}

.zk-glitch::after {
    color: #00ffff;
    animation: zk-glitch-color-2 2s infinite linear alternate-reverse;
    left: -2px;
    text-shadow: 2px 0 #00ffff;
}

/* ─── Neon Glow Border ─── */
@keyframes zk-neon-border {

    0%,
    100% {
        border-color: var(--zk-brand-500);
        box-shadow: 0 0 5px var(--zk-brand-500), 0 0 15px var(--zk-brand-600), inset 0 0 5px rgba(99, 102, 241, 0.1);
    }

    50% {
        border-color: var(--zk-brand-400);
        box-shadow: 0 0 10px var(--zk-brand-400), 0 0 30px var(--zk-brand-500), inset 0 0 10px rgba(99, 102, 241, 0.15);
    }
}

.zk-neon-glow {
    border: 1px solid var(--zk-brand-500);
    animation: zk-neon-border 2s ease-in-out infinite;
}

/* ─── Typewriter ─── */
@keyframes zk-typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes zk-blink-cursor {

    0%,
    100% {
        border-color: transparent;
    }

    50% {
        border-color: var(--zk-fg-primary);
    }
}

.zk-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--zk-fg-primary);
    animation: zk-typewriter 3s steps(40, end), zk-blink-cursor 0.75s step-end infinite;
    width: fit-content;
}

/* ─── Glass Card (BadCave Glassmorphism) ─── */
.zk-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .zk-glass {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Parallax Layers ─── */
.zk-parallax-container {
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}

.zk-parallax-bg {
    transform: translateZ(-2px) scale(3);
    position: absolute;
    inset: 0;
    z-index: -1;
}

.zk-parallax-fg {
    transform: translateZ(0);
    position: relative;
    z-index: 1;
}

/* ─── Morphing Blob ─── */
@keyframes zk-morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    50% {
        border-radius: 50% 60% 30% 60% / 40% 70% 50% 60%;
    }

    75% {
        border-radius: 60% 30% 60% 40% / 70% 40% 60% 30%;
    }
}

.zk-blob {
    width: 20rem;
    height: 20rem;
    background: linear-gradient(135deg, var(--zk-brand-400), var(--zk-brand-600));
    animation: zk-morph 8s ease-in-out infinite;
    opacity: 0.3;
    filter: blur(40px);
    position: absolute;
}

/* ─── Theme Mode System (BadCave Monsta/Fire inspired) ─── */
[data-mode="zen"] {
    --zk-mode-accent: var(--zk-brand-500);
    --zk-mode-glow: rgba(99, 102, 241, 0.3);
}

[data-mode="fire"] {
    --zk-mode-accent: #ff4d00;
    --zk-mode-glow: rgba(255, 77, 0, 0.3);
}

[data-mode="neon"] {
    --zk-mode-accent: #d9ff00;
    --zk-mode-glow: rgba(217, 255, 0, 0.3);
}

[data-mode="cyber"] {
    --zk-mode-accent: #00ffff;
    --zk-mode-glow: rgba(0, 255, 255, 0.3);
}

.zk-mode-accent {
    color: var(--zk-mode-accent, var(--zk-brand-500));
}

.zk-mode-glow {
    box-shadow: 0 0 20px var(--zk-mode-glow, rgba(99, 102, 241, 0.3));
}

.zk-mode-border {
    border-color: var(--zk-mode-accent, var(--zk-brand-500));
}

/* ============================================================================
   REDUCE MOTION
   ============================================================================ */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .zk-scroll-reveal {
        opacity: 1;
        transform: none;
    }

    .zk-glitch::before,
    .zk-glitch::after {
        animation: none;
        content: none;
    }

    .zk-typewriter {
        animation: none;
        width: auto;
        border-right: none;
    }
}

/* ============================================================================
   PHASE 14 — ADVANCED EFFECTS
   ============================================================================ */

/* ─── Holographic Shimmer ─── */
.zk-hologram {
    position: relative;
    overflow: hidden;
}

.zk-hologram::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 20%,
            rgba(255, 100, 200, 0.08) 30%,
            rgba(100, 200, 255, 0.12) 40%,
            rgba(200, 255, 100, 0.08) 50%,
            transparent 60%);
    background-size: 200% 200%;
    background-position: var(--holo-x, 50%) var(--holo-y, 50%);
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: inherit;
    transition: background-position 80ms ease-out;
}

/* ─── 3D Tilt Utility ─── */
.zk-tilt-3d {
    transform-style: preserve-3d;
    transition: transform 80ms ease-out;
    will-change: transform;
}

/* ─── Magnetic Hover Utility ─── */
.zk-magnetic {
    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* ─── Spring Transitions ─── */
.zk-spring {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-spring-fast {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-spring-slow {
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-spring-bounce {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ─── Depth Layers (Z-axis parallax) ─── */
.zk-depth-1 {
    transform: translateZ(0);
}

.zk-depth-2 {
    transform: translateZ(20px);
}

.zk-depth-3 {
    transform: translateZ(40px);
}

.zk-depth-4 {
    transform: translateZ(80px);
}

[data-parallax] {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* ─── Golden Ratio Grid ─── */
.zk-golden-grid {
    display: grid;
    gap: var(--zk-space-4);
    grid-template-columns: 1.618fr 1fr;
}

.zk-golden-grid-reverse {
    display: grid;
    gap: var(--zk-space-4);
    grid-template-columns: 1fr 1.618fr;
}

.zk-golden-split {
    display: grid;
    gap: var(--zk-space-4);
    grid-template-columns: 1.618fr 1fr;
    grid-template-rows: 1fr 1.618fr;
}

/* ─── Fibonacci Breakpoints ─── */
@media (min-width: 233px) {
    .zk-fib-xs-show {
        display: block;
    }
}

@media (min-width: 377px) {
    .zk-fib-sm-show {
        display: block;
    }
}

@media (min-width: 610px) {
    .zk-fib-md-show {
        display: block;
    }
}

@media (min-width: 987px) {
    .zk-fib-lg-show {
        display: block;
    }
}

@media (min-width: 1597px) {
    .zk-fib-xl-show {
        display: block;
    }
}

/* ─── Gradient Presets ─── */
.zk-grad-sunset {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.zk-grad-ocean {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.zk-grad-forest {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.zk-grad-fire {
    background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
}

.zk-grad-aurora {
    background: linear-gradient(135deg, #4568dc 0%, #b06ab3 100%);
}

.zk-grad-midnight {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.zk-grad-candy {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.zk-grad-steel {
    background: linear-gradient(135deg, #2c3e50 0%, #bdc3c7 100%);
}

.zk-grad-peach {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.zk-grad-cosmic {
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
}

.zk-grad-mint {
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
}

.zk-grad-lavender {
    background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);
}

.zk-grad-ice {
    background: linear-gradient(135deg, #e6e9f0 0%, #eef1f5 100%);
}

.zk-grad-neon {
    background: linear-gradient(135deg, #08f7fe 0%, #09fba2 50%, #fe53bb 100%);
}

.zk-grad-royal {
    background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
}

.zk-grad-rose {
    background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);
}

.zk-grad-deep {
    background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
}

.zk-grad-electric {
    background: linear-gradient(135deg, #00d2ff 0%, #7b2ff7 100%);
}

.zk-grad-emerald {
    background: linear-gradient(135deg, #0cebeb 0%, #20e3b2 50%, #29ffc6 100%);
}

.zk-grad-brand {
    background: linear-gradient(135deg, var(--zk-brand-500) 0%, var(--zk-brand-700) 100%);
}