/**
 * Advanced Creative Animations
 * Professional & Eye-catching effects
 */

/* ============================================
   TEXT ANIMATIONS
   ============================================ */

/* Typing effect */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typing-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #3498DB;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    padding-right: 10px;
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #3498DB;
    }
}

/* Running/sliding text */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.running-text {
    animation: slideInFromRight 1s ease-out;
}

/* Character by character animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-chars {
    display: inline-block;
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-chars:nth-child(1) { animation-delay: 0.1s; }
.animate-chars:nth-child(2) { animation-delay: 0.2s; }
.animate-chars:nth-child(3) { animation-delay: 0.3s; }
.animate-chars:nth-child(4) { animation-delay: 0.4s; }
.animate-chars:nth-child(5) { animation-delay: 0.5s; }
.animate-chars:nth-child(6) { animation-delay: 0.6s; }

/* Bouncing text */
@keyframes bounceText {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.bouncing-text {
    animation: bounceText 0.6s ease-in-out infinite;
}

.bouncing-text:nth-child(1) { animation-delay: 0s; }
.bouncing-text:nth-child(2) { animation-delay: 0.1s; }
.bouncing-text:nth-child(3) { animation-delay: 0.2s; }
.bouncing-text:nth-child(4) { animation-delay: 0.3s; }

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

/* From Far Away */
@keyframes comeFromFar {
    from {
        transform: translate(-200%, -200%) scale(0.5);
        opacity: 0;
    }
    to {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

.come-from-far {
    animation: comeFromFar 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* From Far Right */
@keyframes comeFromRight {
    from {
        transform: translateX(200%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.come-from-right {
    animation: comeFromRight 1s ease-out;
}

/* From Far Left */
@keyframes comeFromLeft {
    from {
        transform: translateX(-200%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.come-from-left {
    animation: comeFromLeft 1s ease-out;
}

/* From Bottom */
@keyframes comeFromBottom {
    from {
        transform: translateY(150px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.come-from-bottom {
    animation: comeFromBottom 0.8s ease-out;
}

/* From Top */
@keyframes comeFromTop {
    from {
        transform: translateY(-150px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.come-from-top {
    animation: comeFromTop 0.8s ease-out;
}

/* ============================================
   ZOOM & SCALE ANIMATIONS
   ============================================ */

/* Zoom in */
@keyframes zoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.zoom-in {
    animation: zoomIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Zoom out */
@keyframes zoomOut {
    from {
        transform: scale(2);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.zoom-out {
    animation: zoomOut 0.6s ease-out;
}

/* Pop effect */
@keyframes pop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.pop {
    animation: pop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   FLIP & ROTATE ANIMATIONS
   ============================================ */

/* Flip horizontal */
@keyframes flipH {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flip-horizontal {
    animation: flipH 0.6s ease-out;
}

/* Flip vertical */
@keyframes flipV {
    from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flip-vertical {
    animation: flipV 0.6s ease-out;
}

/* 360 spin */
@keyframes spin360 {
    from {
        transform: rotate(0deg) scale(0);
        opacity: 0;
    }
    to {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

.spin-360 {
    animation: spin360 0.8s ease-out;
}

/* ============================================
   GRADIENT ANIMATIONS
   ============================================ */

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

.gradient-shift {
    background: linear-gradient(-45deg, #3498DB, #2C3E50, #E74C3C, #3498DB);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

/* Rainbow gradient */
@keyframes rainbowGradient {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.rainbow-gradient {
    animation: rainbowGradient 3s linear infinite;
}

/* ============================================
   GLOW & LIGHT EFFECTS
   ============================================ */

/* Glowing box */
@keyframes glowing {
    0%, 100% {
        box-shadow: 0 0 5px #3498DB, 0 0 10px #3498DB, 0 0 15px #3498DB;
    }
    50% {
        box-shadow: 0 0 10px #3498DB, 0 0 20px #3498DB, 0 0 30px #3498DB, 0 0 40px #3498DB;
    }
}

.glowing-box {
    animation: glowing 2s ease-in-out infinite;
}

/* Neon glow text */
@keyframes neonGlow {
    0%, 100% {
        text-shadow: 0 0 10px #3498DB, 0 0 20px #3498DB;
    }
    50% {
        text-shadow: 0 0 20px #3498DB, 0 0 30px #3498DB, 0 0 40px #3498DB;
    }
}

.neon-glow {
    animation: neonGlow 2s ease-in-out infinite;
    color: #3498DB;
    font-weight: bold;
}

/* ============================================
   WAVE ANIMATIONS
   ============================================ */

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

.wave {
    animation: wave 0.6s ease-in-out infinite;
}

.wave:nth-child(1) { animation-delay: 0s; }
.wave:nth-child(2) { animation-delay: 0.1s; }
.wave:nth-child(3) { animation-delay: 0.2s; }
.wave:nth-child(4) { animation-delay: 0.3s; }
.wave:nth-child(5) { animation-delay: 0.4s; }

/* Wavy line */
@keyframes wavyLine {
    0%, 100% {
        d: path('M0,50 Q25,0 50,50 T100,50');
    }
    50% {
        d: path('M0,50 Q25,100 50,50 T100,50');
    }
}

/* ============================================
   BLUR & FOCUS ANIMATIONS
   ============================================ */

/* Focus blur */
@keyframes focusBlur {
    from {
        filter: blur(10px);
        opacity: 0;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}

.focus-blur {
    animation: focusBlur 0.8s ease-out;
}

/* Motion blur */
@keyframes motionBlur {
    from {
        filter: blur(0);
    }
    50% {
        filter: blur(5px);
    }
    to {
        filter: blur(0);
    }
}

.motion-blur {
    animation: motionBlur 0.6s ease-in-out;
}

/* ============================================
   VIDEO-LIKE ANIMATIONS
   ============================================ */

/* Film roll */
@keyframes filmRoll {
    0% {
        transform: translateX(-100%) scaleX(0);
    }
    50% {
        transform: translateX(-50%) scaleX(1);
    }
    100% {
        transform: translateX(100%) scaleX(0);
    }
}

.film-roll {
    animation: filmRoll 2s ease-in-out;
}

/* Cinematic fade */
@keyframes cinematicFade {
    0% {
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.cinematic-fade {
    animation: cinematicFade 1.5s ease-out;
}

/* Slide reveal */
@keyframes slideReveal {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.slide-reveal {
    animation: slideReveal 1s ease-out;
}

/* ============================================
   FLOATING & HOVER EFFECTS
   ============================================ */

/* Floating */
@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

/* Sway */
@keyframes sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

.sway {
    animation: sway 2s ease-in-out infinite;
}

/* ============================================
   ATTENTION SEEKERS
   ============================================ */

/* Heartbeat */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(0.9);
    }
    20%, 40%, 60%, 80% {
        transform: scale(1);
    }
    50%, 70% {
        transform: scale(1.1);
    }
}

.heartbeat {
    animation: heartbeat 1.3s ease-in-out infinite;
}

/* Jello */
@keyframes jello {
    0%, 100% {
        transform: skewX(0deg) skewY(0deg);
    }
    30% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    60% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
}

.jello {
    animation: jello 0.9s ease-in-out;
}

/* Rubber band */
@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    50% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    65% {
        transform: scaleX(0.95) scaleY(1.05);
    }
    75% {
        transform: scaleX(1.05) scaleY(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.rubber-band {
    animation: rubberBand 0.8s ease-in-out;
}

/* ============================================
   STAGGER ANIMATIONS
   ============================================ */

/* Stagger fade in */
@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-fade-in {
    animation: staggerFadeIn 0.6s ease-out forwards;
}

.stagger-fade-in:nth-child(1) { animation-delay: 0.1s; }
.stagger-fade-in:nth-child(2) { animation-delay: 0.2s; }
.stagger-fade-in:nth-child(3) { animation-delay: 0.3s; }
.stagger-fade-in:nth-child(4) { animation-delay: 0.4s; }
.stagger-fade-in:nth-child(5) { animation-delay: 0.5s; }
.stagger-fade-in:nth-child(6) { animation-delay: 0.6s; }

/* ============================================
   PARALLAX EFFECT (CSS only)
   ============================================ */

.parallax-container {
    perspective: 1000px;
    overflow: hidden;
}

.parallax-element {
    transform: translateZ(-50px) scale(1.5);
}

/* ============================================
   RAINBOW TEXT
   ============================================ */

@keyframes rainbowText {
    0% { color: #ff0000; }
    17% { color: #ff7f00; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    67% { color: #0000ff; }
    83% { color: #4b0082; }
    100% { color: #ff0000; }
}

.rainbow-text {
    animation: rainbowText 3s linear infinite;
    font-weight: bold;
}

/* ============================================
   SLIDE AND FADE COMBINATIONS
   ============================================ */

/* Slide fade from left */
@keyframes slideFadeLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-fade-left {
    animation: slideFadeLeft 0.8s ease-out;
}

/* Slide fade from right */
@keyframes slideFadeRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-fade-right {
    animation: slideFadeRight 0.8s ease-out;
}

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

/* Delay utilities */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Duration utilities */
.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.6s; }
.duration-slow { animation-duration: 1s; }
.duration-slower { animation-duration: 1.5s; }

/* Iteration utilities */
.infinite { animation-iteration-count: infinite; }

/* Direction utilities */
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }

/* Fill mode utilities */
.forwards { animation-fill-mode: forwards; }
.backwards { animation-fill-mode: backwards; }

/* Timing functions */
.ease-linear { animation-timing-function: linear; }
.ease-ease { animation-timing-function: ease; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }

console.log('Advanced animations loaded');