@use 'globals' as *;

// =============================================================================
// Shared Animation System (SCSS)
// =============================================================================
// Single source of truth for every admin @keyframes declaration, plus the
// reusable motion utility classes and the global reduced-motion rule.
// Component/page partials MUST reference these keyframes/classes instead of
// declaring their own.
// =============================================================================

// =============================================================================
//   Shared Slide-In Keyframes
// =============================================================================

@keyframes presszone-international-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes presszone-international-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes presszone-international-slide-in-top {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes presszone-international-slide-in-bottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// =============================================================================
// Stagger Delay Utilities
// =============================================================================

@for $i from 0 through 10 {
    .presszone-international-stagger-#{$i} {
        animation-delay: #{$i * $presszone-international-stagger};
    }
}

// =============================================================================
//   Shared Fade Keyframes
// =============================================================================

@keyframes presszone-international-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

// =============================================================================
//   Shared Scale Keyframes
// =============================================================================

@keyframes presszone-international-scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes presszone-international-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

// =============================================================================
//   Shared Rotate Keyframes
// =============================================================================

@keyframes presszone-international-rotate-in {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes presszone-international-rotate-out {
    from {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: rotate(180deg) scale(0.8);
    }
}

// =============================================================================
//   Shared Bounce Keyframes
// =============================================================================

@keyframes presszone-international-bounce-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(10px);
    }
    75% {
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes presszone-international-bounce-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    25% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(-10px);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

// =============================================================================
//   Empty State Float Keyframe (migrated from _dashboard-shared.scss)
// =============================================================================

@keyframes presszone-international-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

// =============================================================================
//   Tooltip Fade Keyframe (migrated from _forms.scss)
// =============================================================================

@keyframes presszone-international-tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// =============================================================================
//   Tab Panel Fade Keyframe (migrated from components/_tabs.scss)
// =============================================================================

@keyframes presszone-international-tab-panel-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// =============================================================================
//   Modal Keyframes (migrated from _utilities.scss)
// =============================================================================

@keyframes presszone-international-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes presszone-international-modal-premium-in {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes presszone-international-modal-premium-out {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

@keyframes presszone-international-success-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@keyframes presszone-international-error-shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-6px);
    }
    40%, 80% {
        transform: translateX(6px);
    }
}

// =============================================================================
//   Progress Bar Keyframes (migrated from components/_progress-bar.scss)
// =============================================================================
// Semantic progress motion is exempt from the transform/opacity-only rule:
// these animate background-position/transform/box-shadow to communicate
// determinate/indeterminate/complete states.

@keyframes presszone-international-progress-stripes {
    0% {
        background-position: 20px 0;
    }
    100% {
        background-position: 0 0;
    }
}

@keyframes presszone-international-progress-indeterminate {
    0% {
        transform: translateX(-100%) scaleX(0.3);
    }
    50% {
        transform: translateX(0) scaleX(0.5);
    }
    100% {
        transform: translateX(100%) scaleX(0.3);
    }
}

@keyframes presszone-international-progress-complete {
    0% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                    0 0 8px rgba(0, 163, 42, 0.4);
    }
    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

// =============================================================================
//   Skeleton Shimmer Keyframe (migrated from components/_flag-picker.scss)
// =============================================================================

@keyframes presszone-international-skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

// =============================================================================
//   Reusable Animation Utility Classes
// =============================================================================
// Apply directly to elements that need a one-shot entrance, a crossfade
// swap, or a continuous loading shimmer instead of a component-local
// keyframe.

.presszone-international-fade-in {
    animation: presszone-international-fade-in $presszone-international-duration-base $presszone-international-ease-in-out;
}

.presszone-international-slide-up {
    animation: presszone-international-slide-in-bottom $presszone-international-duration-base $presszone-international-ease-in-out;
}

.presszone-international-crossfade {
    transition: opacity $presszone-international-duration-base $presszone-international-ease-in-out;
}

.presszone-international-skeleton-shimmer {
    background-image: linear-gradient(
        90deg,
        $presszone-international-surface-2 0%,
        $presszone-international-surface-3 50%,
        $presszone-international-surface-2 100%
    );
    background-size: 200% 100%;
    animation: presszone-international-skeleton-shimmer 1.5s $presszone-international-ease-in-out infinite;

}

// =============================================================================
//   Global Reduced-Motion Rule
// =============================================================================
// Disables the nonessential entrance/loop motion declared in this file.
// Semantic progress-bar motion (stripes/indeterminate/complete) is left
// untouched by design; components/_progress-bar.scss already disables it
// separately under its own accessibility block.

@include reduced-motion {
    .presszone-international-fade-in,
    .presszone-international-slide-up,
    .presszone-international-skeleton-shimmer,
    [class*="presszone-international-stagger-"] {
        animation: none !important;
    }

    .presszone-international-crossfade {
        transition: none !important;
    }
}


@keyframes presszone-international-spin {
    to {
        transform: rotate(360deg);
    }
}


@keyframes presszone-international-tab-slide-in-from-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes presszone-international-tab-slide-in-from-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes presszone-international-tab-slide-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}


@keyframes presszone-international-tab-slide-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}


@keyframes ipz-badge-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}


@keyframes presszone-international-region-revalidate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}


@keyframes mpzToastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


@keyframes mpzToastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}


@keyframes ghostFloat {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}


@keyframes placeholderPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}


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


@keyframes ipz-spin {
    to {
        transform: rotate(360deg);
    }
}


@keyframes ipz-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes ipz-progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}


@keyframes ipz-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// Settings shared states use these canonical names.
@keyframes presszone-international-slide-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes presszone-international-pop-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presszone-international-slide-in-down {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}