/* ============================================================
   CISO24 — Cinematic "Cyber Zoom-Scape" layer
   Presentation-only. Everything here is gated behind
   `html.cin-on`, which cinematic.js adds ONLY when motion is
   allowed and GSAP is present. With no JS / reduced-motion /
   no cin-on, the site renders exactly as before.

   Strategy: "dark sections only" — the fixed particle canvas
   sits behind everything; only the already-dark zones
   (.hero/.spotlight/.contact/.footer) go transparent to reveal
   it. Light sections stay opaque white and hide the field.
   ============================================================ */

/* Namespaced tokens (avoid collision with existing --accent etc.) */
:root {
    --fx-warp-scale: 1.18;
    --fx-warp-blur: 6px;
    --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- The Field canvas -------------------------------------- */
#zoomscape {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: none;            /* hidden until cinematic confirms it's on */
    pointer-events: none;
}

html.cin-on #zoomscape {
    display: block;
    /* Static fallback: if the 2D engine can't init, a dark vignette
       still fills the revealed dark zones (no blank/white gaps). */
    background:
        radial-gradient(120% 90% at 50% 8%, #0a1533 0%, #050b22 45%, #020617 100%);
}

/* ============================================================
   Alternating dark / light rhythm through the whole page:
   hero(D) · services(L) · splunk(D) · frameworks(L) ·
   sectors(D) · engagement(L) · credentials(D) · contact(L) · footer(D)
   ============================================================ */

/* Dark zones are fully transparent so the moving particle field shows and
   flies through them: hero, splunk, sectors, credentials, footer.
   White cards float on the field; only the section header flips to light. */
html.cin-on .hero,
html.cin-on .spotlight,
html.cin-on .sectors,
html.cin-on .credentials,
html.cin-on .footer {
    background-color: transparent;
}
html.cin-on .sectors .section-title,
html.cin-on .credentials .section-title { color: #ffffff; }
html.cin-on .sectors .section-desc,
html.cin-on .credentials .section-desc { color: rgba(226, 232, 255, 0.80); }
html.cin-on .sectors .section-tag,
html.cin-on .credentials .section-tag {
    color: #bcd0ff;
    background: rgba(120, 150, 255, 0.14);
    border-color: rgba(150, 180, 255, 0.32);
}

/* Light zones: very light blue (near-white), original dark text, white cards. */
html.cin-on .services,
html.cin-on .engagement {
    background: linear-gradient(180deg, #eef3fd 0%, #e7eefb 100%);
}
html.cin-on .frameworks,
html.cin-on .contact {
    background: linear-gradient(180deg, #f1f5fe 0%, #eaf0fc 100%);
}

/* ---- Contact flips from its dark theme to the light theme ---- */
html.cin-on .contact .section-title { color: var(--text-primary); }
html.cin-on .contact .section-tag { background: rgba(204, 51, 51, 0.10); color: var(--red-600); }
html.cin-on .contact__desc { color: var(--text-secondary); }
html.cin-on .contact__detail strong { color: var(--text-primary); }
html.cin-on .contact__detail span { color: var(--text-secondary); }
html.cin-on .contact__form-wrapper {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 20px 50px rgba(20, 40, 120, 0.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.cin-on .contact .form-group label { color: var(--text-secondary); }
html.cin-on .contact .form-group input,
html.cin-on .contact .form-group select,
html.cin-on .contact .form-group textarea {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--text-primary);
}
html.cin-on .contact .form-group input::placeholder,
html.cin-on .contact .form-group textarea::placeholder { color: var(--text-tertiary); }
html.cin-on .contact .form-group select { color: var(--text-secondary); }
html.cin-on .contact .form-group select option { background: #ffffff; color: var(--text-primary); }
html.cin-on .contact .form-group--checkbox {
    background: var(--gray-50);
    border-color: var(--gray-200);
}
html.cin-on .contact .form-group--checkbox:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}
html.cin-on .contact .form-group--checkbox input[type="checkbox"] { border-color: var(--gray-400); }
html.cin-on .contact .form-note { color: var(--text-secondary); }

/* ---- 3D stage: perspective so the (gentle) zoom-warp has depth ---- */
html.cin-on main { perspective: 2200px; perspective-origin: 50% 42%; }

/* ---- Depth planes: subtle NIST-function watermarks ----------- */
.cin-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    font-size: clamp(5rem, 22vw, 22rem);
    color: rgba(90, 120, 200, 0.06);   /* faint on both light and dark zones */
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;              /* above bg, below content */
    will-change: transform;
}
/* Positioned, clipped host so the absolute watermark can't force
   horizontal scroll and has a positioning context. */
html.cin-on section,
html.cin-on .footer { position: relative; }
.hero, .services, .spotlight, .frameworks, .sectors,
.engagement, .credentials, .contact, .footer { overflow: hidden; }

/* Section content should sit above the watermark plane */
html.cin-on .hero__content,
html.cin-on section .container { position: relative; z-index: 1; }

/* ---- Frameworks: regulatory-depth progress rail ------------ */
.cin-rail {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: rgba(127, 147, 222, 0.10);
    pointer-events: none;
    z-index: 1;
}
.cin-rail__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    transform-origin: top;
    background: linear-gradient(180deg, var(--blue-400, #546fd3), var(--green-500, #00A693));
    box-shadow: 0 0 12px rgba(84, 111, 211, 0.5);
}
.frameworks { position: relative; }

/* ---- Credentials: one-time shimmer sweep ------------------- */
@keyframes cinShimmer {
    0%   { background-position: -150% 0; }
    100% { background-position: 250% 0; }
}
html.cin-on .credentials__groups.cin-shimmer {
    -webkit-mask-image: linear-gradient(100deg,
        rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,1) 60%);
    mask-image: linear-gradient(100deg,
        rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,1) 60%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    animation: cinShimmer 1.4s var(--fx-ease) 1;
}

/* ---- Zoom-warp stage wrappers ------------------------------ */
html.cin-on [data-cin-warp] {
    will-change: transform, opacity, filter;
    transform-style: preserve-3d;
}
html.cin-on .contact__form-wrapper { will-change: transform, opacity; }

/* Spotlight panels get a clip-reveal; hint the compositor only
   while cinematic is active (initial state is set in JS). */
html.cin-on .spotlight__panel { will-change: clip-path, transform, opacity; }

/* ---- Dark<->light boundary seams (injected by cinematic.js) --
   A tall soft gradient + shadow at the top of each section makes the
   transition between the dark field and the blue zones read cinematically. */
.cin-seam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    pointer-events: none;
    z-index: 0;
}
/* Fade into a dark zone from the light one above it. */
.cin-seam--todark {
    background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.85) 100%);
}
/* Fade into a light zone from the dark one above it (soft shadow lip). */
.cin-seam--toblue {
    background: linear-gradient(180deg, rgba(231, 238, 251, 0) 0%, rgba(231, 238, 251, 0.9) 100%);
    box-shadow: 0 -18px 40px 4px rgba(2, 6, 23, 0.28);
}

/* ---- Safety nets ------------------------------------------- */
/* Watermark & rail never intercept pointer events. */
.cin-watermark, .cin-rail, .cin-rail__fill { pointer-events: none; }

/* Reduced-motion handling is done in JS (cinematic.js): when the browser
   requests reduced motion — and ?fx=1 is NOT present — cinematic.js returns
   early and never adds `html.cin-on`, so every rule above is inert and the
   original static site renders. No CSS media override is needed here (and a
   media block would wrongly fight the ?fx=1 force-preview opt-in). */