/* ============================================
   PakPhantom Website - ALL ANIMATIONS
   ============================================
   Table of Contents:
   1. Keyframe Animations
   2. Page Load Animations
   3. Scroll Animations (AOS)
   4. Hover Animations
   5. Background Animations
   6. Text Animations
   7. Button Animations
   8. Card Animations
   9. Loader Animations
   10. Cursor Animations
   11. Navbar Animations
   12. Hero Animations
   13. Mockup Animations
   14. Particle Animations
   15. Special Effects
============================================ */

/* ============================================
   1. KEYFRAME ANIMATIONS
============================================ */

/* Gradient Shift */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Spin Ring (loader) */
@keyframes spin-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade In */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade Up */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Down */
@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Left */
@keyframes fade-left {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade Right */
@keyframes fade-right {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In */
@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Zoom Out */
@keyframes zoom-out {
    from {
        opacity: 0;
        transform: scale(1.15);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Down (navbar) */
@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Up */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Left */
@keyframes slide-left {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide Right */
@keyframes slide-right {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Rotate In */
@keyframes rotate-in {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Flip In */
@keyframes flip-in-x {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes flip-in-y {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
}

/* Bounce In */
@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Spring */
@keyframes spring {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Pulse */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Pulse Emoji */
@keyframes pulse-emoji {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* Glow Pulse */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0,255,136,0.2); }
    50% { box-shadow: 0 0 30px rgba(0,255,136,0.6), 0 0 60px rgba(0,255,136,0.3); }
}

/* Blink Cursor */
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Dot Blink */
@keyframes dot-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Badge Pulse */
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(0,255,136,0); }
}

/* Float Mockup */
@keyframes float-mockup {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-12px) rotate(0.5deg); }
    66% { transform: translateY(-6px) rotate(-0.5deg); }
}

/* Float Badge */
@keyframes float-badge {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Sparkle Float */
@keyframes sparkle-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(-15px) rotate(90deg) scale(1.2);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-8px) rotate(180deg) scale(0.8);
        opacity: 1;
    }
    75% {
        transform: translateY(-20px) rotate(270deg) scale(1.1);
        opacity: 0.5;
    }
}

/* Aurora Float */
@keyframes aurora-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.06;
    }
    25% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.09;
    }
    50% {
        transform: translate(20px, 50px) scale(0.9);
        opacity: 0.05;
    }
    75% {
        transform: translate(-30px, 20px) scale(1.05);
        opacity: 0.08;
    }
}

/* Loader Fill */
@keyframes loader-fill {
    0% { width: 0%; }
    20% { width: 25%; }
    40% { width: 45%; }
    60% { width: 65%; }
    80% { width: 82%; }
    95% { width: 95%; }
    100% { width: 100%; }
}

/* Scroll Wheel */
@keyframes scroll-wheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}

/* Bounce Arrow */
@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* Typing Bounce */
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* Message Appear */
@keyframes message-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Holographic Shift */
@keyframes holographic-shift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Shimmer Sweep */
@keyframes shimmer-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Ripple */
@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* BTT Pulse */
@keyframes btt-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Particle Move */
@keyframes particle-move {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* Shooting Star */
@keyframes shooting-star {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg);
        opacity: 1;
    }
    100% {
        transform: translateX(300px) translateY(300px) rotate(45deg);
        opacity: 0;
    }
}

/* Glitch Effect */
@keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
    20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 3px); }
    40% { clip-path: inset(50% 0 30% 0); transform: translate(3px, -3px); }
    60% { clip-path: inset(10% 0 80% 0); transform: translate(-3px, 0); }
    80% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 3px); }
}

@keyframes glitch-2 {
    0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
    20% { clip-path: inset(60% 0 20% 0); transform: translate(3px, -3px); }
    40% { clip-path: inset(30% 0 50% 0); transform: translate(-3px, 3px); }
    60% { clip-path: inset(80% 0 10% 0); transform: translate(3px, 0); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, -3px); }
}

/* Wave Text */
@keyframes wave-letter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Gradient Border */
@keyframes gradient-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Count Up Number */
@keyframes count-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Card Flip */
@keyframes card-flip {
    0% { transform: perspective(1000px) rotateY(0deg); }
    100% { transform: perspective(1000px) rotateY(180deg); }
}

/* Confetti Fall */
@keyframes confetti-fall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Neon Flicker */
@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 5px var(--primary),
            0 0 10px var(--primary),
            0 0 20px var(--primary),
            0 0 40px var(--primary);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Progress Fill */
@keyframes progress-fill {
    from { width: 0; }
    to { width: var(--fill); }
}

/* Heartbeat */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70% { transform: scale(1); }
}

/* ============================================
   2. PAGE LOAD ANIMATIONS
============================================ */
.page-loaded .hero-content {
    animation: fade-right 0.8s ease 0.3s both;
}

.page-loaded .hero-visual {
    animation: fade-left 0.8s ease 0.5s both;
}

.page-loaded .hero-badge {
    animation: fade-down 0.6s ease 0.2s both;
}

.page-loaded .hero-title {
    animation: fade-up 0.7s ease 0.3s both;
}

.page-loaded .hero-subtitle {
    animation: fade-up 0.7s ease 0.45s both;
}

.page-loaded .hero-ctas {
    animation: fade-up 0.7s ease 0.6s both;
}

.page-loaded .hero-quick-stats {
    animation: fade-up 0.7s ease 0.75s both;
}

/* ============================================
   3. SCROLL ANIMATIONS (AOS-like)
============================================ */

/* Base state - hidden */
[data-aos] {
    transition-property: opacity, transform;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos].aos-init {
    opacity: 0;
}

[data-aos="fade-up"].aos-init {
    opacity: 0;
    transform: translateY(40px);
}

[data-aos="fade-down"].aos-init {
    opacity: 0;
    transform: translateY(-40px);
}

[data-aos="fade-left"].aos-init {
    opacity: 0;
    transform: translateX(40px);
}

[data-aos="fade-right"].aos-init {
    opacity: 0;
    transform: translateX(-40px);
}

[data-aos="zoom-in"].aos-init {
    opacity: 0;
    transform: scale(0.85);
}

[data-aos="zoom-out"].aos-init {
    opacity: 0;
    transform: scale(1.15);
}

[data-aos="flip-up"].aos-init {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}

[data-aos="rotate-in"].aos-init {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
}

/* Animated state - visible */
[data-aos].aos-animated {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger delays */
[data-aos-delay="0"] { transition-delay: 0ms; }
[data-aos-delay="50"] { transition-delay: 50ms; }
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="250"] { transition-delay: 250ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="350"] { transition-delay: 350ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos-delay="450"] { transition-delay: 450ms; }
[data-aos-delay="500"] { transition-delay: 500ms; }
[data-aos-delay="550"] { transition-delay: 550ms; }
[data-aos-delay="600"] { transition-delay: 600ms; }

/* ============================================
   4. HOVER ANIMATIONS
============================================ */

/* Icon Bounce on Hover */
.hover-bounce {
    transition: transform var(--transition-bounce);
}

.hover-bounce:hover {
    transform: scale(1.15) translateY(-4px);
}

/* Icon Spin on Hover */
.hover-spin:hover {
    animation: spin 0.5s ease;
}

/* Glow on Hover */
.hover-glow:hover {
    box-shadow: var(--shadow-primary) !important;
    border-color: var(--border-color-hover) !important;
}

/* Scale on Hover */
.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Lift on Hover */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* Tilt Effect (3D) */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

.tilt-card:hover {
    transform: perspective(1000px) rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg));
}

/* Shimmer on Hover */
.hover-shimmer {
    position: relative;
    overflow: hidden;
}

.hover-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.hover-shimmer:hover::before {
    left: 100%;
}

/* Border Glow on Hover */
.hover-border-glow {
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.hover-border-glow:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

/* ============================================
   5. BACKGROUND ANIMATIONS
============================================ */

/* Animated Grid */
.animated-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 20s linear infinite;
    opacity: 0.5;
}

@keyframes grid-move {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/* Shooting Stars */
.shooting-stars-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.shooting-star-el {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: shooting-star 2s linear infinite;
}

.shooting-star-el::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(to left, white, transparent);
}

/* ============================================
   6. TEXT ANIMATIONS
============================================ */

/* Typewriter */
.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--primary);
    white-space: nowrap;
    animation:
        typing 3.5s steps(40, end),
        blink-cursor 0.75s step-end infinite;
}

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

/* Gradient Text Animation */
.gradient-text-animated {
    background: linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--secondary) 33%,
        var(--primary) 66%,
        var(--secondary) 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s linear infinite;
}

/* Wave Text */
.wave-text span {
    display: inline-block;
    animation: wave-letter 1.5s ease infinite;
}

.wave-text span:nth-child(1) { animation-delay: 0.0s; }
.wave-text span:nth-child(2) { animation-delay: 0.1s; }
.wave-text span:nth-child(3) { animation-delay: 0.2s; }
.wave-text span:nth-child(4) { animation-delay: 0.3s; }
.wave-text span:nth-child(5) { animation-delay: 0.4s; }
.wave-text span:nth-child(6) { animation-delay: 0.5s; }
.wave-text span:nth-child(7) { animation-delay: 0.6s; }
.wave-text span:nth-child(8) { animation-delay: 0.7s; }
.wave-text span:nth-child(9) { animation-delay: 0.8s; }
.wave-text span:nth-child(10) { animation-delay: 0.9s; }

/* Glitch Text */
.glitch-text {
    position: relative;
}

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

.glitch-text:hover::before {
    color: var(--primary);
    animation: glitch-1 0.3s steps(1) infinite;
}

.glitch-text:hover::after {
    color: var(--secondary);
    animation: glitch-2 0.3s steps(1) infinite;
}

/* Highlight Sweep */
.highlight-sweep {
    position: relative;
    display: inline-block;
}

.highlight-sweep::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 35%;
    background: rgba(0, 255, 136, 0.15);
    transition: width 0.4s ease;
    z-index: -1;
    border-radius: 2px;
}

.highlight-sweep:hover::after {
    width: 100%;
}

/* Neon Text */
.neon-text {
    color: var(--primary);
    text-shadow:
        0 0 5px var(--primary),
        0 0 10px var(--primary),
        0 0 20px var(--primary);
    animation: neon-flicker 3s ease infinite;
}

/* ============================================
   7. BUTTON ANIMATIONS
============================================ */

/* Ripple Effect */
.ripple-btn {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    animation: ripple 0.6s ease-out forwards;
    width: 20px;
    height: 20px;
}

/* Magnetic Button */
.magnetic-btn {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Particle Burst on Button */
.btn-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.btn-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
    animation: btn-particle-burst 0.6s ease forwards;
}

@keyframes btn-particle-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

/* Press Effect */
.press-btn:active {
    transform: scale(0.96) translateY(1px) !important;
}

/* Arrow Slide */
.arrow-btn .btn-arrow-icon {
    display: inline-block;
    transition: transform var(--transition-base);
}

.arrow-btn:hover .btn-arrow-icon {
    transform: translateX(6px);
}

/* Success State */
.btn-success {
    background: var(--gradient-primary) !important;
    animation: spring 0.5s ease;
}

.btn-success::after {
    content: '✓';
    margin-left: 0.5rem;
}

/* ============================================
   8. CARD ANIMATIONS
============================================ */

/* Stagger Animation */
.stagger-container > * {
    opacity: 0;
    transform: translateY(20px);
}

.stagger-container.stagger-active > *:nth-child(1) { animation: fade-up 0.5s ease 0.0s forwards; }
.stagger-container.stagger-active > *:nth-child(2) { animation: fade-up 0.5s ease 0.1s forwards; }
.stagger-container.stagger-active > *:nth-child(3) { animation: fade-up 0.5s ease 0.2s forwards; }
.stagger-container.stagger-active > *:nth-child(4) { animation: fade-up 0.5s ease 0.3s forwards; }
.stagger-container.stagger-active > *:nth-child(5) { animation: fade-up 0.5s ease 0.4s forwards; }
.stagger-container.stagger-active > *:nth-child(6) { animation: fade-up 0.5s ease 0.5s forwards; }
.stagger-container.stagger-active > *:nth-child(7) { animation: fade-up 0.5s ease 0.6s forwards; }
.stagger-container.stagger-active > *:nth-child(8) { animation: fade-up 0.5s ease 0.7s forwards; }
.stagger-container.stagger-active > *:nth-child(9) { animation: fade-up 0.5s ease 0.8s forwards; }
.stagger-container.stagger-active > *:nth-child(10) { animation: fade-up 0.5s ease 0.9s forwards; }
.stagger-container.stagger-active > *:nth-child(11) { animation: fade-up 0.5s ease 1.0s forwards; }
.stagger-container.stagger-active > *:nth-child(12) { animation: fade-up 0.5s ease 1.1s forwards; }

/* Flip Card */
.flip-card {
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: inherit;
}

.flip-card-back {
    transform: rotateY(180deg);
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* 3D Tilt Card */
.tilt-3d {
    transform-style: preserve-3d;
    transition: transform 0.15s ease;
    will-change: transform;
}

.tilt-3d .tilt-content {
    transform: translateZ(20px);
}

/* Card Shine Effect */
.card-shine {
    position: relative;
    overflow: hidden;
}

.card-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255,255,255,0.03) 10%,
        transparent 20%
    );
    animation: card-shine-rotate 4s linear infinite;
    pointer-events: none;
}

@keyframes card-shine-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   9. LOADER ANIMATIONS
============================================ */

/* Page Transition */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 9998;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.page-transition-overlay.entering {
    transform: scaleY(1);
    transform-origin: bottom;
}

.page-transition-overlay.leaving {
    transform: scaleY(0);
    transform-origin: top;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-wave 1.5s ease infinite;
    border-radius: var(--border-radius-sm);
}

@keyframes skeleton-wave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 2em;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-card {
    height: 200px;
    border-radius: var(--border-radius-lg);
}

/* ============================================
   10. CURSOR ANIMATIONS
============================================ */

/* Cursor Hover State */
body.cursor-hover .custom-cursor {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid var(--primary);
}

body.cursor-hover .cursor-follower {
    width: 50px;
    height: 50px;
    border-color: rgba(0, 255, 136, 0.3);
}

/* Cursor Click State */
body.cursor-click .custom-cursor {
    width: 8px;
    height: 8px;
    background: var(--primary);
}

body.cursor-click .cursor-follower {
    width: 24px;
    height: 24px;
}

/* Cursor Text State */
body.cursor-text .custom-cursor {
    width: 2px;
    height: 24px;
    border-radius: 1px;
    background: var(--primary);
}

/* ============================================
   11. NAVBAR ANIMATIONS
============================================ */

/* Nav Link Indicator */
.nav-link-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--primary);
    border-radius: var(--border-radius-full);
    transition: left 0.3s ease, width 0.3s ease;
    pointer-events: none;
}

/* Dropdown Fade */
.dropdown-menu {
    animation: none;
}

.nav-dropdown:hover .dropdown-menu {
    animation: fade-down 0.2s ease forwards;
}

/* Mobile Menu Slide */
.mobile-menu {
    animation: none;
}

.mobile-menu.active {
    animation: slide-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================
   12. HERO ANIMATIONS
============================================ */

/* Hero Badge Entrance */
.hero-badge {
    animation: fade-down 0.6s ease 0.5s both;
}

/* Hero Title Lines */
.title-line-1 {
    animation: fade-right 0.6s ease 0.6s both;
}

.title-line-2 {
    animation: fade-right 0.6s ease 0.75s both;
}

.title-line-3 {
    animation: fade-right 0.6s ease 0.9s both;
}

/* Hero Subtitle */
.hero-subtitle {
    animation: fade-up 0.6s ease 1.0s both;
}

/* Hero CTAs */
.hero-ctas {
    animation: fade-up 0.6s ease 1.1s both;
}

/* Quick Stats */
.hero-quick-stats {
    animation: fade-up 0.6s ease 1.25s both;
}

/* Discord Mockup */
.discord-mockup {
    animation: fade-left 0.8s ease 0.8s both, float-mockup 4s ease 1.6s infinite;
}

/* Floating Badges Entrance */
.badge-games {
    animation: zoom-in 0.5s ease 1.2s both, float-badge 3s ease 1.7s infinite;
}

.badge-commands {
    animation: zoom-in 0.5s ease 1.4s both, float-badge 3s ease 2.4s infinite;
}

.badge-free {
    animation: zoom-in 0.5s ease 1.6s both, float-badge 3s ease 3.0s infinite;
}

/* Sparkles Entrance */
.sparkle-1 { animation: sparkle-float 3s ease 2.0s infinite; }
.sparkle-2 { animation: sparkle-float 3s ease 2.5s infinite; }
.sparkle-3 { animation: sparkle-float 3s ease 3.0s infinite; }
.sparkle-4 { animation: sparkle-float 3s ease 3.5s infinite; }

/* Scroll Indicator */
.scroll-indicator {
    animation: fade-in 1s ease 2.5s both;
}

/* ============================================
   13. MOCKUP ANIMATIONS
============================================ */

/* Chat Messages Stagger */
.chat-message:nth-child(1) { animation-delay: 1.5s; }
.chat-message:nth-child(2) { animation-delay: 2.0s; }
.chat-message:nth-child(3) { animation-delay: 2.5s; }
.chat-message:nth-child(4) { animation-delay: 3.0s; }

/* Wordle Cell Animation */
.wg-cell {
    animation: bounce-in 0.4s ease both;
}

.wg-row:nth-child(1) .wg-cell:nth-child(1) { animation-delay: 2.0s; }
.wg-row:nth-child(1) .wg-cell:nth-child(2) { animation-delay: 2.1s; }
.wg-row:nth-child(1) .wg-cell:nth-child(3) { animation-delay: 2.2s; }
.wg-row:nth-child(1) .wg-cell:nth-child(4) { animation-delay: 2.3s; }
.wg-row:nth-child(1) .wg-cell:nth-child(5) { animation-delay: 2.4s; }

.wg-row:nth-child(2) .wg-cell:nth-child(1) { animation-delay: 2.5s; }
.wg-row:nth-child(2) .wg-cell:nth-child(2) { animation-delay: 2.6s; }
.wg-row:nth-child(2) .wg-cell:nth-child(3) { animation-delay: 2.7s; }
.wg-row:nth-child(2) .wg-cell:nth-child(4) { animation-delay: 2.8s; }
.wg-row:nth-child(2) .wg-cell:nth-child(5) { animation-delay: 2.9s; }

/* Sidebar Server Hover */
.sidebar-server {
    transition: border-radius var(--transition-base), background var(--transition-base), transform var(--transition-bounce);
}

.sidebar-server:hover {
    transform: scale(1.1);
}

/* ============================================
   14. PARTICLE ANIMATIONS
============================================ */

/* CSS Particles Fallback */
.css-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.css-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    animation: particle-move var(--duration, 8s) ease var(--delay, 0s) infinite;
}

/* ============================================
   15. SPECIAL EFFECTS
============================================ */

/* Confetti */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 12px;
    top: -20px;
    animation: confetti-fall var(--duration) ease var(--delay) forwards;
    border-radius: 2px;
}

/* Glow Effect */
.glow-effect {
    position: relative;
}

.glow-effect::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 255, 136, 0.15) 0%,
        transparent 70%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.glow-effect:hover::before {
    opacity: 1;
}

/* Liquid Border */
.liquid-border {
    position: relative;
}

.liquid-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
        45deg,
        var(--primary),
        var(--secondary),
        var(--primary),
        var(--secondary)
    );
    background-size: 300% 300%;
    animation: gradient-border 4s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.liquid-border:hover::before {
    opacity: 1;
}

/* Spotlight Effect */
.spotlight {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 255, 136, 0.06) 0%,
        transparent 60%
    );
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity var(--transition-base);
    opacity: 0;
}

.feature-card:hover .spotlight {
    opacity: 1;
}

/* Reading Progress */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-primary);
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Noise Texture Overlay */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* Focus Ring Animation */
.animated-focus:focus-visible {
    animation: glow-pulse 1s ease infinite;
}

/* Heartbeat on hover */
.heartbeat-hover:hover {
    animation: heartbeat 1.2s ease infinite;
}

/* Scroll Snap */
.scroll-snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.scroll-snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
}

/* Active Tab Indicator Slide */
.tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--primary);
    border-radius: var(--border-radius-full);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px var(--primary-glow);
}

/* Number Count Animation */
.count-animate {
    animation: count-up 0.5s ease forwards;
}

/* Search Highlight */
.search-highlight {
    background: rgba(0, 255, 136, 0.15);
    border-radius: 3px;
    padding: 0 2px;
    color: var(--primary);
}

/* Tooltip */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.78rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    pointer-events: none;
    backdrop-filter: blur(10px);
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Marquee/Infinite Scroll */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    animation: marquee-scroll 30s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Accordion Animation */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

.accordion-content.open {
    max-height: 500px;
}

/* Page Fade Transition */
.page-fade-enter {
    animation: fade-in 0.4s ease forwards;
}

.page-fade-exit {
    animation: fade-in 0.4s ease reverse forwards;
}

/* Scroll To Section Smooth Highlight */
.section-highlight {
    animation: section-flash 1s ease forwards;
}

@keyframes section-flash {
    0% { background: rgba(0, 255, 136, 0.05); }
    100% { background: transparent; }
}