/**
 * ENNU Luxury Animations Library
 *
 * A refined, professional animation system for clinical interfaces.
 * Design Philosophy: Subtle, Smooth, Professional - Never Flashy
 *
 * @package ENNU_Infrastructure
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties - Animation Timing & Easing
   ========================================================================== */

:root {
    /* Duration Variables */
    --ennu-duration-instant: 100ms;
    --ennu-duration-fast: 150ms;
    --ennu-duration-normal: 300ms;
    --ennu-duration-slow: 500ms;
    --ennu-duration-slower: 700ms;
    --ennu-duration-page: 400ms;

    /* Easing Curves - Refined for Luxury Feel */
    --ennu-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ennu-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ennu-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ennu-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ennu-ease-elegant: cubic-bezier(0.23, 1, 0.32, 1);
    --ennu-ease-bounce-subtle: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ennu-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Animation Distances */
    --ennu-distance-sm: 8px;
    --ennu-distance-md: 16px;
    --ennu-distance-lg: 24px;
    --ennu-distance-xl: 40px;

    /* Color Variables for Effects */
    --ennu-glow-color: rgba(45, 106, 79, 0.15);
    --ennu-glow-color-strong: rgba(45, 106, 79, 0.25);
    --ennu-focus-ring-color: rgba(45, 106, 79, 0.4);
    --ennu-shimmer-color: rgba(255, 255, 255, 0.6);
    --ennu-success-color: #2d6a4f;
    --ennu-skeleton-base: #e8e8e8;
    --ennu-skeleton-highlight: #f5f5f5;
}

/* ==========================================================================
   1. ENTRANCE ANIMATIONS
   ========================================================================== */

/* Fade In - Simple and Elegant */
.ennu-anim-fade-in {
    animation: ennuFadeIn var(--ennu-duration-normal) var(--ennu-ease-out) forwards;
}

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

/* Slide Up - Content Reveal */
.ennu-anim-slide-up {
    animation: ennuSlideUp var(--ennu-duration-normal) var(--ennu-ease-elegant) forwards;
}

@keyframes ennuSlideUp {
    from {
        opacity: 0;
        transform: translateY(var(--ennu-distance-md));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Down - Dropdown Reveal */
.ennu-anim-slide-down {
    animation: ennuSlideDown var(--ennu-duration-normal) var(--ennu-ease-elegant) forwards;
}

@keyframes ennuSlideDown {
    from {
        opacity: 0;
        transform: translateY(calc(var(--ennu-distance-md) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale In - Modal/Card Appearance */
.ennu-anim-scale-in {
    animation: ennuScaleIn var(--ennu-duration-normal) var(--ennu-ease-elegant) forwards;
}

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

/* Blur In - Premium Reveal Effect */
.ennu-anim-blur-in {
    animation: ennuBlurIn var(--ennu-duration-slow) var(--ennu-ease-elegant) forwards;
}

@keyframes ennuBlurIn {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* Slide In Left */
.ennu-anim-slide-in-left {
    animation: ennuSlideInLeft var(--ennu-duration-normal) var(--ennu-ease-elegant) forwards;
}

@keyframes ennuSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(calc(var(--ennu-distance-md) * -1));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Right */
.ennu-anim-slide-in-right {
    animation: ennuSlideInRight var(--ennu-duration-normal) var(--ennu-ease-elegant) forwards;
}

@keyframes ennuSlideInRight {
    from {
        opacity: 0;
        transform: translateX(var(--ennu-distance-md));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   2. EXIT ANIMATIONS
   ========================================================================== */

/* Fade Out */
.ennu-anim-fade-out {
    animation: ennuFadeOut var(--ennu-duration-normal) var(--ennu-ease-in) forwards;
}

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

/* Slide Out Up */
.ennu-anim-slide-out-up {
    animation: ennuSlideOutUp var(--ennu-duration-normal) var(--ennu-ease-in) forwards;
}

@keyframes ennuSlideOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(calc(var(--ennu-distance-md) * -1));
    }
}

/* Slide Out Down */
.ennu-anim-slide-out-down {
    animation: ennuSlideOutDown var(--ennu-duration-normal) var(--ennu-ease-in) forwards;
}

@keyframes ennuSlideOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(var(--ennu-distance-md));
    }
}

/* Scale Out */
.ennu-anim-scale-out {
    animation: ennuScaleOut var(--ennu-duration-normal) var(--ennu-ease-in) forwards;
}

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

/* Blur Out */
.ennu-anim-blur-out {
    animation: ennuBlurOut var(--ennu-duration-slow) var(--ennu-ease-in) forwards;
}

@keyframes ennuBlurOut {
    from {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
    to {
        opacity: 0;
        filter: blur(8px);
        transform: scale(0.98);
    }
}

/* ==========================================================================
   3. ATTENTION & FEEDBACK ANIMATIONS
   ========================================================================== */

/* Subtle Pulse - For CTAs */
.ennu-anim-pulse-subtle {
    animation: ennuPulseSubtle 2s var(--ennu-ease-in-out) infinite;
}

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

/* Shimmer - Loading Effect */
.ennu-anim-shimmer {
    position: relative;
    overflow: hidden;
}

.ennu-anim-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ennu-shimmer-color) 50%,
        transparent 100%
    );
    animation: ennuShimmer 1.5s var(--ennu-ease-in-out) infinite;
}

@keyframes ennuShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Soft Glow Effect */
.ennu-anim-glow {
    animation: ennuGlow 2s var(--ennu-ease-in-out) infinite;
}

@keyframes ennuGlow {
    0%, 100% {
        box-shadow: 0 0 5px var(--ennu-glow-color),
                    0 0 10px var(--ennu-glow-color);
    }
    50% {
        box-shadow: 0 0 10px var(--ennu-glow-color),
                    0 0 20px var(--ennu-glow-color-strong);
    }
}

/* Success Animation - Checkmark Feel */
.ennu-anim-success {
    animation: ennuSuccess var(--ennu-duration-slow) var(--ennu-ease-spring) forwards;
}

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

/* Gentle Shake - Error Feedback */
.ennu-anim-shake {
    animation: ennuShake var(--ennu-duration-fast) var(--ennu-ease-default);
}

@keyframes ennuShake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-4px);
    }
    40%, 80% {
        transform: translateX(4px);
    }
}

/* Highlight Flash - Attention Grab */
.ennu-anim-highlight {
    animation: ennuHighlight var(--ennu-duration-slow) var(--ennu-ease-out);
}

@keyframes ennuHighlight {
    0% {
        background-color: rgba(45, 106, 79, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

/* ==========================================================================
   4. MICRO-INTERACTIONS (Hover, Press, Focus)
   ========================================================================== */

/* Card Lift on Hover */
.ennu-hover-lift {
    transition: transform var(--ennu-duration-normal) var(--ennu-ease-elegant),
                box-shadow var(--ennu-duration-normal) var(--ennu-ease-elegant);
    will-change: transform, box-shadow;
}

.ennu-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12),
                0 4px 8px -4px rgba(0, 0, 0, 0.08);
}

/* Subtle Glow on Hover */
.ennu-hover-glow {
    transition: box-shadow var(--ennu-duration-normal) var(--ennu-ease-elegant);
    will-change: box-shadow;
}

.ennu-hover-glow:hover {
    box-shadow: 0 0 0 4px var(--ennu-glow-color);
}

/* Scale Down on Press/Click */
.ennu-press-scale {
    transition: transform var(--ennu-duration-fast) var(--ennu-ease-out);
    will-change: transform;
}

.ennu-press-scale:active {
    transform: scale(0.97);
}

/* Elegant Focus Ring */
.ennu-focus-ring {
    transition: box-shadow var(--ennu-duration-fast) var(--ennu-ease-out),
                outline var(--ennu-duration-fast) var(--ennu-ease-out);
}

.ennu-focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--ennu-focus-ring-color);
}

.ennu-focus-ring:focus:not(:focus-visible) {
    box-shadow: none;
}

.ennu-focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ennu-focus-ring-color);
}

/* Hover Scale - Subtle Zoom */
.ennu-hover-scale {
    transition: transform var(--ennu-duration-normal) var(--ennu-ease-elegant);
    will-change: transform;
}

.ennu-hover-scale:hover {
    transform: scale(1.02);
}

/* Hover Brighten - For Images */
.ennu-hover-brighten {
    transition: filter var(--ennu-duration-normal) var(--ennu-ease-elegant);
}

.ennu-hover-brighten:hover {
    filter: brightness(1.05);
}

/* Combined Hover Effect - Lift + Glow */
.ennu-hover-premium {
    transition: transform var(--ennu-duration-normal) var(--ennu-ease-elegant),
                box-shadow var(--ennu-duration-normal) var(--ennu-ease-elegant);
    will-change: transform, box-shadow;
}

.ennu-hover-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1),
                0 0 0 1px var(--ennu-glow-color);
}

/* ==========================================================================
   5. TRANSITION UTILITIES
   ========================================================================== */

/* Duration Classes */
.ennu-transition-fast {
    transition-duration: var(--ennu-duration-fast);
    transition-timing-function: var(--ennu-ease-default);
}

.ennu-transition-normal {
    transition-duration: var(--ennu-duration-normal);
    transition-timing-function: var(--ennu-ease-default);
}

.ennu-transition-slow {
    transition-duration: var(--ennu-duration-slow);
    transition-timing-function: var(--ennu-ease-default);
}

/* Elegant Transition - Custom Bezier */
.ennu-transition-elegant {
    transition-duration: var(--ennu-duration-normal);
    transition-timing-function: var(--ennu-ease-elegant);
}

/* Property-Specific Transitions */
.ennu-transition-opacity {
    transition-property: opacity;
    transition-duration: var(--ennu-duration-normal);
    transition-timing-function: var(--ennu-ease-default);
}

.ennu-transition-transform {
    transition-property: transform;
    transition-duration: var(--ennu-duration-normal);
    transition-timing-function: var(--ennu-ease-elegant);
}

.ennu-transition-colors {
    transition-property: color, background-color, border-color;
    transition-duration: var(--ennu-duration-normal);
    transition-timing-function: var(--ennu-ease-default);
}

.ennu-transition-shadow {
    transition-property: box-shadow;
    transition-duration: var(--ennu-duration-normal);
    transition-timing-function: var(--ennu-ease-default);
}

.ennu-transition-all {
    transition-property: all;
    transition-duration: var(--ennu-duration-normal);
    transition-timing-function: var(--ennu-ease-default);
}

/* ==========================================================================
   6. LOADING STATES
   ========================================================================== */

/* Skeleton Loading */
.ennu-skeleton {
    background: linear-gradient(
        90deg,
        var(--ennu-skeleton-base) 0%,
        var(--ennu-skeleton-highlight) 50%,
        var(--ennu-skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: ennuSkeleton 1.5s var(--ennu-ease-in-out) infinite;
    border-radius: 4px;
}

@keyframes ennuSkeleton {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton Variants */
.ennu-skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.ennu-skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 0.75em;
}

.ennu-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.ennu-skeleton-card {
    height: 200px;
    border-radius: 8px;
}

/* Luxury Spinner */
.ennu-spinner-luxury {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ennu-skeleton-base);
    border-top-color: var(--ennu-success-color);
    border-radius: 50%;
    animation: ennuSpin 0.8s linear infinite;
}

.ennu-spinner-luxury--sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.ennu-spinner-luxury--lg {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

@keyframes ennuSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Dots Loader - Three Dots */
.ennu-loader-dots {
    display: inline-flex;
    gap: 6px;
}

.ennu-loader-dots span {
    width: 8px;
    height: 8px;
    background-color: var(--ennu-success-color);
    border-radius: 50%;
    animation: ennuDotPulse 1.4s var(--ennu-ease-in-out) infinite;
}

.ennu-loader-dots span:nth-child(1) {
    animation-delay: 0s;
}

.ennu-loader-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ennu-loader-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ennuDotPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animated Progress Bar */
.ennu-progress-animated {
    height: 4px;
    background-color: var(--ennu-skeleton-base);
    border-radius: 2px;
    overflow: hidden;
}

.ennu-progress-animated__bar {
    height: 100%;
    background-color: var(--ennu-success-color);
    border-radius: 2px;
    transition: width var(--ennu-duration-normal) var(--ennu-ease-elegant);
}

/* Indeterminate Progress */
.ennu-progress-indeterminate {
    height: 4px;
    background-color: var(--ennu-skeleton-base);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.ennu-progress-indeterminate::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background-color: var(--ennu-success-color);
    border-radius: 2px;
    animation: ennuIndeterminate 1.5s var(--ennu-ease-in-out) infinite;
}

@keyframes ennuIndeterminate {
    0% {
        left: -30%;
    }
    100% {
        left: 100%;
    }
}

/* ==========================================================================
   7. PAGE TRANSITIONS
   ========================================================================== */

/* Page Enter */
.ennu-page-enter {
    animation: ennuPageEnter var(--ennu-duration-page) var(--ennu-ease-elegant) forwards;
}

@keyframes ennuPageEnter {
    from {
        opacity: 0;
        transform: translateY(var(--ennu-distance-sm));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page Exit */
.ennu-page-exit {
    animation: ennuPageExit var(--ennu-duration-page) var(--ennu-ease-in) forwards;
}

@keyframes ennuPageExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(calc(var(--ennu-distance-sm) * -1));
    }
}

/* Page Fade */
.ennu-page-fade-enter {
    animation: ennuFadeIn var(--ennu-duration-page) var(--ennu-ease-out) forwards;
}

.ennu-page-fade-exit {
    animation: ennuFadeOut var(--ennu-duration-page) var(--ennu-ease-in) forwards;
}

/* ==========================================================================
   8. STAGGER ANIMATIONS
   ========================================================================== */

/* Stagger Children - Apply to Parent */
.ennu-stagger-children > * {
    opacity: 0;
    animation: ennuSlideUp var(--ennu-duration-normal) var(--ennu-ease-elegant) forwards;
}

.ennu-stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.ennu-stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.ennu-stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.ennu-stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.ennu-stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.ennu-stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.ennu-stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.ennu-stagger-children > *:nth-child(8) { animation-delay: 350ms; }
.ennu-stagger-children > *:nth-child(9) { animation-delay: 400ms; }
.ennu-stagger-children > *:nth-child(10) { animation-delay: 450ms; }

/* Fast Stagger */
.ennu-stagger-fast > * {
    opacity: 0;
    animation: ennuFadeIn var(--ennu-duration-fast) var(--ennu-ease-out) forwards;
}

.ennu-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }
.ennu-stagger-fast > *:nth-child(2) { animation-delay: 30ms; }
.ennu-stagger-fast > *:nth-child(3) { animation-delay: 60ms; }
.ennu-stagger-fast > *:nth-child(4) { animation-delay: 90ms; }
.ennu-stagger-fast > *:nth-child(5) { animation-delay: 120ms; }

/* ==========================================================================
   9. UTILITY MODIFIERS
   ========================================================================== */

/* Animation Delay Utilities */
.ennu-delay-100 { animation-delay: 100ms; }
.ennu-delay-200 { animation-delay: 200ms; }
.ennu-delay-300 { animation-delay: 300ms; }
.ennu-delay-400 { animation-delay: 400ms; }
.ennu-delay-500 { animation-delay: 500ms; }

/* Animation Fill Mode */
.ennu-fill-forwards { animation-fill-mode: forwards; }
.ennu-fill-backwards { animation-fill-mode: backwards; }
.ennu-fill-both { animation-fill-mode: both; }

/* Animation Play State */
.ennu-paused { animation-play-state: paused; }
.ennu-running { animation-play-state: running; }

/* Initial States for JS-Triggered Animations */
.ennu-initial-hidden {
    opacity: 0;
}

.ennu-initial-below {
    opacity: 0;
    transform: translateY(var(--ennu-distance-md));
}

.ennu-initial-above {
    opacity: 0;
    transform: translateY(calc(var(--ennu-distance-md) * -1));
}

.ennu-initial-scaled {
    opacity: 0;
    transform: scale(0.95);
}

/* ==========================================================================
   10. ACCESSIBILITY - 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;
    }

    /* Maintain visibility for elements that were animating */
    .ennu-anim-fade-in,
    .ennu-anim-slide-up,
    .ennu-anim-slide-down,
    .ennu-anim-scale-in,
    .ennu-anim-blur-in,
    .ennu-anim-slide-in-left,
    .ennu-anim-slide-in-right,
    .ennu-anim-success,
    .ennu-page-enter,
    .ennu-stagger-children > *,
    .ennu-stagger-fast > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* Disable continuous animations */
    .ennu-anim-pulse-subtle,
    .ennu-anim-shimmer,
    .ennu-anim-glow,
    .ennu-skeleton,
    .ennu-spinner-luxury,
    .ennu-loader-dots span,
    .ennu-progress-indeterminate::after {
        animation: none !important;
    }

    /* Static shimmer alternative */
    .ennu-anim-shimmer::after {
        display: none;
    }

    /* Static skeleton */
    .ennu-skeleton {
        background: var(--ennu-skeleton-base);
    }
}

/* ==========================================================================
   11. PRINT STYLES
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}