/* Loaded AFTER style.css. Overrides only; nothing in style.css needs to be edited for these. */

/* 1. Screen-reader-only text (used for descriptive link text) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 2. Bootstrap Icons: swap instead of block, so icons never delay text rendering */
@font-face {
    font-display: swap;
    font-family: "bootstrap-icons";
    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2");
}

/* 3. Hero: CSS-only entrance, so the H1 paints immediately and does not wait for JS */
.hero h1, .hero p, .hero-actions, .hero-stats { animation: heroIn .7s var(--ease-out) both; }
.hero p { animation-delay: .08s; }
.hero-actions { animation-delay: .16s; }
.hero-stats { animation-delay: .24s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero p, .hero-actions, .hero-stats { animation: none; }
}

/* 4. Hero slides: no blur filter (the gradient overlay already darkens them),
      taller container so parallax never exposes a gap */
.hero-slides { inset: -100px 0 0 0; }
.hero-slide { filter: none; }
@media (max-width: 768px) {
    .hero-slide.is-active { animation: none; }
}

/* 5. Reveal system: content is only hidden when JS is running (.js is set in <head>),
      so a JS failure can never leave the page blank */
[data-reveal], .swoosh { opacity: 1; transform: none; }
.mask-reveal { clip-path: none; }
.split-word { opacity: 1; transform: none; }
.split-line { display: inline-block; }

.js [data-reveal] { opacity: 0; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-reveal="up"] { transform: translateY(36px); }
.js [data-reveal="left"] { transform: translateX(-36px); }
.js [data-reveal="right"] { transform: translateX(36px); }
.js [data-reveal="zoom"] { transform: scale(.9); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-visible { opacity: 1; transform: none !important; }

.js .swoosh { transform: scaleX(0.6); opacity: 0; transition: transform 1s var(--ease-out), opacity 1s var(--ease-out); }
.js .swoosh.is-visible { transform: scaleX(1); opacity: 1; }

.js .mask-reveal { clip-path: inset(0 0 100% 0 round var(--radius) var(--radius) 0 0); transition: clip-path 1s var(--ease-out); }
.js .mask-reveal.is-visible { clip-path: inset(0 0 0% 0 round var(--radius)); }

.js .split-word { transform: translateY(110%); opacity: 0; }
.js .split-word.is-visible { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal], .js .swoosh, .js .split-word { opacity: 1; transform: none !important; transition: none; }
    .js .mask-reveal { clip-path: none; }
}

/* 6. Card images are now real <img> elements */
.card > img.card-media { display: block; width: 100%; height: 200px; object-fit: cover; }