/* ============================================================
   INVENT CITY — WHOLE-SITE HORIZONTAL SLIDE
   File: css/components/site-slide.css

   PURPOSE
   ------------------------------------------------------------
   Keep the existing Invent City page completely intact while
   allowing the whole primary page to slide left or right while
   full-screen side sites enter from the opposite direction.

   IMPORTANT
   ------------------------------------------------------------
   This file intentionally does NOT redefine Invent City's:
   - .grid-main
   - .area-cell
   - .area-center-2
   - .pane-left / .pane-right
   - accordions
   - offcanvas panels
   - hero layout

   The feature is isolated to the .site-slide__* classes below.
============================================================ */

/* ============================================================
   1) PRIMARY SITE WRAPPER
   ------------------------------------------------------------
   Margin motion moves normal-flow page content without creating
   a transformed containing block. The controller animates each
   currently fixed primary control separately, so those controls
   keep their viewport-relative vertical position while moving horizontally.
============================================================ */
.site-slide__primary {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    transition: margin-left 650ms cubic-bezier(.77, 0, .18, 1);
}

/* Move the entire current Invent City page one viewport left. */
body.site-secondary-open .site-slide__primary {
    margin-left: -100vw;
}

/* Move the entire current Invent City page one viewport right. */
body.site-tertiary-open .site-slide__primary {
    margin-left: 100vw;
}

/* ============================================================
   2) FIXED SIDE SITES
   ------------------------------------------------------------
   Fixed positioning keeps both side sites independent of the
   very long height of the primary Invent City page.
============================================================ */
.site-slide__secondary,
.site-slide__tertiary {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;

    /* The outer panel moves but never scrolls; its inner layer owns scrolling. */
    overflow-x: hidden;
    overflow-y: hidden;

    /* Keep it out of interaction/focus until opened. */
    visibility: hidden;
    pointer-events: none;

    /* Side panels sit above Invent City's fixed menus/dropdowns while open.
       Bootstrap/offcanvas markup remains outside all moving panels. */
    z-index: 2147483100;

    transition:
        transform 650ms cubic-bezier(.77, 0, .18, 1),
        visibility 0s linear 650ms;

    will-change: transform;
}

.site-slide__secondary {
    /* Start exactly one viewport to the right. */
    transform: translate3d(100vw, 0, 0);

    /* Keep the Blue Gray surface beneath a second-site-specific base2-flex map.
       Its SVG derivative uses white lines without changing the shared
       currentColor map used by primary-site sections. The outer panel does not
       scroll, so the centered artwork stays pinned to the viewport while
       .site-slide__secondary-scroller moves its content independently. */
    background-color: var(--site-slide-secondary-bg);
    background-image: url("../../visual/maps/base2-flex-secondary.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #000;
}

.site-slide__tertiary {
    /* Mirror the secondary panel from one viewport left. */
    transform: translate3d(-100vw, 0, 0);
    background-color: var(--site-slide-tertiary-bg);
    background-image: none;
    color: #000;
}

/* Bring the secondary site fully into view. */
body.site-secondary-open .site-slide__secondary {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;

    /* Visibility switches on immediately when opening. */
    transition:
        transform 650ms cubic-bezier(.77, 0, .18, 1),
        visibility 0s linear 0s;
}

/* Bring the tertiary site fully into view from the left. */
body.site-tertiary-open .site-slide__tertiary {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;

    /* Visibility switches on immediately when opening. */
    transition:
        transform 650ms cubic-bezier(.77, 0, .18, 1),
        visibility 0s linear 0s;
}

/* While either side site is open, only that side site's inner layer scrolls. */
html.site-secondary-open,
body.site-secondary-open,
html.site-tertiary-open,
body.site-tertiary-open {
    overflow: hidden !important;
}

/* Keep the page width stable when the root scrollbar is temporarily locked. */
html {
    scrollbar-gutter: stable;
}

/* ============================================================
   3) SIDE-SITE CONTENT AREAS
   ------------------------------------------------------------
   This is intentionally neutral. Replace the placeholder markup
   in index.php with another PHP include, iframe, or full layout.
============================================================ */
.site-slide__secondary-scroller,
.site-slide__tertiary-scroller {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.site-slide__secondary-content,
.site-slide__tertiary-content {
    width: 100%;
    min-height: 100%;
}

.site-slide__secondary-content {
    /* The larger left inset keeps secondary content clear of the 50px return arrow. */
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5rem) 4rem clamp(4.5rem, 7vw, 6rem);
}

.site-slide__tertiary-content {
    /* Mirror the clearance for the tertiary panel's right-edge return arrow. */
    padding: clamp(5rem, 9vw, 8rem) clamp(4.5rem, 7vw, 6rem) 4rem clamp(1.5rem, 5vw, 5rem);
}

.site-slide__secondary-content-inner,
.site-slide__tertiary-content-inner {
    width: min(100%, 80rem);
    margin-inline: auto;
}

.site-slide__secondary-kicker,
.site-slide__tertiary-kicker {
    margin: 0 0 1rem;
    font: 500 0.78rem/1.2 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-slide__secondary-title,
.site-slide__tertiary-title {
    margin: 0;
    max-width: 16ch;
    font-family: var(--font-display, "IBM Plex Sans", system-ui, sans-serif);
    font-size: clamp(2.5rem, 7vw, 7rem);
    line-height: 0.95;
    font-weight: 500;
}

.site-slide__secondary-copy,
.site-slide__tertiary-copy {
    max-width: 42rem;
    margin-top: 2rem;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5;
}

/* ============================================================
   4) SHARED EQUILATERAL TRIANGLE CONTROLS
   ------------------------------------------------------------
   Every control contains the same SVG polygon. Direction changes
   only by rotating that SVG, so size and stroke geometry cannot
   drift between left, right, down, and return pointers.
============================================================ */
.triangle-pointer-control {
    --triangle-pointer-size: var(--supplemental-menu-control-size, 50px);
    width: var(--triangle-pointer-size);
    height: var(--triangle-pointer-size);
}

.triangle-pointer-control__svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: transform 160ms ease;
}

.triangle-pointer-control__shape {
    fill: var(--triangle-pointer-fill, #fff);
    stroke: var(--triangle-pointer-stroke, #000);
    /* The menu bar and every pointer now consume this one global line token. */
    stroke-width: var(--menu-bar-border-w, 2px);
    /* The polygon's straight edge sits on a whole rendered pixel at the
       standard 50px size; geometric precision keeps all rotated edges even. */
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
    transition: fill 160ms ease, stroke 160ms ease;
}

/* Keep keyboard focus highly visible without restoring a rectangular box
   around the now-triangular artwork. Drop shadows follow the clipped shape. */
.triangle-pointer-control:focus-visible {
    outline: 0;
    filter:
        drop-shadow(0 0 1px var(--triangle-pointer-fill, #fff))
        drop-shadow(0 0 3px var(--triangle-pointer-stroke, #000));
}

/* Side controls use the same square and the same triangle side length as
   the down control; only the SVG rotation differs. */
.site-slide__edge-button {
    --triangle-pointer-fill: #000;
    --triangle-pointer-stroke: #fff;
    position: fixed;
    top: 50%;
    display: block;
    width: var(--triangle-pointer-size);
    height: var(--triangle-pointer-size);
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms ease;
}

.triangle-pointer-control--left .triangle-pointer-control__svg {
    transform: rotate(90deg);
}

.triangle-pointer-control--right .triangle-pointer-control__svg {
    transform: rotate(-90deg);
}

.triangle-pointer-control--down .triangle-pointer-control__svg {
    transform: rotate(0deg);
}

/* Explicit theme hooks let the fixed primary pointers reverse cleanly as
   the page scrolls between white and black section backgrounds. */
.site-slide__edge-button[data-pointer-theme="light"] {
    --triangle-pointer-fill: #fff;
    --triangle-pointer-stroke: #000;
}

.site-slide__edge-button[data-pointer-theme="dark"] {
    --triangle-pointer-fill: #000;
    --triangle-pointer-stroke: #fff;
}

/* Primary page: right triangle points toward the secondary site. */
.site-slide__edge-button--open {
    right: 0;
    /* Primary overlays remain above this trigger, preserving their modal behavior. */
    z-index: 1040;
}

/* Primary page: left triangle points toward the tertiary site. */
.site-slide__edge-button--open-tertiary {
    left: 0;
    /* Match the secondary opener's relationship to Bootstrap overlays. */
    z-index: 1040;
}

/* One shared return control appears above the active side panel. The body
   state moves it to the primary-facing edge and reverses its direction. */
.site-slide__edge-button--return {
    --triangle-pointer-fill: #fff;
    --triangle-pointer-stroke: #000;
    z-index: 2147483110;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

body.site-secondary-open .site-slide__edge-button--return {
    left: 0;
    right: auto;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

body.site-secondary-open .site-slide__edge-button--return .triangle-pointer-control__svg {
    transform: rotate(90deg);
}

body.site-tertiary-open .site-slide__edge-button--return {
    right: 0;
    left: auto;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

body.site-tertiary-open .site-slide__edge-button--return .triangle-pointer-control__svg {
    transform: rotate(-90deg);
}

.site-slide__edge-button:hover {
    transform: translateY(-50%) scale(1.06);
}

.site-slide__edge-button:active {
    transform: translateY(-50%) scale(0.94);
}

/* Both primary arrows ride out with the primary page and become noninteractive. */
body.site-secondary-open :is(.site-slide__edge-button--open, .site-slide__edge-button--open-tertiary),
body.site-tertiary-open :is(.site-slide__edge-button--open, .site-slide__edge-button--open-tertiary) {
    pointer-events: none;
}

/* ============================================================
   5) ACCESSIBILITY — REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .site-slide__primary,
    .site-slide__secondary,
    .site-slide__tertiary,
    .site-slide__edge-button,
    .triangle-pointer-control__svg,
    .triangle-pointer-control__shape {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .triangle-pointer-control:focus-visible {
        outline: 3px solid ButtonText;
        box-shadow: none;
        filter: none;
        forced-color-adjust: auto;
    }
}