/* ==========================================================================
   Atlas Security — Animations
   Keyframes, scroll-reveal utilities and motion preferences.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Keyframes
   -------------------------------------------------------------------------- */
@keyframes atlas-spin {
    to { transform: rotate(360deg); }
}

@keyframes atlas-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 9px transparent; opacity: .75; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

@keyframes atlas-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes atlas-fade-down {
    from { opacity: 0; transform: translateY(-22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes atlas-fade-left {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes atlas-fade-right {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes atlas-scale-in {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes atlas-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

@keyframes atlas-shield {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(1.5deg); }
}

@keyframes atlas-scan {
    0%   { transform: translateY(-10%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(180%); opacity: 0; }
}

@keyframes atlas-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes atlas-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@keyframes atlas-ring {
    0%   { transform: scale(.85); opacity: .6; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes atlas-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* --------------------------------------------------------------------------
   2. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transition: opacity .85s var(--atlas-ease-out), transform .85s var(--atlas-ease-out);
    will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(34px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(-38px); }
[data-reveal="right"] { transform: translateX(38px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Stagger helpers */
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal-delay="6"] { transition-delay: .48s; }

/* --------------------------------------------------------------------------
   3. Utility animation classes
   -------------------------------------------------------------------------- */
.anim-float      { animation: atlas-float 6s ease-in-out infinite; }
.anim-shield     { animation: atlas-shield 7s ease-in-out infinite; }
.anim-fade-up    { animation: atlas-fade-up .8s var(--atlas-ease-out) both; }
.anim-scale-in   { animation: atlas-scale-in .7s var(--atlas-ease-out) both; }
.anim-fade-left  { animation: atlas-fade-left .8s var(--atlas-ease-out) both; }
.anim-fade-right { animation: atlas-fade-right .8s var(--atlas-ease-out) both; }
.anim-blink      { animation: atlas-blink 1.8s ease-in-out infinite; }

.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }
.delay-6 { animation-delay: .6s; }

/* --------------------------------------------------------------------------
   4. Marquee (trust strip)
   -------------------------------------------------------------------------- */
.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    gap: 64px;
    animation: atlas-marquee 32s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    white-space: nowrap;
}

.marquee__item i {
    color: var(--atlas-primary);
}

/* --------------------------------------------------------------------------
   5. Skeleton loading
   -------------------------------------------------------------------------- */
.skeleton {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--atlas-surface) 25%, var(--atlas-surface-2) 37%, var(--atlas-surface) 63%);
    background-size: 400% 100%;
    animation: atlas-shimmer 1.4s ease infinite;
}

/* --------------------------------------------------------------------------
   6. Preloader
   -------------------------------------------------------------------------- */
.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--atlas-bg);
    transition: opacity .6s var(--atlas-ease), visibility .6s;
}

.site-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader__inner {
    display: grid;
    justify-items: center;
    gap: 22px;
}

.preloader__mark {
    width: 72px;
    height: 72px;
    animation: atlas-shield 2.4s ease-in-out infinite;
}

.preloader__bar {
    width: 190px;
    height: 3px;
    border-radius: 99px;
    background: var(--atlas-surface-2);
    overflow: hidden;
}

.preloader__bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 99px;
    background: var(--atlas-gradient);
    animation: atlas-loading-bar 1.15s var(--atlas-ease) infinite;
}

@keyframes atlas-loading-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(280%); }
}

.preloader__text {
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}

/* --------------------------------------------------------------------------
   7. Page transition (inner pages)
   -------------------------------------------------------------------------- */
.page-enter {
    animation: atlas-fade-up .7s var(--atlas-ease-out) both;
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .marquee__track {
        animation: none !important;
    }
}