/* =========================================================
   ZANCK — ANIMATIONS
   File: assets/css/animations.css

   Purpose:
   Global motion system for the ZANCK enterprise website.

   Principles:
   - Premium
   - Minimal
   - Corporate
   - Fast and intentional
   - No excessive "AI-style" motion
   - Accessibility friendly

   Dependencies:
   - variables.css
   - reset.css
   - typography.css
   - layout.css
   - components.css
   ========================================================= */


/* =========================================================
   1. GLOBAL ANIMATION VARIABLES
   ========================================================= */

:root {
    --animation-fast: 180ms;
    --animation-base: 320ms;
    --animation-medium: 500ms;
    --animation-slow: 700ms;
    --animation-slower: 1000ms;

    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-linear: linear;
}


/* =========================================================
   2. KEYFRAMES
   ========================================================= */


/* ---------------------------------------------------------
   Fade
   --------------------------------------------------------- */

@keyframes zanck-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   Fade Up
   --------------------------------------------------------- */

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

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


/* ---------------------------------------------------------
   Fade Down
   --------------------------------------------------------- */

@keyframes zanck-fade-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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


/* ---------------------------------------------------------
   Fade Left
   --------------------------------------------------------- */

@keyframes zanck-fade-left {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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


/* ---------------------------------------------------------
   Fade Right
   --------------------------------------------------------- */

@keyframes zanck-fade-right {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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


/* ---------------------------------------------------------
   Scale In
   --------------------------------------------------------- */

@keyframes zanck-scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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


/* ---------------------------------------------------------
   Scale Up
   --------------------------------------------------------- */

@keyframes zanck-scale-up {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.035);
    }
}


/* ---------------------------------------------------------
   Reveal From Bottom
   --------------------------------------------------------- */

@keyframes zanck-reveal-up {
    from {
        clip-path: inset(100% 0 0 0);
        transform: translateY(20px);
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   Reveal From Left
   --------------------------------------------------------- */

@keyframes zanck-reveal-left {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}


/* ---------------------------------------------------------
   Reveal From Right
   --------------------------------------------------------- */

@keyframes zanck-reveal-right {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}


/* ---------------------------------------------------------
   Slide Up
   --------------------------------------------------------- */

@keyframes zanck-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   Slide Down
   --------------------------------------------------------- */

@keyframes zanck-slide-down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   Menu Slide
   --------------------------------------------------------- */

@keyframes zanck-menu-enter {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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


/* ---------------------------------------------------------
   Line Reveal
   --------------------------------------------------------- */

@keyframes zanck-line-reveal {
    from {
        transform: scaleX(0);
        transform-origin: left center;
    }

    to {
        transform: scaleX(1);
        transform-origin: left center;
    }
}


/* ---------------------------------------------------------
   Subtle Pulse
   --------------------------------------------------------- */

@keyframes zanck-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }
}


/* ---------------------------------------------------------
   Soft Glow
   --------------------------------------------------------- */

@keyframes zanck-glow {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.04);
    }
}


/* ---------------------------------------------------------
   Loading Spinner
   --------------------------------------------------------- */

@keyframes zanck-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ---------------------------------------------------------
   Shimmer
   --------------------------------------------------------- */

@keyframes zanck-shimmer {
    from {
        background-position:
            -1000px 0;
    }

    to {
        background-position:
            1000px 0;
    }
}


/* =========================================================
   3. PAGE LOAD ANIMATION
   ========================================================= */

.page-load {
    animation:
        zanck-fade-in
        var(--animation-medium)
        var(--ease-standard)
        both;
}


/* =========================================================
   4. HERO ANIMATIONS
   ========================================================= */

.hero-animate {
    opacity: 0;

    animation:
        zanck-fade-up
        var(--animation-slow)
        var(--ease-standard)
        forwards;
}

.hero-animate--delay-1 {
    animation-delay: 100ms;
}

.hero-animate--delay-2 {
    animation-delay: 200ms;
}

.hero-animate--delay-3 {
    animation-delay: 300ms;
}

.hero-animate--delay-4 {
    animation-delay: 400ms;
}

.hero-animate--delay-5 {
    animation-delay: 500ms;
}


/* =========================================================
   5. SCROLL REVEAL SYSTEM
   ========================================================= */


/*
   JavaScript can add .is-visible to these elements when they
   enter the viewport.

   Example:

   <div class="reveal reveal--up">
       ...
   </div>
*/

.reveal {
    opacity: 0;
    will-change: opacity, transform;
}

.reveal--up {
    transform: translateY(32px);
}

.reveal--down {
    transform: translateY(-24px);
}

.reveal--left {
    transform: translateX(32px);
}

.reveal--right {
    transform: translateX(-32px);
}

.reveal--scale {
    transform: scale(0.96);
}

.reveal--fade {
    transform: none;
}

.reveal.is-visible {
    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition:
        opacity var(--animation-slow) var(--ease-standard),
        transform var(--animation-slow) var(--ease-standard);
}


/* =========================================================
   6. REVEAL DELAYS
   ========================================================= */

.reveal-delay-1 {
    transition-delay: 80ms;
}

.reveal-delay-2 {
    transition-delay: 160ms;
}

.reveal-delay-3 {
    transition-delay: 240ms;
}

.reveal-delay-4 {
    transition-delay: 320ms;
}

.reveal-delay-5 {
    transition-delay: 400ms;
}

.reveal-delay-6 {
    transition-delay: 480ms;
}


/* =========================================================
   7. STAGGERED CHILDREN
   ========================================================= */

.stagger > * {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity var(--animation-medium) var(--ease-standard),
        transform var(--animation-medium) var(--ease-standard);
}

.stagger.is-visible > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 50ms;
}

.stagger.is-visible > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 100ms;
}

.stagger.is-visible > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 150ms;
}

.stagger.is-visible > *:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 200ms;
}

.stagger.is-visible > *:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 250ms;
}

.stagger.is-visible > *:nth-child(6) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
}

.stagger.is-visible > *:nth-child(7) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 350ms;
}

.stagger.is-visible > *:nth-child(8) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 400ms;
}


/* =========================================================
   8. CARD HOVER MOTION
   ========================================================= */

.motion-card {
    transition:
        transform var(--animation-base) var(--ease-standard),
        box-shadow var(--animation-base) var(--ease-standard),
        border-color var(--animation-base) var(--ease-standard);
}

.motion-card:hover {
    transform: translateY(-5px);
}


/* =========================================================
   9. IMAGE HOVER
   ========================================================= */

.motion-image {
    overflow: hidden;
}

.motion-image img {
    transition:
        transform var(--animation-slower) var(--ease-smooth);
}

.motion-image:hover img {
    transform: scale(1.035);
}


/* =========================================================
   10. LINK ARROW MOTION
   ========================================================= */

.motion-arrow {
    display: inline-flex;

    align-items: center;
    gap: 8px;
}

.motion-arrow img,
.motion-arrow svg {
    transition:
        transform var(--animation-base) var(--ease-standard);
}

.motion-arrow:hover img,
.motion-arrow:hover svg {
    transform: translate(4px, -2px);
}


/* =========================================================
   11. UNDERLINE REVEAL
   ========================================================= */

.motion-underline {
    position: relative;
}

.motion-underline::after {
    position: absolute;

    right: 0;
    bottom: -4px;
    left: 0;

    height: 1px;

    content: "";

    background: currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform var(--animation-base) var(--ease-standard);
}

.motion-underline:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


/* =========================================================
   12. IMAGE MASK REVEAL
   ========================================================= */

.image-reveal {
    overflow: hidden;

    clip-path:
        inset(0 100% 0 0);

    transition:
        clip-path var(--animation-slower) var(--ease-smooth);
}

.image-reveal.is-visible {
    clip-path:
        inset(0 0 0 0);
}


/* =========================================================
   13. TEXT REVEAL
   ========================================================= */

.text-reveal {
    overflow: hidden;
}

.text-reveal > span {
    display: inline-block;

    opacity: 0;

    transform: translateY(100%);

    transition:
        opacity var(--animation-medium) var(--ease-standard),
        transform var(--animation-medium) var(--ease-standard);
}

.text-reveal.is-visible > span {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   14. NUMBER / STAT ANIMATION
   ========================================================= */

.stat-animate {
    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity var(--animation-medium) var(--ease-standard),
        transform var(--animation-medium) var(--ease-standard);
}

.stat-animate.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   15. PAGE TRANSITION
   ========================================================= */

.page-transition {
    position: fixed;

    inset: 0;

    z-index: 9999;

    pointer-events: none;

    background:
        var(--color-background-dark);

    transform:
        scaleY(0);

    transform-origin:
        bottom center;
}

.page-transition.is-active {
    animation:
        zanck-page-transition
        650ms
        var(--ease-smooth)
        forwards;
}

@keyframes zanck-page-transition {
    0% {
        transform:
            scaleY(0);

        transform-origin:
            bottom center;
    }

    45% {
        transform:
            scaleY(1);

        transform-origin:
            bottom center;
    }

    55% {
        transform:
            scaleY(1);

        transform-origin:
            top center;
    }

    100% {
        transform:
            scaleY(0);

        transform-origin:
            top center;
    }
}


/* =========================================================
   16. HEADER SCROLL MOTION
   ========================================================= */

.site-header {
    transition:
        background-color var(--animation-base) var(--ease-standard),
        box-shadow var(--animation-base) var(--ease-standard),
        transform var(--animation-base) var(--ease-standard);
}

.site-header.is-scrolled {
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   17. MEGA MENU MOTION
   ========================================================= */

.mega-menu {
    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px);

    transition:
        opacity var(--animation-base) var(--ease-standard),
        visibility var(--animation-base) var(--ease-standard),
        transform var(--animation-base) var(--ease-standard);
}

.mega-menu.is-open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* =========================================================
   18. MOBILE MENU MOTION
   ========================================================= */

.mobile-menu {
    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-10px);

    transition:
        opacity var(--animation-base) var(--ease-standard),
        visibility var(--animation-base) var(--ease-standard),
        transform var(--animation-base) var(--ease-standard);
}

.mobile-menu.is-open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* =========================================================
   19. MENU ICON
   ========================================================= */

.menu-icon {
    position: relative;

    width: 24px;
    height: 18px;
}

.menu-icon span {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1.5px;

    background:
        currentColor;

    transition:
        transform var(--animation-base) var(--ease-standard),
        opacity var(--animation-base) var(--ease-standard);
}

.menu-icon span:nth-child(1) {
    top: 0;
}

.menu-icon span:nth-child(2) {
    top: 8px;
}

.menu-icon span:nth-child(3) {
    bottom: 0;
}

.menu-toggle.is-active .menu-icon span:nth-child(1) {
    transform:
        translateY(8px)
        rotate(45deg);
}

.menu-toggle.is-active .menu-icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .menu-icon span:nth-child(3) {
    transform:
        translateY(-8px)
        rotate(-45deg);
}


/* =========================================================
   20. ACCORDION MOTION
   ========================================================= */

.accordion__content {
    overflow: hidden;

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows var(--animation-medium) var(--ease-standard);
}

.accordion__item.is-open
.accordion__content {
    grid-template-rows: 1fr;
}

.accordion__content-inner {
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   21. MODAL MOTION
   ========================================================= */

.modal {
    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--animation-base) var(--ease-standard),
        visibility var(--animation-base) var(--ease-standard);
}

.modal.is-open {
    opacity: 1;

    visibility: visible;
}

.modal__dialog {
    opacity: 0;

    transform:
        translateY(20px)
        scale(0.98);

    transition:
        opacity var(--animation-medium) var(--ease-standard),
        transform var(--animation-medium) var(--ease-standard);
}

.modal.is-open .modal__dialog {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   22. LOADING
   ========================================================= */

.is-loading {
    position: relative;

    pointer-events: none;
}

.is-loading::after {
    width: 18px;
    height: 18px;

    margin-left: 8px;

    content: "";

    border:
        2px solid currentColor;

    border-right-color:
        transparent;

    border-radius:
        50%;

    animation:
        zanck-spin
        700ms
        linear
        infinite;
}


/* =========================================================
   23. SKELETON LOADING
   ========================================================= */

.skeleton {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.04) 25%,
            rgba(0, 0, 0, 0.08) 37%,
            rgba(0, 0, 0, 0.04) 63%
        );

    background-size:
        1000px 100%;

    animation:
        zanck-shimmer
        1.8s
        linear
        infinite;

    border-radius:
        var(--radius-sm);
}


/* =========================================================
   24. FLOATING DECORATIVE ELEMENT
   ========================================================= */

.float-slow {
    animation:
        zanck-float
        7s
        ease-in-out
        infinite;
}

@keyframes zanck-float {
    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


/* =========================================================
   25. SUBTLE GLOW
   ========================================================= */

.glow-pulse {
    animation:
        zanck-glow
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   26. MARQUEE
   ========================================================= */

.marquee {
    display: flex;

    width: max-content;

    animation:
        zanck-marquee
        30s
        linear
        infinite;
}

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

@keyframes zanck-marquee {
    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }
}


/* =========================================================
   27. CURSOR FOLLOW / MAGNETIC ELEMENT
   ========================================================= */

.magnetic {
    transition:
        transform var(--animation-base) var(--ease-standard);
}


/* =========================================================
   28. FOCUS MOTION
   ========================================================= */

.focus-motion {
    transition:
        transform var(--animation-fast) var(--ease-standard),
        box-shadow var(--animation-fast) var(--ease-standard);
}

.focus-motion:focus-visible {
    transform:
        translateY(-1px);

    box-shadow:
        var(--focus-ring);
}


/* =========================================================
   29. HOVER LIFT
   ========================================================= */

.hover-lift {
    transition:
        transform var(--animation-base) var(--ease-standard);
}

.hover-lift:hover {
    transform:
        translateY(-4px);
}


/* =========================================================
   30. HOVER SCALE
   ========================================================= */

.hover-scale {
    transition:
        transform var(--animation-base) var(--ease-standard);
}

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


/* =========================================================
   31. HOVER ROTATE
   ========================================================= */

.hover-rotate {
    transition:
        transform var(--animation-base) var(--ease-standard);
}

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


/* =========================================================
   32. HOVER BORDER
   ========================================================= */

.hover-border {
    transition:
        border-color var(--animation-base) var(--ease-standard),
        box-shadow var(--animation-base) var(--ease-standard);
}

.hover-border:hover {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 1px var(--color-primary);
}


/* =========================================================
   33. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal--up,
    .reveal--down,
    .reveal--left,
    .reveal--right,
    .reveal--scale,
    .reveal--fade,
    .stagger > *,
    .stat-animate {
        opacity: 1 !important;

        transform: none !important;
    }

    .image-reveal {
        clip-path: none !important;
    }

    .text-reveal > span {
        opacity: 1 !important;

        transform: none !important;
    }

    .marquee {
        animation: none !important;
    }

    .float-slow,
    .glow-pulse {
        animation: none !important;
    }
}


/* =========================================================
   END OF ZANCK ANIMATIONS
   ========================================================= */