/* SSP Immersive Home — code-rendered front page.
   Brand: electric blue (#2b6bff) + cyan (#6bcbff/#90fffb) on near-black. */

:root {
    --ssp-ink: #05070d;
    --ssp-ink-2: #0a0e1a;
    --ssp-text: #eaf1ff;
    --ssp-muted: #8b96b3;
    --ssp-accent: #2b6bff;
    --ssp-accent-2: #6bcbff;
    --ssp-cyan: #90fffb;
    --ssp-line: rgba(139, 150, 179, 0.18);
    --ssp-maxw: 1180px;
    --ssp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset within our page only */
body.ssp-immersive {
    margin: 0;
    background: var(--ssp-ink);
    color: var(--ssp-text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.ssp-immersive * { box-sizing: border-box; }

body.ssp-immersive a { color: inherit; text-decoration: none; }

/* WP admin bar safety */
body.ssp-immersive.admin-bar .ssp-nav { top: 32px; }

/* ---------- Background canvas + grain ---------- */
.ssp-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
}

.ssp-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ssp-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* large brand logo behind everything — you "scroll around" it */
.ssp-logo-stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}
.ssp-logo-bg {
    width: min(78vh, 70vw);
    max-width: 760px;
    height: auto;
    opacity: 0.10;
    filter: drop-shadow(0 0 90px rgba(43, 107, 255, 0.55));
    will-change: transform;
    transform: translateZ(0);
}

.ssp-main { position: relative; z-index: 2; }

/* ---------- Nav ---------- */
.ssp-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px clamp(18px, 4vw, 48px);
    transition: background 400ms var(--ssp-ease), border-color 400ms var(--ssp-ease), backdrop-filter 400ms var(--ssp-ease);
    border-bottom: 1px solid transparent;
}

.ssp-nav.is-stuck {
    background: rgba(5, 7, 13, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--ssp-line);
}

.ssp-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 15px;
}

.ssp-nav__brand { position: relative; z-index: 60; }
.ssp-nav__brand img { border-radius: 9px; display: block; }

/* menu group (icon dock + cta) */
.ssp-nav__menu {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vw, 20px);
}

/* ---- Dock: styles live in SSP_Immersive_Home::render_dock() inline <style> ---- */

.ssp-nav__cta {
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: #04101f;
    background: linear-gradient(135deg, var(--ssp-accent-2), var(--ssp-cyan));
    box-shadow: 0 6px 20px -8px rgba(107, 203, 255, 0.7);
    transition: transform 180ms var(--ssp-ease), box-shadow 220ms ease;
}
.ssp-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(107, 203, 255, 0.8); }

/* ---------- Shared section layout ---------- */
.ssp-hero,
.ssp-feature,
.ssp-cta {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px clamp(18px, 4vw, 48px);
}

.ssp-hero__inner,
.ssp-feature__inner,
.ssp-cta__inner {
    position: relative;
    width: 100%;
    max-width: var(--ssp-maxw);
    margin: 0 auto;
    z-index: 2;
}

/* ---------- Hero ---------- */
.ssp-hero { align-items: center; text-align: center; }

/* logo above the title on load; JS fades it out into the background watermark on scroll */
.ssp-hero__logo {
    display: block;
    width: clamp(160px, 23vw, 320px);
    height: auto;
    margin: 0 auto 20px;
    filter: drop-shadow(0 14px 50px rgba(43, 107, 255, 0.55));
}

.ssp-hero__kicker {
    margin: 0 0 22px;
    font-size: 13px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ssp-accent-2);
}

.ssp-hero__title {
    margin: 0 auto;
    max-width: 7em;            /* fits two words per line: "SOUND SYNC" / "PLAY" — never 3 rows */
    text-align: center;
    text-wrap: balance;
    font-size: clamp(46px, 10.5vw, 140px);
    line-height: 0.88;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #ffffff 0%, #b9d4ff 60%, var(--ssp-accent-2) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ssp-hero__subtitle {
    margin: 28px auto 0;
    max-width: 560px;
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.5;
    color: var(--ssp-muted);
}

.ssp-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }

.ssp-hero__cue {
    position: absolute;
    left: 50%; bottom: 30px;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ssp-muted);
    z-index: 2;
}
.ssp-hero__cue i {
    width: 1px; height: 46px;
    background: linear-gradient(var(--ssp-accent-2), transparent);
    animation: ssp-cue 1.8s var(--ssp-ease) infinite;
}
@keyframes ssp-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Buttons ---------- */
.ssp-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: 15px; font-weight: 600;
    transition: transform 180ms var(--ssp-ease), box-shadow 240ms ease, background 240ms ease, color 240ms ease;
}
.ssp-btn--primary {
    color: #04101f;
    background: linear-gradient(135deg, var(--ssp-accent-2), var(--ssp-cyan));
    box-shadow: 0 10px 28px -10px rgba(107, 203, 255, 0.75);
}
.ssp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(107, 203, 255, 0.85); }
.ssp-btn--ghost {
    color: var(--ssp-text);
    border: 1px solid var(--ssp-line);
    background: rgba(255, 255, 255, 0.02);
}
.ssp-btn--ghost:hover { border-color: var(--ssp-accent-2); color: var(--ssp-accent-2); }
.ssp-btn--lg { padding: 17px 38px; font-size: 17px; }

/* ---------- Feature sections ---------- */
.ssp-feature__inner { max-width: 820px; }

.ssp-feature__num {
    display: inline-block;
    font-size: 13px; letter-spacing: 0.2em;
    color: var(--ssp-accent);
    font-variant-numeric: tabular-nums;
}
.ssp-feature__label {
    margin: 10px 0 18px;
    font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--ssp-muted);
}
.ssp-feature__title {
    margin: 0;
    font-size: clamp(34px, 6.5vw, 86px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.ssp-feature__body {
    margin: 24px 0 0;
    max-width: 540px;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.55;
    color: var(--ssp-muted);
}
.ssp-feature__cta {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 32px;
    font-size: 15px; font-weight: 600;
    color: var(--ssp-accent-2);
}
.ssp-feature__cta svg { transition: transform 240ms var(--ssp-ease); }
.ssp-feature__cta:hover svg { transform: translateX(6px); }

/* big ghost word drifting behind */
.ssp-feature__ghost {
    position: absolute;
    right: clamp(-20px, -2vw, 0px);
    bottom: 6vh;
    font-size: clamp(90px, 22vw, 320px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* ---------- CTA ---------- */
.ssp-cta { text-align: center; }
.ssp-cta__inner { max-width: 820px; }
.ssp-cta__title {
    margin: 0;
    font-size: clamp(36px, 8vw, 110px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.ssp-cta__body { margin: 24px auto 38px; max-width: 480px; color: var(--ssp-muted); font-size: clamp(16px, 1.8vw, 20px); }

/* ---------- Footer ---------- */
.ssp-foot {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: space-between;
    padding: 32px clamp(18px, 4vw, 48px) 130px; /* extra bottom room for the floating dock */
    border-top: 1px solid var(--ssp-line);
    font-size: 13px; color: var(--ssp-muted);
}

/* ---------- Reveal states (only when JS active) ---------- */
body.ssp-immersive.ssp-js [data-reveal] { opacity: 0; transform: translateY(30px); will-change: transform, opacity; }
body.ssp-immersive.ssp-js [data-reveal-chars] .ssp-char { display: inline-block; opacity: 0; transform: translateY(0.4em); }

/* gradient must live on each split char — background-clip:text on the h1 doesn't
   clip across inline-block children, which made the title render transparent. */
body.ssp-immersive .ssp-hero__title .ssp-char {
    background: linear-gradient(180deg, #ffffff 0%, #b9d4ff 55%, var(--ssp-accent-2) 115%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Responsive ---------- */
@media (min-width: 521px) and (max-width: 860px) {
    .ssp-nav__brand span { display: none; } /* logo only; give the dock room */
}

@media (max-width: 620px) {
    .ssp-nav { gap: 12px; padding: 14px 16px; }
    .ssp-nav__brand span { display: none; }

    .ssp-feature__inner { max-width: 100%; }
    .ssp-hero { align-items: flex-end; padding-bottom: 140px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.ssp-immersive.ssp-js [data-reveal],
    body.ssp-immersive.ssp-js [data-reveal-chars] .ssp-char {
        opacity: 1 !important;
        transform: none !important;
    }
    .ssp-hero__cue i { animation: none; }
}

/* ---------- Horizontal landing sections (Immersive Home → Landing sections =
   Horizontal). Desktop only: the feature track is a sideways row that GSAP pins
   and scrubs as you scroll down. Phones/tablets keep the normal vertical stack. */
@media (min-width: 900px) {
    body.ssp-landing-horizontal .ssp-features-pin {
        height: 100vh;
        overflow: hidden;
    }
    body.ssp-landing-horizontal .ssp-features-track {
        display: flex;
        flex-flow: row nowrap;
        height: 100vh;
        will-change: transform;
    }
    body.ssp-landing-horizontal .ssp-features-track > .ssp-feature {
        flex: 0 0 100vw;
        width: 100vw;
        min-height: 100vh;
        height: 100vh;
    }
}
/* Dots container is unused now (mobile is vertical); keep it hidden if present. */
.ssp-features-dots { display: none; }

/* ---------- Mobile full-screen snap scroll (< 900px) ----------
   Each section becomes a full-viewport slide. The user swipes between them
   exactly like swiping through stories. Desktop is unaffected. */
@media (max-width: 899px) {
    html {
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: none;
    }

    .ssp-hero,
    .ssp-feature,
    .ssp-cta {
        scroll-snap-align: start;
        height: 100svh;
        min-height: unset;
        overflow: hidden;
    }

    /* Re-centre the hero vertically and clear the fixed nav + dock chrome */
    .ssp-hero {
        align-items: center;
        padding-top: 90px;
        padding-bottom: 100px;
    }

    /* Scale feature titles so they fit within 100svh on small phones */
    .ssp-feature__title { font-size: clamp(28px, 8vw, 46px); }
    .ssp-feature__body  { font-size: 15px; }
}

/* Let users who opted out of motion keep the scrollable layout */
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
    html { scroll-snap-type: none; overscroll-behavior-y: auto; }
    .ssp-hero,
    .ssp-feature,
    .ssp-cta { height: auto; min-height: 100vh; overflow: visible; }
    .ssp-hero { align-items: flex-end; padding-top: 120px; padding-bottom: 140px; }
}