/* ===== ANIMATIONS CSS - Animations, Transitions, Keyframes ===== */

/* ===== AOS ANIMATIONS ===== */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translate3d(0, 100px, 0);
}

[data-aos="fade-up"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="fade-right"] {
    transform: translate3d(-100px, 0, 0);
}

[data-aos="fade-right"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="fade-left"] {
    transform: translate3d(100px, 0, 0);
}

[data-aos="fade-left"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="fade-down"] {
    transform: translate3d(0, -100px, 0);
}

[data-aos="fade-down"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="zoom-in"] {
    transform: scale(0.6);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

[data-aos="zoom-out"] {
    transform: scale(1.2);
}

[data-aos="zoom-out"].aos-animate {
    transform: scale(1);
}

[data-aos="slide-up"] {
    transform: translate3d(0, 100%, 0);
}

[data-aos="slide-up"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="slide-down"] {
    transform: translate3d(0, -100%, 0);
}

[data-aos="slide-down"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="slide-right"] {
    transform: translate3d(-100%, 0, 0);
}

[data-aos="slide-right"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="slide-left"] {
    transform: translate3d(100%, 0, 0);
}

[data-aos="slide-left"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="flip-left"] {
    transform: perspective(2500px) rotateY(-100deg);
}

[data-aos="flip-left"].aos-animate {
    transform: perspective(2500px) rotateY(0);
}

[data-aos="flip-right"] {
    transform: perspective(2500px) rotateY(100deg);
}

[data-aos="flip-right"].aos-animate {
    transform: perspective(2500px) rotateY(0);
}

[data-aos="flip-up"] {
    transform: perspective(2500px) rotateX(-100deg);
}

[data-aos="flip-up"].aos-animate {
    transform: perspective(2500px) rotateX(0);
}

[data-aos="flip-down"] {
    transform: perspective(2500px) rotateX(100deg);
}

[data-aos="flip-down"].aos-animate {
    transform: perspective(2500px) rotateX(0);
}

/* ===== CUSTOM ANIMATIONS ===== */

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

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

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Ping Animation */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Wiggle Animation */
@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }
    15% {
        transform: rotateZ(-15deg);
    }
    20% {
        transform: rotateZ(10deg);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    30% {
        transform: rotateZ(6deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    40%, 100% {
        transform: rotateZ(0);
    }
}

.animate-wiggle {
    animation: wiggle 1s ease-in-out infinite;
}

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

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

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

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

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

.animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

/* Slide In From Top */
@keyframes slideInTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-in-top {
    animation: slideInTop 0.5s ease-out;
}

/* Slide In From Bottom */
@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-in-bottom {
    animation: slideInBottom 0.5s ease-out;
}

/* Scale In Animation */
@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out;
}

/* Rotate In Animation */
@keyframes rotateIn {
    from {
        transform: rotate(-200deg);
        opacity: 0;
    }
    to {
        transform: rotate(0);
        opacity: 1;
    }
}

.animate-rotate-in {
    animation: rotateIn 0.5s ease-out;
}

/* Flip In Animation */
@keyframes flipIn {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-20deg);
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
    }
    80% {
        transform: perspective(400px) rotateY(-5deg);
    }
    to {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.animate-flip-in {
    animation: flipIn 0.6s ease-out;
}

/* ===== ROLE ANIMATION ===== */
.role-animation {
    animation: roleSlide 8s infinite;
}

.role-text {
    display: block;
    height: 2.5rem;
    line-height: 2.5rem;
    overflow: hidden;
    color: #2563eb;
    font-weight: 600;
}

.dark .role-text {
    color: #60a5fa;
}

@keyframes roleSlide {
    0%, 20% {
        transform: translateY(0);
    }
    25%, 45% {
        transform: translateY(-2.5rem);
    }
    50%, 70% {
        transform: translateY(-5rem);
    }
    75%, 95% {
        transform: translateY(-7.5rem);
    }
    100% {
        transform: translateY(-10rem);
    }
}

/* ===== TYPING ANIMATION ===== */
.typing-text {
    border-right: 2px solid #2563eb;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
}

.dark .typing-text {
    border-right-color: #60a5fa;
}

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

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

.dark @keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #60a5fa;
    }
}

/* ===== FLOWING ANIMATION ===== */
.flow-animation {
    animation: flow 3s ease-in-out infinite;
}

@keyframes flow {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

/* ===== DATA FLOW ANIMATION ===== */
.data-flow {
    animation: dataFlow 2s linear infinite;
}

@keyframes dataFlow {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===== LOADING DOTS ===== */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/* ===== FADE IN UP ===== */
.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SLIDE IN LEFT ===== */
.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

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

/* ===== SLIDE IN RIGHT ===== */
.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

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

/* ===== SPIN ===== */
.spin {
    animation: spin 1s linear infinite;
}

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

/* ===== HOVER ANIMATIONS ===== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover-scale {
    transition: transform 0.3s ease;
}

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

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}

/* ===== TRANSITION UTILITIES ===== */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* ===== DURATION UTILITIES ===== */
.duration-75 {
    transition-duration: 75ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.duration-700 {
    transition-duration: 700ms;
}

.duration-1000 {
    transition-duration: 1000ms;
}

/* ===== EASING UTILITIES ===== */
.ease-linear {
    transition-timing-function: linear;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DELAY UTILITIES ===== */
.delay-75 {
    transition-delay: 75ms;
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-150 {
    transition-delay: 150ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-500 {
    transition-delay: 500ms;
}

.delay-700 {
    transition-delay: 700ms;
}

.delay-1000 {
    transition-delay: 1000ms;
}

/* ===== ANIMATION FILL MODE ===== */
.animate-fill-none {
    animation-fill-mode: none;
}

.animate-fill-forwards {
    animation-fill-mode: forwards;
}

.animate-fill-backwards {
    animation-fill-mode: backwards;
}

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

/* ===== ANIMATION DIRECTION ===== */
.animate-direction-normal {
    animation-direction: normal;
}

.animate-direction-reverse {
    animation-direction: reverse;
}

.animate-direction-alternate {
    animation-direction: alternate;
}

.animate-direction-alternate-reverse {
    animation-direction: alternate-reverse;
}

/* ===== ANIMATION ITERATION COUNT ===== */
.animate-iteration-1 {
    animation-iteration-count: 1;
}

.animate-iteration-2 {
    animation-iteration-count: 2;
}

.animate-iteration-3 {
    animation-iteration-count: 3;
}

.animate-iteration-infinite {
    animation-iteration-count: infinite;
}

/* ===== ANIMATION PLAY STATE ===== */
.animate-play-running {
    animation-play-state: running;
}

.animate-play-paused {
    animation-play-state: paused;
}

/* ===== ANIMATION TIMING FUNCTION ===== */
.animate-timing-linear {
    animation-timing-function: linear;
}

.animate-timing-ease {
    animation-timing-function: ease;
}

.animate-timing-ease-in {
    animation-timing-function: ease-in;
}

.animate-timing-ease-out {
    animation-timing-function: ease-out;
}

.animate-timing-ease-in-out {
    animation-timing-function: ease-in-out;
}

.animate-timing-cubic-bezier {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESPONSIVE ANIMATIONS ===== */
@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;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    * {
        animation: none !important;
        transition: none !important;
    }
}