/* SVG Animator Frontend Styles */

.svg-animator-container {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.svg-animator-container svg {
    max-width: 100%;
    height: auto;
}

/* אנימציות בסיסיות */
.svg-animate-rotate {
    animation-fill-mode: both;
    transform-origin: center;
}

.svg-animate-scale {
    animation-fill-mode: both;
    transform-origin: center;
}

.svg-animate-translate {
    animation-fill-mode: both;
}

.svg-animate-opacity {
    animation-fill-mode: both;
}

.svg-animate-path {
    animation-fill-mode: both;
}

/* אנימציות מסוג סיבוב */
@keyframes svg-rotate-360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes svg-rotate-180 {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}

@keyframes svg-rotate-90 {
    from { transform: rotate(0deg); }
    to { transform: rotate(90deg); }
}

@keyframes svg-rotate-270 {
    from { transform: rotate(0deg); }
    to { transform: rotate(270deg); }
}

@keyframes svg-rotate-720 {
    from { transform: rotate(0deg); }
    to { transform: rotate(720deg); }
}

/* אנימציות מסוג שינוי גודל */
@keyframes svg-scale-up {
    from { transform: scale(1); }
    to { transform: scale(1.5); }
}

@keyframes svg-scale-down {
    from { transform: scale(1); }
    to { transform: scale(0.5); }
}

@keyframes svg-scale-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes svg-scale-pulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* אנימציות מסוג הזזה */
@keyframes svg-translate-right {
    from { transform: translateX(0); }
    to { transform: translateX(50px); }
}

@keyframes svg-translate-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50px); }
}

@keyframes svg-translate-up {
    from { transform: translateY(0); }
    to { transform: translateY(-50px); }
}

@keyframes svg-translate-down {
    from { transform: translateY(0); }
    to { transform: translateY(50px); }
}

@keyframes svg-translate-diagonal {
    from { transform: translate(0, 0); }
    to { transform: translate(50px, -50px); }
}

/* אנימציות מסוג שקיפות */
@keyframes svg-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes svg-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes svg-fade-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes svg-fade-pulse {
    0% { opacity: 1; }
    25% { opacity: 0.7; }
    50% { opacity: 1; }
    75% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* אנימציות נתיב */
@keyframes svg-draw-path {
    from {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* אנימציות משולבות */
@keyframes svg-rotate-scale {
    0% { 
        transform: rotate(0deg) scale(1); 
    }
    50% { 
        transform: rotate(180deg) scale(1.2); 
    }
    100% { 
        transform: rotate(360deg) scale(1); 
    }
}

@keyframes svg-bounce-in {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    70% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes svg-slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes svg-slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes svg-slide-in-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes svg-slide-in-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* אפקטים מיוחדים */
@keyframes svg-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes svg-wobble {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-5deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

@keyframes svg-rubber-band {
    from { 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); }
    to { transform: scale(1); }
}

@keyframes svg-heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

/* הגדרות נענטות */
.svg-animator-responsive {
    width: 100%;
    max-width: 100%;
}

.svg-animator-responsive svg {
    width: 100%;
    height: auto;
}

/* תמיכה בכיוון RTL */
[dir="rtl"] .svg-animate-translate-right {
    animation-name: svg-translate-left;
}

[dir="rtl"] .svg-animate-translate-left {
    animation-name: svg-translate-right;
}

/* אופטימיזציה לביצועים */
.svg-animator-container * {
    will-change: transform, opacity;
}

/* מצבי hover */
.svg-animator-hover:hover .svg-animate-element {
    animation-play-state: running;
}

.svg-animator-hover .svg-animate-element {
    animation-play-state: paused;
}

/* מצבי visibility */
.svg-animator-container.in-view .svg-animate-element {
    animation-play-state: running;
}

.svg-animator-container:not(.in-view) .svg-animate-element {
    animation-play-state: paused;
}

/* מדיה קוריז לצמצום אנימציות */
@media (prefers-reduced-motion: reduce) {
    .svg-animator-container * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* מובייל */
@media (max-width: 768px) {
    .svg-animator-container {
        max-width: 100%;
    }
    
    /* הקטנת אנימציות עבור מובייל */
    .svg-animate-translate-right,
    .svg-animate-translate-left {
        animation-name: svg-translate-mobile;
    }
    
    @keyframes svg-translate-mobile {
        from { transform: translateX(0); }
        to { transform: translateX(25px); }
    }
}

/* טאבלט */
@media (min-width: 769px) and (max-width: 1024px) {
    .svg-animator-container {
        max-width: 90%;
    }
}

/* דסקטופ גדול */
@media (min-width: 1200px) {
    .svg-animator-container {
        max-width: 1000px;
    }
}

/* הדפסה */
@media print {
    .svg-animator-container * {
        animation: none !important;
        transition: none !important;
    }
}