/* ==========================================
   ULTRA PREMIUM ANIMATIONS & KEYFRAMES
   One Çiğ Köfte - Cinematic Motion Design
   ========================================== */

/* ==========================================
   FADE ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-70px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(70px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

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

/* ==========================================
   SCALE ANIMATIONS
   ========================================== */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleInBounce {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-5deg);
    }
    50% {
        transform: scale(1.06) rotate(1deg);
    }
    70% {
        transform: scale(0.96) rotate(-0.5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes scaleInElastic {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    40% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(0.9);
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================
   FLOAT ANIMATIONS
   ========================================== */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-18px);
    }
}

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 0.4;
        transform: translateY(90vh) rotate(30deg) scale(1);
    }
    50% {
        opacity: 0.2;
    }
    95% {
        opacity: 0.15;
    }
    100% {
        transform: translateY(-10vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes floatDiagonal {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10px, -15px) rotate(2deg);
    }
    50% {
        transform: translate(-5px, -25px) rotate(-1deg);
    }
    75% {
        transform: translate(8px, -12px) rotate(1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* ==========================================
   SHIMMER & GLOW EFFECTS
   ========================================== */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(200,16,46,0.15), 0 0 60px rgba(200,16,46,0.05);
    }
    50% {
        box-shadow: 0 0 40px rgba(200,16,46,0.25), 0 0 100px rgba(200,16,46,0.1);
    }
}

@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(200,16,46,0.2);
    }
    50% {
        border-color: rgba(200,16,46,0.5);
    }
}

/* ==========================================
   SLIDE ANIMATIONS
   ========================================== */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================
   PULSE ANIMATIONS
   ========================================== */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(45, 139, 60, 0.4);
    }
    50% {
        box-shadow: 0 0 0 18px rgba(45, 139, 60, 0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 25px rgba(200, 16, 46, 0.2);
    }
    50% {
        box-shadow: 0 0 50px rgba(200, 16, 46, 0.5);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================
   ROTATION & SPIN
   ========================================== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes spinSlow {
    to { transform: rotate(360deg); }
}

/* ==========================================
   BOUNCE
   ========================================== */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -25px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -12px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    80% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================
   WIGGLE & SHAKE
   ========================================== */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-4deg); }
    30% { transform: rotate(4deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
}

@keyframes headShake {
    0% { transform: translateX(0); }
    6.5% { transform: translateX(-6px) rotateY(-9deg); }
    18.5% { transform: translateX(5px) rotateY(7deg); }
    31.5% { transform: translateX(-3px) rotateY(-5deg); }
    43.5% { transform: translateX(2px) rotateY(3deg); }
    50% { transform: translateX(0); }
}

/* ==========================================
   TEXT REVEAL
   ========================================== */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCaret {
    from, to { border-color: transparent; }
    50% { border-color: var(--red); }
}

/* ==========================================
   GRADIENT & COLOR SHIFTS
   ========================================== */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes colorCycle {
    0%, 100% { color: var(--red); }
    50% { color: var(--green); }
}

/* ==========================================
   LINE & BORDER ANIMATIONS
   ========================================== */
@keyframes drawLine {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes borderDraw {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

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

/* ==========================================
   MORPH
   ========================================== */
@keyframes morphBlob {
    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% / 30% 50% 70% 50%; }
    75% { border-radius: 60% 40% 60% 30% / 70% 40% 50% 60%; }
}

/* ==========================================
   REVEAL CLASSES (Intersection Observer)
   Ultra Premium with 3D transforms
   ========================================== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.reveal-rotate {
    opacity: 0;
    transform: translateY(40px) rotate(3deg);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-rotate.active {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* Delay utilities - Smooth cascade */
.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }
.delay-6 { transition-delay: 0.48s !important; }
.delay-7 { transition-delay: 0.56s !important; }
.delay-8 { transition-delay: 0.64s !important; }

/* ==========================================
   HERO SPECIFIC ANIMATIONS - CINEMATIC
   ========================================== */
.hero-content .hero-badge {
    animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    opacity: 0;
}

.hero-content h1 {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
    opacity: 0;
}

.hero-content .hero-subtitle {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
    opacity: 0;
}

.hero-content .hero-divider {
    animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
    opacity: 0;
}

.hero-content .hero-description {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
    opacity: 0;
}

.hero-content .hero-buttons {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
    opacity: 0;
}

/* Green shimmer text */
.shimmer-text {
    background: linear-gradient(90deg, var(--green), var(--white), var(--green));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* ==========================================
   HOVER EFFECTS - PREMIUM
   ========================================== */
.hover-zoom {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-zoom:hover {
    transform: scale(1.06);
}

.hover-glow {
    transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-glow:hover {
    box-shadow: var(--shadow-green);
}

.hover-lift {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.hover-3d {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.hover-3d:hover {
    transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) translateY(-5px);
}

/* ==========================================
   COUNTER ANIMATION
   ========================================== */
.counter-animated {
    display: inline-block;
    transition: all 0.3s ease;
}

/* ==========================================
   STAGGER ANIMATION FOR GRID ITEMS
   ========================================== */
.stagger-item {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-item.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ==========================================
   PAGE TRANSITIONS
   ========================================== */
.page-transition-enter {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================
   PARALLAX
   ========================================== */
.parallax-bg {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ==========================================
   CURSOR GLOW (for hero)
   ========================================== */
.cursor-glow {
    position: fixed;
    top: -200px;
    left: -200px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(200,16,46,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform;
}

/* ==========================================
   SMOOTH NUMBER COUNT
   ========================================== */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   CARD SHINE EFFECT
   ========================================== */
.card-shine {
    position: relative;
    overflow: hidden;
}

.card-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        transparent 40%,
        rgba(255,255,255,0.03) 45%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 55%,
        transparent 60%
    );
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.card-shine:hover::after {
    transform: rotate(30deg) translateX(100%);
}

/* ==========================================
   REDUCED MOTION - Accessibility
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-particles,
    .cursor-glow,
    .parallax-bg {
        display: none !important;
    }

    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-rotate {
        opacity: 1 !important;
        transform: none !important;
    }

    .stagger-item {
        opacity: 1 !important;
        transform: none !important;
    }
}