/* 
 * #6 - Sophisticated Animations Library
 * Spring physics, orchestrated entrances, scroll-triggered reveals
 */

/* ===== Spring Physics Animations ===== */

/* Spring configuration */
:root {
    --spring-stiffness: 180;
    --spring-damping: 12;
    --spring-mass: 1;
}

/* Spring animation presets */
@keyframes spring-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spring-slide-up {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    60% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes spring-slide-down {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    60% {
        transform: translateY(10px);
    }
    80% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

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

/* ===== Orchestrated Entrance Animations ===== */

/* Stagger delay classes */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }
.stagger-9 { animation-delay: 0.45s; }
.stagger-10 { animation-delay: 0.5s; }

/* Entrance animation classes */
.entrance-fade {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

.entrance-slide-up {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 0.6s ease-out forwards;
}

.entrance-slide-down {
    opacity: 0;
    transform: translateY(-30px);
    animation: slideDown 0.6s ease-out forwards;
}

.entrance-slide-left {
    opacity: 0;
    transform: translateX(30px);
    animation: slideLeft 0.6s ease-out forwards;
}

.entrance-slide-right {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideRight 0.6s ease-out forwards;
}

.entrance-scale {
    opacity: 0;
    transform: scale(0.9);
    animation: scaleIn 0.6s ease-out forwards;
}

.entrance-bounce {
    opacity: 0;
    animation: spring-bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Basic keyframes */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Scroll-Triggered Reveals ===== */

/* Initially hidden elements */
.scroll-reveal {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.from-bottom {
    transform: translateY(40px);
}

.scroll-reveal.from-top {
    transform: translateY(-40px);
}

.scroll-reveal.from-left {
    transform: translateX(40px);
}

.scroll-reveal.from-right {
    transform: translateX(-40px);
}

.scroll-reveal.from-scale {
    transform: scale(0.9);
}

/* Revealed state */
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ===== Micro-Interactions ===== */

/* Ripple effect */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

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

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

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

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

/* Bounce animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

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

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

/* Wiggle animation */
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(3deg);
    }
    75% {
        transform: rotate(-3deg);
    }
}

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

/* ===== Page Transitions ===== */

/* Fade transition */
.page-transition-fade {
    animation: pageFadeIn 0.5s ease-out;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide transition */
.page-transition-slide {
    animation: pageSlideIn 0.6s ease-out;
}

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

/* Scale transition */
.page-transition-scale {
    animation: pageScaleIn 0.5s ease-out;
}

@keyframes pageScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Loading States ===== */

/* Skeleton shimmer */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: var(--radius-sm);
}

/* ===== Reduced Motion ===== */

/* Respect user preference */
@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;
    /* Keep scroll-triggered elements visible */
    .animate-on-scroll,
    .animate-on-scroll.animated,
    [class*="animate"],
    .fade-in,
    .fade-up,
    .fade-down,
    .slide-in,
    .slide-up {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}
    
    .scroll-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ===== Animation Utilities ===== */

/* Pause/play animations */
.animation-paused {
    animation-play-state: paused;
}

.animation-running {
    animation-play-state: running;
}

/* Animation duration utilities */
.duration-fast { animation-duration: 0.2s; }
.duration-normal { animation-duration: 0.3s; }
.duration-slow { animation-duration: 0.5s; }
.duration-slower { animation-duration: 0.8s; }

/* Animation delay utilities */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

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

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


/* Accessibility: Enhanced contrast mode */
@media (prefers-contrast: more) {
    :root {
        --gray: #333;
        --gray-light: #555;
        --gray-dark: #111;
    }
    body { color: #000; }
    a { text-decoration: underline; }
}


/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark light;
    }
    img:not([src*=".svg"]) {
        opacity: 0.9;
    }
}


/* Accessibility: Visible focus indicators */
:focus-visible {
    outline: 3px solid #4f46e5;
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, 
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #4f46e5;
    outline-offset: 2px;
    border-radius: 2px;
}


/* Print Styles */
@media print {
    *, *::before, *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a, a:visited { text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; }
    abbr[title]::after { content: " (" attr(title) ")"; }
    img { page-break-inside: avoid; }
    h2, h3 { page-break-after: avoid; }
    p { orphans: 3; widows: 3; }
    nav, footer, .no-print, .btn, button { display: none !important; }
    body { font-size: 12pt; line-height: 1.5; }
}