/* ==========================================================================
   FlatNine — subtle web effects
   Lightweight, dependency-free polish. Everything degrades gracefully:
   - With JS off, reveal targets stay fully visible (base state is only
     applied once effects.js marks the document as ready).
   - Honors prefers-reduced-motion: animations collapse to instant.
   ========================================================================== */

/* ---- Smooth in-page scrolling ------------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* ---- Reveal on scroll ---------------------------------------------------- */
/* Base (hidden) state only kicks in when JS has flagged support, so a slow
   or disabled script never leaves content stranded at opacity 0. */
.fx-ready .fx-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.fx-ready .fx-reveal.fx-in {
    opacity: 1;
    transform: none;
}

/* ---- Card hover lift ----------------------------------------------------- */
.flex-card,
.card {
    transition:
        transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flex-card:hover,
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -18px rgba(20, 20, 30, 0.28);
}

/* Don't lift cards that contain a form being interacted with — keeps inputs
   from drifting under the cursor. */
.flex-card:focus-within {
    transform: none;
}

/* ---- Footer nav: sliding underline -------------------------------------- */
.footer-nav-link {
    position: relative;
    transition: color 0.2s ease;
}

.footer-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ---- Brand logo: gentle nudge on hover ---------------------------------- */
.navbar-brand .switcher-logo {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.navbar-brand:hover .switcher-logo {
    transform: scale(1.03);
}

/* ---- Buttons: soft press ------------------------------------------------- */
.button {
    transition:
        transform 0.12s ease,
        box-shadow 0.28s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.button:active {
    transform: translateY(1px);
}

/* ---- Hero: curtain-wipe entrance + animated gradient emphasis ----------- */
/* Each block is revealed by a mask sliding up (clip-path), staggered so the
   headline arrives first and the buttons follow. h1.fx-hero-title also raises
   specificity so it wins over core.css (.title{...}), loaded after effects.css.
   `both` fill keeps the end (fully visible) state if JS/animation is absent. */
@keyframes fxCurtain {
    from {
        clip-path: inset(0 0 100% 0);
        -webkit-clip-path: inset(0 0 100% 0);
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: none;
    }
}

/* The headline itself has no curtain — only the buttons wipe in. */
.fx-hero-buttons {
    animation: fxCurtain 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

/* The emphasized <i> words carry a bright highlight band that sweeps across a
   brand-red base — continuous, so it's always visible (not just on load).
   !important guarantees the gradient-clipped text isn't re-coloured by core.css. */
h1.fx-hero-title i {
    font-style: italic;
    /* Italic glyphs lean past their box; without this the clipped gradient
       shaves the last character. Pad the right and pull the margin back so
       surrounding word spacing is unchanged. */
    padding-right: 0.12em;
    margin-right: -0.12em;
    background-image: linear-gradient(
        100deg,
        #9b111e 0%,
        #9b111e 35%,
        #ff6b7d 50%,
        #9b111e 65%,
        #9b111e 100%
    ) !important;
    background-size: 250% auto !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: fxShimmer 3.5s linear infinite;
}

@keyframes fxShimmer {
    from {
        background-position: 150% center;
    }
    to {
        background-position: -150% center;
    }
}

/* ---- Marker highlight: sweeps in left → right when scrolled into view ---- */
/* Default state is the FULL highlight, so no-JS / reduced-motion users still
   see it. effects.js adds .fx-ready, which switches it to the animated 0→100%
   sweep, completed once the element enters the viewport (.fx-in). */
.fx-highlight {
    background-image: linear-gradient(
        120deg,
        rgba(255, 225, 0, 0) 0%,
        rgba(255, 225, 0, 0.75) 8%,
        rgba(255, 225, 0, 0.35) 100%
    );
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;
}

.fx-ready .fx-highlight {
    background-size: 0% 100%;
    transition: background-size 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fx-ready .fx-highlight.fx-in {
    background-size: 100% 100%;
}

/* ---- Reduced motion: opt everyone out ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .fx-ready .fx-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .flex-card,
    .card,
    .button,
    .navbar-brand .switcher-logo,
    .footer-nav-link::after {
        transition: none;
    }
    .flex-card:hover,
    .card:hover,
    .button:active,
    .navbar-brand:hover .switcher-logo {
        transform: none;
    }
    /* Keep the gradient color on the hero words, just stop the motion. */
    .fx-hero-buttons {
        animation: none;
    }
    h1.fx-hero-title i {
        animation: none;
        background-position: 0 center;
    }
}