/* ==========================================================================
   OBS Architect — shared site styles
   Decorative layers used by the home hero and the inner-page header bands.
   Loaded on every page; Tailwind handles everything else.
   ========================================================================== */

/* --- Sticky header --------------------------------------------------------
   The header is injected into #header-inject, and a sticky element can only
   travel within its own parent's box. That wrapper is exactly header-height,
   so sticking it on the <header> did nothing — it scrolled away immediately
   and left a transparent gap above the work page's sticky filter bar.
   Sticking the wrapper itself is what actually holds it in place. */
#header-inject {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* --- Blueprint grid -------------------------------------------------------
   Coarse 96px cells over a fine 24px mesh. The base class draws the pattern;
   the modifiers only change how it fades out. */
.bp-grid {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .10) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

/* Tall home hero: fades out radially around the headline */
.bp-grid--hero {
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 30% 35%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 75% at 30% 35%, #000 30%, transparent 100%);
}

/* Short inner-page band: fades down and to the right so the title stays clean */
.bp-grid--band {
    -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
    mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
}

/* --- Light sources -------------------------------------------------------- */
.glow-hero {
    background:
        radial-gradient(60rem 40rem at 78% 22%, rgba(96, 165, 250, .30), transparent 65%),
        radial-gradient(48rem 34rem at 8% 88%, rgba(15, 23, 42, .55), transparent 70%);
}

.glow-band {
    background:
        radial-gradient(40rem 22rem at 88% 15%, rgba(96, 165, 250, .28), transparent 70%),
        radial-gradient(34rem 20rem at 5% 100%, rgba(15, 23, 42, .50), transparent 70%);
}

/* --- Floating particles ---------------------------------------------------
   Canvas is injected by initParticles(). Sits above the gradient/grid layers
   but below the content, and never intercepts pointer events. */
.particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* --- Hero project showcase ------------------------------------------------
   Slides are stacked; the active one fades/scales in. */
.showcase-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .9s ease, transform 1.2s ease;
}

.showcase-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.showcase-caption {
    transition: opacity .5s ease .15s, transform .5s ease .15s;
}

.showcase-slide:not(.is-active) .showcase-caption {
    opacity: 0;
    transform: translateY(8px);
}

.showcase-dot {
    transition: width .35s ease, background-color .35s ease;
}

@media (prefers-reduced-motion: reduce) {

    .showcase-slide,
    .showcase-caption {
        transition: none;
    }
}

/* --- Entrance animation --------------------------------------------------- */
.rise {
    animation: rise .9s cubic-bezier(.16, 1, .3, 1) both;
}

.rise-delay-1 {
    animation-delay: .08s;
}

.rise-delay-2 {
    animation-delay: .16s;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Scroll cue ----------------------------------------------------------- */
.scroll-cue {
    animation: nudge 2s ease-in-out infinite;
}

@keyframes nudge {

    0%,
    100% {
        transform: translateY(0);
        opacity: .55;
    }

    50% {
        transform: translateY(5px);
        opacity: 1;
    }
}

/* --- Horizontal snap carousel --------------------------------------------
   Hides the scrollbar; navigation is via the arrow buttons and swipe. */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* --- Accessibility -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .rise,
    .scroll-cue {
        animation: none;
    }

    .no-scrollbar {
        scroll-behavior: auto;
    }
}

/* Visible keyboard focus on the dark bands, where the default ring is lost */
.focus-ring-light:focus-visible {
    outline: 2px solid #bfdbfe;
    outline-offset: 3px;
}