/* ─────────────────────────────────────────────────────────────────────────
 * Slingshot page-load splash — reusable across 10+ landing pages.
 *
 * Pages: /artificial-intelligence/, /bootcamp/, /teams/, /dedicated-teams/,
 *        /staff-augmentation/, /offshoring-whitepaper/, /services/,
 *        /web-development/, /design/, /mobile-app-development/, /consulting/.
 *
 * Phases (classes added in sequence by splash-overlay.js):
 *   .is-ready    → card fades in (opacity 0 → 1)
 *   .is-expanding→ card grows to hero-card size (width/height, 16px gap kept)
 *   .is-hidden   → overlay fades out
 *   .is-gone     → overlay removed
 *
 * Per-page color: `--splash-color*` set per body.page-template-* so the card
 * matches the hero. Variants: blue / teal / purple / wine-red.
 *
 * On scroll: per-page hero card unwraps to full-bleed (margin/radius → 0).
 * Mobile (≤768px): disabled.
 * ──────────────────────────────────────────────────────────────────────── */

body {
    --splash-color: #4B23B0;
    --splash-color-2: #6438c8;
    --splash-color-deep: #2A1878;
}
body.page-template-page-ai,
body.page-template-page-bootcamp {
    --splash-color: #3373DD; --splash-color-2: #5b8de8; --splash-color-deep: #1F4FB8;
}
body.page-template-page-teams,
body.page-template-page-teams-dedicated,
body.page-template-page-teams-staffaug,
body.page-template-page-teams-whitepaper {
    --splash-color: #00BE96; --splash-color-2: #3ed3b3; --splash-color-deep: #007063;
}
body.page-template-page-consulting,
body.has-secondary-hero-block:not([class*="sl-splash-preset-"]),
body.has-consulting-hero-block:not([class*="sl-splash-preset-"]) {
    --splash-color: #4B23B0; --splash-color-2: #6438c8; --splash-color-deep: #2A1878;
}
body.sl-splash-preset-purple-solid,
body.sl-splash-preset-purple-photo {
    --splash-color: #6428bf; --splash-color-2: #41179b; --splash-color-deep: #321080;
}
body.sl-splash-preset-green-teams {
    --splash-color: #00BE96; --splash-color-2: #3ed3b3; --splash-color-deep: #007063;
}
body.sl-splash-preset-blue-ai {
    --splash-color: #3373DD; --splash-color-2: #5b8de8; --splash-color-deep: #1F4FB8;
}
body.sl-splash-preset-wine-product {
    --splash-color: #A21C42; --splash-color-2: #C13E63; --splash-color-deep: #75102E;
}
body.page-template-page-service-figma,
body.page-template-page-product,
body.page-template-page-web,
body.page-template-page-design,
body.page-template-page-mobile {
    --splash-color: #A21C42; --splash-color-2: #C13E63; --splash-color-deep: #75102E;
}

.sl-splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 1;
    transition: opacity .7s ease-in-out;
    pointer-events: auto;
}
.sl-splash-overlay.is-hidden { opacity: 0; pointer-events: none; }
.sl-splash-overlay.is-gone   { display: none; }

.sl-splash-card {
    /* Absolutely positioned + transform-translated so it travels from viewport
     * CENTRE to the hero's TOP-LEFT (16px,16px) as it grows — lands exactly on
     * the hero card so the overlay fade reveals no vertical "jump". */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(calc(50vw - 170px), calc(50vh - 94px));
    overflow: hidden;
    width: 340px;
    height: 188px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 11, 40, 0.16);
    will-change: width, height, border-radius, transform;
    /* Opacity-only fade-in via .is-ready (no keyframe — `forwards` would lock
     * width/height and block the expand). */
    opacity: 0;
    transition:
        opacity .5s cubic-bezier(.16, 1, .3, 1),
        transform .55s cubic-bezier(.5, 0, .2, 1),
        width .55s cubic-bezier(.5, 0, .2, 1),
        height .55s cubic-bezier(.5, 0, .2, 1),
        border-radius .55s ease,
        box-shadow .55s ease;
}
.sl-splash-card:not(.sl-splash-card--matches-hero) {
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.18) 0 35%, transparent 60%),
        linear-gradient(140deg, var(--splash-color-deep) 0%, var(--splash-color) 60%, var(--splash-color-2) 100%);
}
.sl-splash-overlay.is-ready .sl-splash-card { opacity: 1; }

.sl-splash-logo {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hp-font, 'Onest'), -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
    transition: opacity 1.0s ease;
}

/* Phase 3 — expand using width/height (NOT scale) → guaranteed 16px gap, and
 * travel to the hero's top-left (16px,16px) so the card lands on the hero. */
.sl-splash-overlay.is-expanding .sl-splash-card {
    /* Land on the hero's MEASURED rect (set by splash-overlay.js). Using the
     * real left/width/top/height avoids the scrollbar overhang that
     * calc(100vw-32) caused (card wider than hero → "narrows" on fade) and the
     * top jump on pages with an in-flow header. Fallbacks if JS hasn't run. */
    transform: translate(var(--hero-left, 16px), var(--hero-top, 16px));
    width: var(--hero-w, calc(100vw - 32px));
    height: var(--hero-h, min(72vh, 620px));
    border-radius: 24px;
    box-shadow: 0 40px 90px rgba(15, 11, 40, 0.30);
}
.sl-splash-overlay.is-expanding .sl-splash-logo { opacity: 0; }

@media (max-width: 768px) {
    .sl-splash-overlay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-splash-overlay, .sl-splash-card, .sl-splash-logo { transition: none !important; }
}

/* ── Hero content entrance — inner pages ────────────────────────────
 * Mirrors the home splash: after the card fills the screen with the page's
 * bubble bg and holds a beat, the header + hero content fade + slide up as the
 * overlay dissolves. body.sl-splash is added by splash-overlay.js only when the
 * splash runs (desktop); content sits behind the opaque overlay at first paint,
 * so there's no flash. Skipped splash (mobile / no JS) → content visible by
 * default. [class*="hero-inner"] matches every page's content wrapper
 * (.ai-hero-inner, .product-hero-inner, .teams-hero-inner, .con-hero-inner,
 * .boot-hero-inner, …). */
@media (min-width: 769px) {
    body.sl-splash #homeSiteHeader .home-site-header-inner,
    body.sl-splash [class*="hero-inner"] {
        transition: opacity .6s ease, transform .75s cubic-bezier(.22, 1, .36, 1) !important;
    }
    body.sl-splash:not(.sl-splash-reveal) #homeSiteHeader .home-site-header-inner,
    body.sl-splash:not(.sl-splash-reveal) [class*="hero-inner"] {
        opacity: 0 !important;
    }
    body.sl-splash:not(.sl-splash-reveal) [class*="hero-inner"] {
        transform: translateY(30px) !important;
    }
    body.sl-splash:not(.sl-splash-reveal) #homeSiteHeader .home-site-header-inner {
        transform: translateY(-12px) !important;
    }
    body.sl-splash-reveal #homeSiteHeader .home-site-header-inner { transition-delay: 0s; }
    body.sl-splash-reveal [class*="hero-inner"]                   { transition-delay: .1s; }
}
@media (prefers-reduced-motion: reduce) {
    body.sl-splash #homeSiteHeader .home-site-header-inner,
    body.sl-splash [class*="hero-inner"] {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ── Scroll-driven full-bleed: per-page hero card unwraps on scroll ──
 * body.is-scrolled is toggled by splash-overlay.js.
 *
 * The hero is normally a CENTERED card: width:calc(100%-32px); max-width:1408px;
 * margin:0 auto — set in landing-hero-shared.css with a high-specificity
 * `html body[class]:is(...) #ajax-content-wrap :is(...)` selector (includes the
 * #ajax-content-wrap ID → specificity (1,3,2)). To override it we must match the
 * SAME ID and add .is-scrolled so we out-specify it → (1,4,2).
 *
 * Smooth growth: animate max-width 1408px → 100vw (an animatable LENGTH, not
 * `none` which would snap) while keeping margin:0 auto. As max-width grows the
 * auto side-margins shrink (≈256px→0) symmetrically, so the card expands from
 * centred to full-bleed with no jump. width:100% + border-radius:0 complete it. */
@media (min-width: 1000px) {
    html body[class]:is(
        .page-template-page-ai, .page-template-page-bootcamp,
        .page-template-page-teams, .page-template-page-teams-dedicated,
        .page-template-page-teams-staffaug, .page-template-page-teams-whitepaper,
        .page-template-page-consulting, .page-template-page-service-figma,
        .page-template-page-product, .page-template-page-web,
        .page-template-page-design, .page-template-page-mobile,
        .has-secondary-hero-block,
        .has-consulting-hero-block
    ) #ajax-content-wrap :is(
        .ai-hero-section, .boot-hero, .teams-hero, .con-hero,
        .service-figma-hero, .product-hero, .web-hero, .design-hero, .mobile-hero
    ) {
        transition:
            max-width .55s cubic-bezier(.65, .04, .35, 1),
            width .55s cubic-bezier(.65, .04, .35, 1),
            border-radius .55s cubic-bezier(.65, .04, .35, 1) !important;
    }
    html body[class].is-scrolled:is(
        .page-template-page-ai, .page-template-page-bootcamp,
        .page-template-page-teams, .page-template-page-teams-dedicated,
        .page-template-page-teams-staffaug, .page-template-page-teams-whitepaper,
        .page-template-page-consulting, .page-template-page-service-figma,
        .page-template-page-product, .page-template-page-web,
        .page-template-page-design, .page-template-page-mobile,
        .has-secondary-hero-block,
        .has-consulting-hero-block
    ) #ajax-content-wrap :is(
        .ai-hero-section, .boot-hero, .teams-hero, .con-hero,
        .service-figma-hero, .product-hero, .web-hero, .design-hero, .mobile-hero
    ) {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
    }
}