/* ==========================================================================
   CinderTek - Animations
   Scroll-driven and entrance motion is owned by GSAP/ScrollTrigger in JS.
   This file holds the Lenis integration, a small keyframe set for
   CSS-only micro-interactions, and reduced-motion handling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lenis smooth scroll (required integration styles)
   -------------------------------------------------------------------------- */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* Native smooth scrolling only as a fallback when Lenis is not running. */
@media (prefers-reduced-motion: no-preference) {
    html:not(.lenis) {
        scroll-behavior: smooth;
    }
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

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

@keyframes ct-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ct-draw-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.u-fade-in {
    animation: ct-fade-in var(--duration-slow) var(--ease-out) both;
}

.u-rise {
    animation: ct-rise var(--duration-slow) var(--ease-out) both;
}

.u-draw-x {
    transform-origin: left;
    animation: ct-draw-x var(--duration-slower) var(--ease-in-out) both;
}

/* Drawn border line. animations.js adds .has-line and tweens --line (0-1)
   on [data-line] elements; the element's own top border is hidden and an
   overlay line in the same place scales in from the left. Set --line-color
   where the border is not the strong hairline. */
.has-line {
    position: relative;
    border-top-color: transparent !important;
}

.has-line::before {
    content: "";
    position: absolute;
    top: calc(var(--border-hairline) * -1);
    left: 0;
    right: 0;
    height: var(--border-hairline);
    background-color: var(--line-color, var(--color-border-strong));
    transform: scaleX(var(--line, 1));
    transform-origin: left center;
    pointer-events: none;
}

.u-overflow-clip {
    overflow: clip;
}

/* --------------------------------------------------------------------------
   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;
    }
}