/* ═══════════════════════════════════════════════════════════════
   KBK Impact — Animation Library
   "Brutal Elegance" — Premium Fight Club Aesthetic
   ═══════════════════════════════════════════════════════════════ */

/* ─── Animation Tokens ─────────────────────────────────────── */
:root {
    --anim-duration: 600ms;
    --anim-duration-slow: 1000ms;
    --anim-duration-fast: 300ms;
    --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-easing-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --anim-delay: 0ms;
    --stagger-step: 80ms;
}

/* ─── Keyframes ────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translate3d(0, 40px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes clipRevealUp {
    from { clip-path: inset(100% 0 0 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes clipRevealLeft {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideFromLeft {
    from { opacity: 0; transform: translate3d(-60px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideFromRight {
    from { opacity: 0; transform: translate3d(60px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes heroEntrance {
    from { opacity: 0; transform: translate3d(0, 60px, 0) scale(0.95); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes grainDrift {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 0.5%); }
    30% { transform: translate(-0.5%, 1%); }
    40% { transform: translate(0.5%, -0.5%); }
    50% { transform: translate(-1%, 0.5%); }
    60% { transform: translate(1%, -1%); }
    70% { transform: translate(-0.5%, -0.5%); }
    80% { transform: translate(0.5%, 1%); }
    90% { transform: translate(1%, -0.5%); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 var(--acc-glow); }
    50% { box-shadow: 0 0 20px 5px var(--acc-glow); }
}

@keyframes drawLine {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Utility Animation Classes ────────────────────────────── */
/* All start invisible, become visible when .is-visible is added */

[data-anim] {
    opacity: 0;
    will-change: transform, opacity;
}

[data-anim].is-visible {
    opacity: 1;
}

/* Fade Up */
[data-anim="fade-up"] {
    transform: translate3d(0, 40px, 0);
    transition: opacity var(--anim-duration) var(--anim-easing) var(--anim-delay),
                transform var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="fade-up"].is-visible {
    transform: translate3d(0, 0, 0);
}

/* Fade In */
[data-anim="fade-in"] {
    transition: opacity var(--anim-duration) var(--anim-easing) var(--anim-delay);
}

/* Clip Reveal Up */
[data-anim="clip-up"] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--anim-duration-slow) var(--anim-easing) var(--anim-delay),
                opacity var(--anim-duration-slow) var(--anim-easing) var(--anim-delay);
}
[data-anim="clip-up"].is-visible {
    clip-path: inset(0 0 0 0);
}

/* Clip Reveal Left */
[data-anim="clip-left"] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--anim-duration-slow) var(--anim-easing) var(--anim-delay),
                opacity var(--anim-duration-slow) var(--anim-easing) var(--anim-delay);
}
[data-anim="clip-left"].is-visible {
    clip-path: inset(0 0 0 0);
}

/* Scale In */
[data-anim="scale-in"] {
    transform: scale(0.85);
    transition: opacity var(--anim-duration) var(--anim-easing) var(--anim-delay),
                transform var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="scale-in"].is-visible {
    transform: scale(1);
}

/* Slide from Left */
[data-anim="slide-left"] {
    transform: translate3d(-60px, 0, 0);
    transition: opacity var(--anim-duration) var(--anim-easing) var(--anim-delay),
                transform var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="slide-left"].is-visible {
    transform: translate3d(0, 0, 0);
}

/* Slide from Right */
[data-anim="slide-right"] {
    transform: translate3d(60px, 0, 0);
    transition: opacity var(--anim-duration) var(--anim-easing) var(--anim-delay),
                transform var(--anim-duration) var(--anim-easing) var(--anim-delay);
}
[data-anim="slide-right"].is-visible {
    transform: translate3d(0, 0, 0);
}

/* ─── Hero Entrance (auto-play, no observer) ───────────────── */
.hero-title-enter {
    animation: heroEntrance 1s var(--anim-easing) 0.2s both;
}
.hero-subtitle-enter {
    animation: fadeUp 0.8s var(--anim-easing) 0.5s both;
}
.hero-cta-enter {
    animation: fadeUp 0.8s var(--anim-easing) 0.7s both;
}
.hero-label-enter {
    animation: clipRevealLeft 0.8s var(--anim-easing) 0.1s both;
}

/* ─── Grain Texture Overlay ────────────────────────────────── */
.grain-overlay {
    position: relative;
}
.grain-overlay::after {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    animation: grainDrift 8s steps(10) infinite;
    pointer-events: none;
    z-index: 1;
    opacity: var(--grain-opacity, 0.03);
}

/* ─── Gradient Separator ───────────────────────────────────── */
.gradient-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--acc), transparent);
    border: none;
    opacity: 0.4;
    margin: 0;
}

/* ─── Enhanced Button Interactions ─────────────────────────── */
.btn-pun {
    transition: all 0.3s var(--anim-easing) !important;
    position: relative;
    overflow: hidden;
}
.btn-pun:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px var(--acc-glow, rgba(240,90,0,0.2));
}

.btn-obrub {
    transition: all 0.3s var(--anim-easing) !important;
}
.btn-obrub:hover {
    border-color: var(--acc);
    transform: translateX(2px);
}

/* ─── Card Hover Enhancements ──────────────────────────────── */
.card-hover {
    transition: transform 0.4s var(--anim-easing), box-shadow 0.4s var(--anim-easing);
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 0 1px var(--line-hover, #2a2a2a);
}

/* ─── Image Hover (grayscale → color) ──────────────────────── */
.img-reveal {
    filter: grayscale(100%);
    transition: filter 0.5s var(--anim-easing), transform 0.5s var(--anim-easing);
}
.img-reveal:hover {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* ─── Counter Animation ────────────────────────────────────── */
[data-counter] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--anim-easing), transform 0.5s var(--anim-easing);
}
[data-counter].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Parallax Layer ───────────────────────────────────────── */
.parallax-layer {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* ─── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    .grain-overlay::after {
        animation: none;
    }
}