/* ═══════════════════════════════════════════════════════════
   SISIRO — Animations
   Premium motion design keyframes and animation utilities
   ═══════════════════════════════════════════════════════════ */

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

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(1deg); }
    66% { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes floatReverse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}

@keyframes floatHorizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}

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

/* ─── Gold Shimmer & Shine ───────────────────────────────── */
@keyframes goldShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes goldPulse {
    0%, 100% { opacity: 0.3; box-shadow: 0 0 20px rgba(212, 175, 55, 0.1); }
    50% { opacity: 0.6; box-shadow: 0 0 40px rgba(212, 175, 55, 0.3); }
}

@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.4), 0 0 50px rgba(212, 175, 55, 0.1); }
}

@keyframes shineSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes borderGlow {
    0%, 100% { border-color: rgba(212, 175, 55, 0.2); }
    50% { border-color: rgba(212, 175, 55, 0.6); }
}

/* ─── Particle Effects ───────────────────────────────────── */
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes particleRise {
    0% { opacity: 0; transform: translateY(100px) scale(0); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-100vh) scale(0.5); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ─── Rotation ───────────────────────────────────────────── */
@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes pendulum {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

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

@keyframes pulseSoft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.03); opacity: 1; }
}

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

/* ─── Ken Burns ──────────────────────────────────────────── */
@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}

@keyframes kenBurnsReverse {
    0% { transform: scale(1.15) translate(-2%, -1%); }
    100% { transform: scale(1) translate(0, 0); }
}

@keyframes kenBurnsAlt {
    0% { transform: scale(1.1) translate(1%, 0); }
    100% { transform: scale(1) translate(-1%, 1%); }
}

/* ─── Reveal Animations ─────────────────────────────────── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes revealDown {
    from { opacity: 0; transform: translateY(-60px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes revealLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes revealRight {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes revealScale {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

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

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

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

@keyframes clipRevealCenter {
    from { clip-path: inset(50% 50% 50% 50%); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes maskReveal {
    from { mask-size: 0% 0%; }
    to { mask-size: 100% 100%; }
}

/* ─── Text Animations ───────────────────────────────────── */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--color-gold); }
}

@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
    50% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 40px rgba(212, 175, 55, 0.2); }
}

@keyframes letterSpacing {
    from { letter-spacing: 0.5em; opacity: 0; }
    to { letter-spacing: var(--tracking-wider); opacity: 1; }
}

/* ─── Scroll Indicator ───────────────────────────────────── */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0.5; }
}

@keyframes scrollLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* ─── Loading & Processing ───────────────────────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes progressBar {
    0% { width: 0%; }
    20% { width: 20%; }
    50% { width: 55%; }
    80% { width: 80%; }
    100% { width: 100%; }
}

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

@keyframes circleDraw {
    0% { stroke-dashoffset: 314; }
    100% { stroke-dashoffset: 0; }
}

@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* ─── Ripple Effect ──────────────────────────────────────── */
@keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

/* ─── Marquee ────────────────────────────────────────────── */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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

/* ─── Background Animations ─────────────────────────────── */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes noiseGrain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

/* ─── Decorative Line ────────────────────────────────────── */
@keyframes lineExpand {
    from { width: 0; }
    to { width: 60px; }
}

@keyframes lineExpandWide {
    from { width: 0; }
    to { width: 100px; }
}

@keyframes dashOffset {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════
   ANIMATION UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

.anim-float          { animation: float 6s ease-in-out infinite; }
.anim-float-slow     { animation: floatSlow 8s ease-in-out infinite; }
.anim-float-reverse  { animation: floatReverse 7s ease-in-out infinite; }
.anim-float-diagonal { animation: floatDiagonal 10s ease-in-out infinite; }
.anim-float-hz       { animation: floatHorizontal 5s ease-in-out infinite; }

.anim-rotate-slow    { animation: rotateSlow 20s linear infinite; }
.anim-rotate-reverse { animation: rotateReverse 25s linear infinite; }
.anim-pendulum       { animation: pendulum 4s ease-in-out infinite; }

.anim-pulse          { animation: pulse 3s ease-in-out infinite; }
.anim-pulse-soft     { animation: pulseSoft 4s ease-in-out infinite; }
.anim-breathe        { animation: breathe 5s ease-in-out infinite; }

.anim-shimmer        { animation: goldShimmer 3s linear infinite; }
.anim-glow           { animation: goldGlow 3s ease-in-out infinite; }
.anim-twinkle        { animation: twinkle 2s ease-in-out infinite; }
.anim-sparkle        { animation: sparkle 3s ease-in-out infinite; }

.anim-ken-burns      { animation: kenBurns 20s ease-in-out infinite alternate; }
.anim-ken-burns-rev  { animation: kenBurnsReverse 25s ease-in-out infinite alternate; }

.anim-scroll-bounce  { animation: scrollBounce 2s ease-in-out infinite; }
.anim-marquee        { animation: marquee 30s linear infinite; }

/* ─── Delay Modifiers ────────────────────────────────────── */
.anim-delay-1 { animation-delay: 0.5s; }
.anim-delay-2 { animation-delay: 1s; }
.anim-delay-3 { animation-delay: 1.5s; }
.anim-delay-4 { animation-delay: 2s; }
.anim-delay-5 { animation-delay: 2.5s; }
.anim-delay-6 { animation-delay: 3s; }

/* ─── GSAP Scroll Reveal States ──────────────────────────── */
.gs-reveal {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

.gs-reveal-up {
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity;
}

.gs-reveal-down {
    opacity: 0;
    transform: translateY(-60px);
    will-change: transform, opacity;
}

.gs-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    will-change: transform, opacity;
}

.gs-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    will-change: transform, opacity;
}

.gs-reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    will-change: transform, opacity;
}

.gs-reveal-blur {
    opacity: 0;
    filter: blur(10px);
    will-change: transform, opacity, filter;
}

.gs-clip-up {
    clip-path: inset(100% 0 0 0);
    will-change: clip-path;
}

.gs-clip-left {
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}

.gs-clip-center {
    clip-path: inset(50% 50% 50% 50%);
    will-change: clip-path;
}

/* ─── Parallax Layer Helpers ─────────────────────────────── */
.parallax-layer {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ─── GPU Acceleration ───────────────────────────────────── */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ─── 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;
    }

    .gs-reveal,
    .gs-reveal-up,
    .gs-reveal-down,
    .gs-reveal-left,
    .gs-reveal-right,
    .gs-reveal-scale,
    .gs-reveal-blur,
    .gs-clip-up,
    .gs-clip-left,
    .gs-clip-center {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        visibility: visible;
    }
}