/**
 * individuellONLINE — Premium Scroll Animation Styles
 */

/* ═══════════════════════════════════════════════════════════════ */
/* SMOOTH SCROLL BODY */
/* ═══════════════════════════════════════════════════════════════ */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SCROLL PROGRESS BAR */
/* ═══════════════════════════════════════════════════════════════ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #d91277, #ff1493, #7B2FFF);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 10000;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════ */
/* PAGE LOADER */
/* ═══════════════════════════════════════════════════════════════ */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.page-loader .loader-logo {
    width: 120px;
    animation: pulse-loader 1s ease-in-out infinite;
}

@keyframes pulse-loader {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

body:not(.loaded) {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════ */
/* TEXT SPLIT ANIMATIONS */
/* ═══════════════════════════════════════════════════════════════ */
.word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.word {
    display: inline-block;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.char {
    display: inline-block;
    will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════════ */
/* IMAGE REVEAL */
/* ═══════════════════════════════════════════════════════════════ */
.img-reveal-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.img-reveal-wrapper img {
    display: block;
    will-change: transform;
}

.img-reveal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #d91277;
    transform-origin: right center;
    will-change: transform;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED CARD HOVER STATES */
/* ═══════════════════════════════════════════════════════════════ */
.bento-card,
.ai-feature,
.team-card,
.process-step {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SECTION TRANSITIONS */
/* ═══════════════════════════════════════════════════════════════ */
section {
    will-change: background-position;
}

.section-label,
.section-title,
.section-subtitle {
    will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════════ */
/* MAGNETIC BUTTON ENHANCEMENT */
/* ═══════════════════════════════════════════════════════════════ */
.btn-magnetic {
    will-change: transform;
    transition: box-shadow 0.3s ease;
}

.btn-magnetic:hover {
    box-shadow: 0 20px 50px rgba(217, 18, 119, 0.5);
}

/* ═══════════════════════════════════════════════════════════════ */
/* NAV ANIMATION */
/* ═══════════════════════════════════════════════════════════════ */
nav {
    will-change: transform;
    transition: background 0.3s ease;
}

nav.scrolled {
    background: rgba(17, 17, 17, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════ */
/* FUNKO STRIP ENHANCEMENTS */
/* ═══════════════════════════════════════════════════════════════ */
.funko-item {
    will-change: transform, opacity;
}

.funko-item:hover img {
    animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) scale(1.1); }
    25% { transform: rotate(-5deg) scale(1.1); }
    75% { transform: rotate(5deg) scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════════ */
/* FAQ ENHANCEMENTS */
/* ═══════════════════════════════════════════════════════════════ */
.faq-item {
    will-change: transform, opacity;
}

.faq-answer {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* STATS COUNTER ANIMATION */
/* ═══════════════════════════════════════════════════════════════ */
.stat-number {
    font-variant-numeric: tabular-nums;
    will-change: contents;
}

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

/* ═══════════════════════════════════════════════════════════════ */
/* TICKER ENHANCEMENTS */
/* ═══════════════════════════════════════════════════════════════ */
.ticker-inner {
    will-change: transform;
    transition: animation-duration 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════ */
/* CTA SECTION */
/* ═══════════════════════════════════════════════════════════════ */
.cta-section img,
.cta-section h2 {
    will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════════ */
/* REVEAL CLASSES FOR MANUAL CONTROL */
/* ═══════════════════════════════════════════════════════════════ */
.reveal-fade {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
}

.reveal-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
}

.reveal-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
}

.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* STAGGER DELAYS */
/* ═══════════════════════════════════════════════════════════════ */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ═══════════════════════════════════════════════════════════════ */
/* DISABLE ANIMATIONS ON 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;
    }
    
    .scroll-progress {
        display: none;
    }
}