/* Future Self — Scroll-reveal animation primitives
   ──────────────────────────────────────────────────
   Driven by Intersection Observer (assets/js/animations.js). The CSS handles
   the visual transitions; JS toggles the [data-revealed="1"] attribute.
   We keep things CSS-driven so initial paint is fast and the page is usable
   the instant HTML lands. */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 700ms var(--fs-ease-out),
        transform 700ms var(--fs-ease-out),
        filter 700ms var(--fs-ease-out);
    will-change: transform, opacity;
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal="blur"]  { filter: blur(8px); opacity: 0; }

[data-revealed="1"] {
    opacity: 1 !important;
    transform: none !important;
    filter: blur(0) !important;
}

/* Staggered children */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--fs-ease-out), transform 600ms var(--fs-ease-out);
}
[data-reveal-stagger][data-revealed="1"] > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 80ms);
}

/* Hover-glow utility */
[data-hoverglow] {
    position: relative;
}
[data-hoverglow]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s var(--fs-ease-out);
    background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 50%), var(--fs-glow-cyan), transparent 70%);
}
[data-hoverglow]:hover::after { opacity: 1; }

/* Marquee / floating text */
@keyframes fsFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
}

@keyframes fsTilt {
    0%,100% { transform: rotate(0); }
    50%     { transform: rotate(.5deg); }
}

/* Underline grow (links) */
.fs-underline { background-image: linear-gradient(var(--fs-brand-purple), var(--fs-brand-purple)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .4s var(--fs-ease-out); }
.fs-underline:hover { background-size: 100% 2px; }

/* Scroll-driven parallax via custom property (set by JS) */
[data-parallax] {
    transform: translate3d(0, var(--parallax-y, 0), 0);
    will-change: transform;
}

/* Mouse-tilt cards */
[data-tilt] {
    transform-style: preserve-3d;
    transition: transform .25s var(--fs-ease-out);
    will-change: transform;
}

/* Pop in for keyboard focus */
:focus-visible {
    outline: 3px solid var(--fs-brand-cyan);
    outline-offset: 3px;
    border-radius: var(--fs-radius-sm);
}

/* Page-progress bar pinned to the top of viewport */
#fs-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--fs-brand-purple), var(--fs-brand-cyan), var(--fs-brand-aqua));
    z-index: var(--fs-z-toast); pointer-events: none;
    box-shadow: 0 0 12px var(--fs-glow-purple);
    transition: width .15s linear, opacity .25s;
}

/* Toast */
.fs-toast {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--fs-bg-elev); color: var(--fs-fg);
    border: 1px solid var(--fs-border); border-left: 3px solid var(--fs-brand-purple);
    border-radius: var(--fs-radius-md); padding: 12px 18px;
    box-shadow: var(--fs-shadow-md);
    opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: var(--fs-z-toast);
    font-size: var(--fs-step--1); max-width: 90vw;
}
.fs-toast[data-show="1"] { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Reduce motion — disable transforms / blur, keep state changes visible */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
    .fs-grad { animation: none; }
    #fs-progress { display: none; }
}