/* =============================================
   LOTTIE ENTRANCE/EXIT EFFECTS v2 — raspilim.com
   10 рандомных эффектов для Lottie-контейнеров
   ============================================= */

/* Подготовка: скрыть перед входной анимацией (только пока pending) */
[data-lt="pending"] {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* После начала анимации — показываем */
[data-lt="animating"],
[data-lt="done"] {
    visibility: visible !important;
}

/* ===== 1. ZOOM BOUNCE ===== */
@keyframes ltZoomBounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.08); }
    70%  { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes ltZoomBounceOut {
    0%   { opacity: 1; transform: scale(1); }
    30%  { transform: scale(1.05); }
    100% { opacity: 0; transform: scale(0.3); }
}
.lt-zoom-bounce-in  { animation: ltZoomBounceIn 0.65s cubic-bezier(0.34,1.56,0.64,1) both; }
.lt-zoom-bounce-out { animation: ltZoomBounceOut 0.35s ease-in both; }

/* ===== 2. CIRCULAR REVEAL ===== */
@keyframes ltCircleIn {
    0%   { opacity: 0; -webkit-clip-path: circle(0% at 50% 50%); clip-path: circle(0% at 50% 50%); }
    15%  { opacity: 1; }
    100% { opacity: 1; -webkit-clip-path: circle(75% at 50% 50%); clip-path: circle(75% at 50% 50%); }
}
@keyframes ltCircleOut {
    0%   { opacity: 1; -webkit-clip-path: circle(75% at 50% 50%); clip-path: circle(75% at 50% 50%); }
    85%  { opacity: 1; }
    100% { opacity: 0; -webkit-clip-path: circle(0% at 50% 50%); clip-path: circle(0% at 50% 50%); }
}
.lt-circle-in  { animation: ltCircleIn 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.lt-circle-out { animation: ltCircleOut 0.4s ease-in both; }

/* ===== 3. 3D FLIP ===== */
@keyframes ltFlipIn {
    0%   { opacity: 0; transform: perspective(800px) rotateY(80deg); }
    40%  { opacity: 1; }
    70%  { transform: perspective(800px) rotateY(-8deg); }
    100% { opacity: 1; transform: perspective(800px) rotateY(0deg); }
}
@keyframes ltFlipOut {
    0%   { opacity: 1; transform: perspective(800px) rotateY(0deg); }
    100% { opacity: 0; transform: perspective(800px) rotateY(-80deg); }
}
.lt-flip-in  { animation: ltFlipIn 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.lt-flip-out { animation: ltFlipOut 0.4s ease-in both; }

/* ===== 4. GLITCH ENTRANCE ===== */
@keyframes ltGlitchIn {
    0%   { opacity: 0; transform: translate(0); }
    15%  { opacity: 0.8; transform: translate(-4px, 2px) skewX(-2deg); }
    30%  { opacity: 0.5; transform: translate(3px, -3px) skewX(1deg); }
    45%  { opacity: 0.9; transform: translate(-2px, 1px) skewX(-1deg); }
    60%  { opacity: 1; transform: translate(2px, -1px) skewX(0.5deg); }
    75%  { opacity: 1; transform: translate(-1px, 0); }
    100% { opacity: 1; transform: translate(0) skewX(0); }
}
@keyframes ltGlitchOut {
    0%   { opacity: 1; transform: translate(0); }
    30%  { opacity: 0.7; transform: translate(3px, -2px) skewX(2deg); }
    60%  { opacity: 0.4; transform: translate(-3px, 2px) skewX(-1deg); }
    100% { opacity: 0; transform: translate(-4px, 4px) skewX(3deg); }
}
.lt-glitch-in  { animation: ltGlitchIn 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.lt-glitch-out { animation: ltGlitchOut 0.35s ease-in both; }

/* ===== 5. ELASTIC DROP ===== */
@keyframes ltElasticIn {
    0%   { opacity: 0; transform: translateY(-60px) scaleY(1.15); }
    35%  { opacity: 1; transform: translateY(8px) scaleY(0.92); }
    55%  { transform: translateY(-4px) scaleY(1.03); }
    75%  { transform: translateY(2px) scaleY(0.99); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes ltElasticOut {
    0%   { opacity: 1; transform: translateY(0); }
    25%  { transform: translateY(-8px); }
    100% { opacity: 0; transform: translateY(50px); }
}
.lt-elastic-in  { animation: ltElasticIn 0.75s cubic-bezier(0.22,1,0.36,1) both; }
.lt-elastic-out { animation: ltElasticOut 0.4s ease-in both; }

/* ===== 6. PARTICLE ASSEMBLE ===== */
@keyframes ltParticleIn {
    0%   { opacity: 0; transform: scale(1.3) rotate(5deg); filter: blur(12px); }
    50%  { opacity: 0.7; transform: scale(1.05) rotate(-2deg); filter: blur(4px); }
    80%  { opacity: 0.95; transform: scale(0.99) rotate(0.5deg); filter: blur(1px); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
@keyframes ltParticleOut {
    0%   { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
    100% { opacity: 0; transform: scale(1.3) rotate(-5deg); filter: blur(12px); }
}
.lt-particle-in  { animation: ltParticleIn 0.8s cubic-bezier(0.22,1,0.36,1) both; }
.lt-particle-out { animation: ltParticleOut 0.4s ease-in both; }

/* ===== 7. NEON GLOW PULSE ===== */
@keyframes ltNeonIn {
    0%   { opacity: 0; filter: brightness(0.5) drop-shadow(0 0 0 rgba(0,230,232,0)); }
    30%  { opacity: 0.8; filter: brightness(1.4) drop-shadow(0 0 20px rgba(0,230,232,0.7)); }
    60%  { opacity: 1; filter: brightness(1.15) drop-shadow(0 0 10px rgba(0,230,232,0.4)); }
    100% { opacity: 1; filter: brightness(1) drop-shadow(0 0 0 rgba(0,230,232,0)); }
}
@keyframes ltNeonOut {
    0%   { opacity: 1; filter: brightness(1) drop-shadow(0 0 0 rgba(0,230,232,0)); }
    40%  { opacity: 0.8; filter: brightness(1.4) drop-shadow(0 0 25px rgba(0,230,232,0.6)); }
    100% { opacity: 0; filter: brightness(0.4) drop-shadow(0 0 0 rgba(0,230,232,0)); }
}
.lt-neon-in  { animation: ltNeonIn 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.lt-neon-out { animation: ltNeonOut 0.4s ease-in both; }

/* ===== 8. TYPEWRITER FRAME ===== */
@keyframes ltTypeIn {
    0%   { opacity: 0; -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    20%  { opacity: 1; }
    100% { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes ltTypeOut {
    0%   { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    80%  { opacity: 1; }
    100% { opacity: 0; -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}
.lt-type-in  { animation: ltTypeIn 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.lt-type-out { animation: ltTypeOut 0.4s ease-in both; }

/* ===== 9. BLUR → SHARP (parallax shift) ===== */
@keyframes ltBlurSharpIn {
    0%   { opacity: 0; filter: blur(18px); transform: scale(1.1) translateY(15px); }
    50%  { opacity: 0.8; filter: blur(4px); transform: scale(1.02) translateY(4px); }
    100% { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
}
@keyframes ltBlurSharpOut {
    0%   { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
    100% { opacity: 0; filter: blur(15px); transform: scale(1.08) translateY(-12px); }
}
.lt-blur-sharp-in  { animation: ltBlurSharpIn 0.75s cubic-bezier(0.22,1,0.36,1) both; }
.lt-blur-sharp-out { animation: ltBlurSharpOut 0.4s ease-in both; }

/* ===== 10. SPLIT CURTAIN ===== */
@keyframes ltCurtainIn {
    0%   { opacity: 0; -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); }
    20%  { opacity: 1; }
    100% { opacity: 1; -webkit-clip-path: inset(0 0% 0 0%); clip-path: inset(0 0% 0 0%); }
}
@keyframes ltCurtainOut {
    0%   { opacity: 1; -webkit-clip-path: inset(0 0% 0 0%); clip-path: inset(0 0% 0 0%); }
    80%  { opacity: 1; }
    100% { opacity: 0; -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); }
}
.lt-curtain-in  { animation: ltCurtainIn 0.65s cubic-bezier(0.22,1,0.36,1) both; }
.lt-curtain-out { animation: ltCurtainOut 0.35s ease-in both; }

/* ===== REDUCE MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    [data-lt],
    [class^="lt-"],
    [class*=" lt-"] {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }
}