/* =========================================================
   Refineder — Scroll Reveal Animation System
   Works with reveal.js (IntersectionObserver based)
   Attribute API:
     data-reveal                  -> default "fade-up"
     data-reveal="fade-left"      -> named animation
     data-reveal-delay="150"      -> ms delay (manual)
     data-reveal-duration="800"   -> ms duration override
     data-reveal-group            -> auto-stagger [data-reveal] children
     data-reveal-once="false"     -> re-animate every time it enters (default: true)

   IMPORTANT: the hidden initial state is gated behind
   `html.js-reveal-ready`. That class is added by an inline
   head script the moment JS runs. If JS is disabled or fails,
   the elements stay fully visible — no broken / blank page.
   ========================================================= */

/* Default base transition (only applies once JS is ready) */
html.js-reveal-ready [data-reveal] {
    --reveal-distance: 22px;
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    transition-duration: var(--reveal-duration, 0.7s);
}

/* ! default animation = fade-up */
html.js-reveal-ready [data-reveal]:not([data-reveal-animation]) {
    transform: translateY(var(--reveal-distance));
}

/* ! Named animation variants */
html.js-reveal-ready [data-reveal-animation="fade"] {
    transform: none;
}

html.js-reveal-ready [data-reveal-animation="fade-up"] {
    transform: translateY(var(--reveal-distance));
}

html.js-reveal-ready [data-reveal-animation="fade-down"] {
    transform: translateY(calc(var(--reveal-distance) * -1));
}

html.js-reveal-ready [data-reveal-animation="fade-left"] {
    transform: translateX(calc(var(--reveal-distance) * -1));
}

html.js-reveal-ready [data-reveal-animation="fade-right"] {
    transform: translateX(var(--reveal-distance));
}

html.js-reveal-ready [data-reveal-animation="zoom-in"] {
    transform: scale(0.94);
}

html.js-reveal-ready [data-reveal-animation="zoom-out"] {
    transform: scale(1.06);
}

html.js-reveal-ready [data-reveal-animation="blur"] {
    filter: blur(12px);
    transform: translateY(calc(var(--reveal-distance) * 0.5));
}

html.js-reveal-ready [data-reveal-animation="flip-up"] {
    transform: perspective(1200px) rotateX(14deg) translateY(var(--reveal-distance));
    transform-origin: top center;
}

html.js-reveal-ready [data-reveal-animation="flip-down"] {
    transform: perspective(1200px) rotateX(-14deg) translateY(calc(var(--reveal-distance) * -1));
    transform-origin: bottom center;
}

html.js-reveal-ready [data-reveal-animation="rotate"] {
    transform: rotate(-3deg) translateY(var(--reveal-distance));
}

/* ! Visible (revealed) state — must be scoped with html.js-reveal-ready
   so its specificity matches/beats the hidden initial state above. */
html.js-reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ! RTL: flip horizontal directions */
[dir="rtl"].js-reveal-ready [data-reveal-animation="fade-left"] {
    transform: translateX(var(--reveal-distance));
}
[dir="rtl"].js-reveal-ready [data-reveal-animation="fade-right"] {
    transform: translateX(calc(var(--reveal-distance) * -1));
}

/* =========================================================
   Optional: subtle floating / looping ambient animations
   for hero illustrations & decorative elements
   ========================================================= */
.reveal-float {
    animation: reveal-float 6s ease-in-out infinite;
}

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

.reveal-float-slow {
    animation: reveal-float 9s ease-in-out infinite;
}

/* Soft pulsing glow for decorative blobs/icons */
.reveal-pulse-glow {
    animation: reveal-pulse-glow 4s ease-in-out infinite;
}

@keyframes reveal-pulse-glow {
    0%, 100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.06);
    }
}

/* =========================================================
   Card hover lift — tasteful elevation for grid items
   Apply by adding class `reveal-card-lift` to any card
   ========================================================= */
.reveal-card-lift {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease;
}

.reveal-card-lift:hover,
.reveal-card-lift:focus-within {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--color-main-primary) 45%, var(--border));
    box-shadow:
        0 18px 38px -22px color-mix(in srgb, var(--color-main-primary) 55%, transparent),
        0 8px 18px -16px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   Section divider reveal — for headings + accent line
   ========================================================= */
.reveal-line {
    position: relative;
    overflow: hidden;
}

.reveal-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--color-main-primary), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

html.js-reveal-ready [data-reveal].is-revealed.reveal-line::after,
html.js-reveal-ready .is-revealed .reveal-line::after {
    transform: translateX(100%);
}

/* =========================================================
   Respect reduced motion — disable all reveal transforms
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal].is-revealed,
    [data-reveal-animation] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .reveal-float,
    .reveal-float-slow,
    .reveal-pulse-glow,
    .reveal-line::after {
        animation: none !important;
        transform: none !important;
    }

    .reveal-card-lift:hover,
    .reveal-card-lift:focus-within {
        transform: none !important;
    }
}