/* ============================================================
   monopole.boo  ::  Art Deco x Cold Physics
   Palette: cool grays w/ cyan luminescence
   Layout : diagonal-sections (15 deg facets)
   Type   : EB Garamond  +  Space Grotesk
   ============================================================ */

:root {
    --c-anthracite: #1C1F26;
    --c-gunmetal:   #2A2D36;
    --c-slate:      #363A45;
    --c-marble:     #4A4F5C;
    --c-silver:     #B8BFC9;
    --c-ash:        #7A8290;
    --c-cyan:       #4DB8C7;
    --c-teal:       #2E8A8F;
    --c-ice:        #D4EEF1;

    --glow-soft:   0 0 4px rgba(77,184,199,0.95), 0 0 12px rgba(77,184,199,0.40);
    --glow-medium: 0 0 6px rgba(77,184,199,1.00), 0 0 18px rgba(77,184,199,0.55);
    --glow-strong: 0 0 8px rgba(77,184,199,1.00), 0 0 28px rgba(77,184,199,0.70), 0 0 48px rgba(212,238,241,0.25);

    --slope: 15deg;
    --seam: 2px;

    --ff-serif: "EB Garamond", Garamond, "Times New Roman", serif;
    --ff-sans:  "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;

    --t-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-anthracite);
    color: var(--c-silver);
    font-family: var(--ff-serif);
    font-size: 18px;
    line-height: 1.75;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
    /* dark Marquina marble vein wash, very subtle */
    background-image:
        radial-gradient(ellipse at 18% 22%, rgba(74,79,92,0.10) 0%, transparent 38%),
        radial-gradient(ellipse at 82% 58%, rgba(74,79,92,0.08) 0%, transparent 42%),
        linear-gradient(108deg, transparent 48%, rgba(74,79,92,0.04) 49%, transparent 50%),
        linear-gradient(72deg,  transparent 32%, rgba(74,79,92,0.03) 33%, transparent 34%);
    background-color: var(--c-anthracite);
}

::selection { background: rgba(77,184,199,0.32); color: var(--c-ice); }

/* ------------------------------------------------------------
   Masthead :: top-left fixed marker w/ field-line tail
   ------------------------------------------------------------ */
.masthead {
    position: fixed;
    top: 28px;
    left: 36px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0;
    pointer-events: none;
}
.masthead-title {
    font-family: var(--ff-serif);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-variant: small-caps;
    color: var(--c-silver);
    padding-right: 14px;
}
.masthead-line {
    display: block;
    height: 1px;
    width: 120px;
    background: linear-gradient(90deg, var(--c-cyan) 0%, rgba(77,184,199,0.55) 60%, transparent 100%);
    box-shadow: var(--glow-soft);
    transform-origin: left center;
    animation: glow-breathe 4s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Progress rail :: right edge keystone diamonds
   ------------------------------------------------------------ */
.progress-rail {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px 10px;
}
.progress-rail-marble {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background:
        linear-gradient(180deg, transparent 0%, rgba(74,79,92,0.6) 8%, rgba(74,79,92,0.9) 50%, rgba(74,79,92,0.6) 92%, transparent 100%),
        linear-gradient(180deg, rgba(74,79,92,0.2) 0%, rgba(74,79,92,0.05) 100%);
    transform: translateX(-50%);
    pointer-events: none;
}
.progress-diamond {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--c-ash);
    font-family: var(--ff-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    transition: color 320ms ease-out;
}
.progress-diamond .diamond-label {
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 280ms ease-out, transform 280ms ease-out;
    white-space: nowrap;
}
.progress-diamond:hover .diamond-label,
.progress-diamond.is-active .diamond-label {
    opacity: 1;
    transform: translateX(0);
}
.diamond-shape {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transform: rotate(45deg);
    border: 1px solid var(--c-ash);
    background: transparent;
    transition:
        background-color 320ms ease-out,
        border-color 320ms ease-out,
        box-shadow 320ms ease-out,
        transform 600ms var(--t-spring);
}
.progress-diamond:hover .diamond-shape {
    border-color: var(--c-cyan);
    box-shadow: var(--glow-soft);
}
.progress-diamond.is-active {
    color: var(--c-cyan);
}
.progress-diamond.is-active .diamond-shape {
    background: var(--c-cyan);
    border-color: var(--c-cyan);
    box-shadow: var(--glow-medium);
    animation: diamond-pulse 2.4s ease-in-out infinite;
    transform: rotate(45deg) scale(1);
}
.progress-diamond.is-entering .diamond-shape {
    animation: diamond-enter 600ms var(--t-spring) forwards;
}

@keyframes diamond-enter {
    0%   { transform: rotate(45deg) scale(1); }
    55%  { transform: rotate(45deg) scale(1.3); }
    100% { transform: rotate(45deg) scale(1); }
}

@keyframes diamond-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(77,184,199,0.85), 0 0 12px rgba(77,184,199,0.35); }
    50%      { box-shadow: 0 0 6px rgba(77,184,199,1.00), 0 0 22px rgba(77,184,199,0.65); }
}

/* ------------------------------------------------------------
   Facet stack :: trapezoidal sections cut by 15deg seams
   ------------------------------------------------------------ */
.facet-stack {
    position: relative;
    display: block;
}

.facet {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 14vh 9vw 16vh 9vw;
    overflow: hidden;
}

/* alternate slope direction. --slope-sign drives clip + seam orientation */
.facet--down { --slope-sign:  1; }   /* seam tilts down to the right */
.facet--up   { --slope-sign: -1; }   /* seam tilts up to the right */

/* Trapezoidal mask: clip top edge from prior seam, bottom edge angles to next seam */
/* Even facets keep top flat (the seam is drawn by the previous gutter); */
/* the bottom of every non-final facet angles 15deg according to slope-sign */
.facet-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.facet-bg--anthracite {
    background-color: var(--c-anthracite);
}
.facet-bg--gunmetal {
    background-color: var(--c-gunmetal);
}

/* Trapezoidal cut: bottom edge slopes 15 degrees */
.facet--down .facet-bg::before,
.facet--up   .facet-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-mask-image: linear-gradient(black, black);
            mask-image: linear-gradient(black, black);
}

/* the angled bottom is drawn by the gutter band layered above */
/* using clip-path on the facet itself for a real trapezoid: */
.facet--down {
    /* seam at bottom slopes down from left (low) to right (high)  ->  cuts top-right of next */
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% calc(100% - 7vw),
        0% 100%
    );
}
.facet--up {
    /* seam at bottom slopes up from left (high) to right (low) */
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        0% calc(100% - 7vw)
    );
}
.facet--final {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* tighten visual overlap between facets so the diagonal feels continuous */
.facet + .facet { margin-top: -7vw; }

/* ------------------------------------------------------------
   Inner content blocks
   ------------------------------------------------------------ */
.facet-inner {
    position: relative;
    z-index: 4;
    max-width: 720px;
    margin-right: auto;
    padding-top: 4vh;
}
.facet-inner--right {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
    max-width: 720px;
    padding-left: 4vw;
}
.facet-inner--centered {
    margin-left: auto;
    margin-right: auto;
    max-width: 880px;
    text-align: center;
}

/* --- eyebrow (small caps tag with fan) --- */
.facet-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    color: var(--c-cyan);
    font-family: var(--ff-sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: var(--glow-soft);
    animation: glow-breathe 4s ease-in-out infinite;
}
.facet-eyebrow--right {
    flex-direction: row;
    justify-content: flex-start;
}
.facet-eyebrow--centered {
    justify-content: center;
    width: 100%;
}

.eyebrow-fan {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 14px;
    flex-shrink: 0;
    background:
        conic-gradient(from -90deg at 50% 100%,
            transparent 0deg,
            transparent 22deg,
            var(--c-cyan) 23deg, var(--c-cyan) 24deg,
            transparent 25deg,  transparent 42deg,
            var(--c-cyan) 43deg, var(--c-cyan) 44deg,
            transparent 45deg,  transparent 62deg,
            var(--c-cyan) 63deg, var(--c-cyan) 64deg,
            transparent 65deg,  transparent 82deg,
            var(--c-cyan) 83deg, var(--c-cyan) 84deg,
            transparent 85deg,  transparent 102deg,
            var(--c-cyan) 103deg, var(--c-cyan) 104deg,
            transparent 105deg, transparent 122deg,
            var(--c-cyan) 123deg, var(--c-cyan) 124deg,
            transparent 125deg, transparent 142deg,
            var(--c-cyan) 143deg, var(--c-cyan) 144deg,
            transparent 145deg, transparent 180deg);
    filter: drop-shadow(0 0 4px rgba(77,184,199,0.8)) drop-shadow(0 0 8px rgba(77,184,199,0.35));
}
.eyebrow-fan--right { transform: scaleX(-1); }

/* --- titles --- */
.facet-title {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: clamp(40px, 6.4vw, 84px);
    line-height: 1.04;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-silver);
    margin: 0 0 36px 0;
    transition: text-shadow 320ms ease-out, color 320ms ease-out;
}
.facet-title--hero {
    font-size: clamp(48px, 7.6vw, 102px);
    line-height: 1.02;
}
.facet-title--centered {
    text-align: center;
}
.facet-title:hover { text-shadow: var(--glow-soft); }

.title-line {
    display: block;
}
.title-line--accent {
    color: var(--c-cyan);
    text-shadow: var(--glow-soft);
    animation: glow-breathe 4s ease-in-out infinite;
}

/* --- decks / paragraphs --- */
.facet-deck p,
.split-text p,
.singularity-deck,
.coda-text {
    color: var(--c-silver);
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.78;
    margin: 0 0 22px 0;
    max-width: 64ch;
}
.deck-lead {
    font-size: 20px;
    line-height: 1.74;
}
.singularity-deck {
    font-size: 21px;
    line-height: 1.72;
    text-align: center;
    margin: 0 auto 56px auto;
    max-width: 64ch;
}
.coda-text {
    font-size: 19px;
}
.emph {
    color: var(--c-ice);
    font-style: italic;
    letter-spacing: 0.01em;
}

/* --- ornament list (Act I) --- */
.ornament-list {
    list-style: none;
    margin: 32px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--ff-sans);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ash);
}
.ornament-list li {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* stepped pyramid "ziggurat" bullet, 1px stroked tiers, glow */
.ornament-ziggurat {
    position: relative;
    width: 18px;
    height: 14px;
    flex-shrink: 0;
}
.ornament-ziggurat::before,
.ornament-ziggurat::after,
.ornament-list .ornament-ziggurat {
    box-sizing: border-box;
}
.ornament-ziggurat::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 18px; height: 4px;
    border: 1px solid var(--c-cyan);
    box-shadow: var(--glow-soft);
}
.ornament-ziggurat::after {
    content: "";
    position: absolute;
    left: 4px; bottom: 5px;
    width: 10px; height: 4px;
    border: 1px solid var(--c-cyan);
    box-shadow: var(--glow-soft);
}
.ornament-list li {
    transition: color 240ms ease-out;
}
.ornament-list li:hover {
    color: var(--c-silver);
}

/* ------------------------------------------------------------
   Facet 2 :: equation plate + callouts
   ------------------------------------------------------------ */
.equation-plate {
    margin: 28px 0;
    padding: 28px 36px;
    border: 1px solid rgba(77,184,199,0.32);
    background:
        linear-gradient(180deg, rgba(54,58,69,0.55) 0%, rgba(42,45,54,0.55) 100%),
        radial-gradient(ellipse at 20% 30%, rgba(74,79,92,0.4) 0%, transparent 60%);
    position: relative;
}
.equation-plate::before,
.equation-plate::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--c-cyan);
    box-shadow: var(--glow-soft);
    transform: rotate(45deg);
    background: var(--c-anthracite);
}
.equation-plate::before { top: -8px; left: -8px; }
.equation-plate::after  { bottom: -8px; right: -8px; }

.equation-glyph {
    display: block;
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 42px);
    color: var(--c-cyan);
    text-align: center;
    letter-spacing: 0.08em;
    text-shadow: var(--glow-medium);
    animation: glow-breathe 4s ease-in-out infinite;
    margin-bottom: 16px;
}
.equation-plate figcaption {
    font-family: var(--ff-serif);
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
    color: var(--c-ash);
    text-align: center;
    max-width: 56ch;
    margin: 0 auto;
}

.facet-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 28px;
}
.callout {
    border: 1px solid rgba(122,130,144,0.28);
    padding: 14px 16px;
    background: rgba(54,58,69,0.45);
    transition: border-color 280ms ease-out, transform 320ms var(--t-spring);
    position: relative;
}
.callout::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 10px; height: 1px;
    background: var(--c-cyan);
    box-shadow: var(--glow-soft);
}
.callout::after {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 1px; height: 10px;
    background: var(--c-cyan);
    box-shadow: var(--glow-soft);
}
.callout:hover {
    border-color: rgba(77,184,199,0.55);
    transform: translateY(-2px);
}
.callout-key {
    display: block;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 26px;
    color: var(--c-cyan);
    text-shadow: var(--glow-soft);
    line-height: 1.0;
    margin-bottom: 6px;
}
.callout-value {
    display: block;
    font-family: var(--ff-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ash);
}

/* ------------------------------------------------------------
   Facet 3 :: search log entries
   ------------------------------------------------------------ */
.facet-search {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 28px;
}
.search-entry {
    position: relative;
    padding-left: 28px;
}
.search-entry::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--c-cyan) 18%, var(--c-cyan) 82%, transparent 100%);
    box-shadow: var(--glow-soft);
    opacity: 0.6;
}
.entry-header {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--ff-sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--c-cyan);
    margin-bottom: 6px;
    text-shadow: var(--glow-soft);
    animation: glow-breathe 4s ease-in-out infinite;
}
.entry-year {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--c-cyan);
}
.entry-rule {
    flex: 0 0 auto;
    width: 60px;
    height: 1px;
    background: var(--c-cyan);
    box-shadow: var(--glow-soft);
}
.entry-locale {
    color: var(--c-ash);
    text-shadow: none;
    animation: none;
}
.entry-title {
    font-family: var(--ff-serif);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--c-silver);
    margin: 4px 0 10px 0;
    transition: text-shadow 300ms ease-out;
}
.entry-title:hover {
    text-shadow: var(--glow-soft);
}
.search-entry p {
    color: var(--c-silver);
    font-size: 17px;
    line-height: 1.74;
    margin: 0;
    max-width: 60ch;
}

/* ------------------------------------------------------------
   Facet 4 :: split text + diagram
   ------------------------------------------------------------ */
.facet-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    margin-top: 8px;
}
.split-text { min-width: 0; }
.split-diagram {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.diagram-svg {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    height: auto;
}
.diagram-frame path {
    fill: none;
    stroke: rgba(122,130,144,0.30);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}
.diagram-corners path {
    fill: none;
    stroke: var(--c-cyan);
    stroke-width: 1;
    filter: drop-shadow(0 0 3px rgba(77,184,199,0.7));
}
#diagramRays line {
    stroke: var(--c-cyan);
    stroke-width: 1;
    fill: none;
    filter: drop-shadow(0 0 3px rgba(77,184,199,0.7)) drop-shadow(0 0 8px rgba(77,184,199,0.35));
}
.diagram-core {
    fill: var(--c-cyan);
    filter: drop-shadow(0 0 6px rgba(77,184,199,1.0)) drop-shadow(0 0 16px rgba(212,238,241,0.6));
    animation: glow-breathe 4s ease-in-out infinite;
}
.diagram-caption {
    font-family: var(--ff-sans);
    font-size: 11px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--c-cyan);
    text-shadow: var(--glow-soft);
    animation: glow-breathe 4s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Facet 5 :: keystone row
   ------------------------------------------------------------ */
.keystone-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px;
    margin-top: 12px;
    justify-items: center;
}
.keystone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 14px 18px 14px;
    transition: transform 320ms var(--t-spring);
}
.keystone:hover { transform: translateY(-3px); }
.keystone-shape {
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    border: 1px solid var(--c-cyan);
    box-shadow: var(--glow-soft);
    background: rgba(77,184,199,0.05);
    margin-bottom: 12px;
    animation: glow-breathe 4s ease-in-out infinite;
}
.keystone-figure {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.0;
    color: var(--c-silver);
    letter-spacing: 0.04em;
}
.keystone-figure sup {
    font-size: 0.55em;
    color: var(--c-cyan);
    text-shadow: var(--glow-soft);
}
.keystone-unit {
    font-family: var(--ff-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ash);
    text-align: center;
    max-width: 18ch;
}

/* ------------------------------------------------------------
   Facet 6 :: archive metadata
   ------------------------------------------------------------ */
.archive-meta {
    margin: 36px 0 28px 0;
    padding: 28px 0 0 0;
    border-top: 1px solid rgba(74,79,92,0.55);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
}
.meta-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    gap: 24px;
    align-items: baseline;
    border-bottom: 1px dotted rgba(74,79,92,0.45);
    padding-bottom: 12px;
}
.meta-row:last-child { border-bottom: 0; }
.meta-row dt {
    font-family: var(--ff-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ash);
}
.meta-row dd {
    margin: 0;
    font-family: var(--ff-serif);
    font-size: 17px;
    color: var(--c-silver);
}
.status-pulse {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--c-cyan);
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: var(--glow-medium);
    animation: glow-breathe 4s ease-in-out infinite;
    transform: translateY(-1px);
}

.end-mark {
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    color: var(--c-cyan);
    text-shadow: var(--glow-soft);
}
.end-fan {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--c-cyan) 100%);
    box-shadow: var(--glow-soft);
}
.end-fan--right {
    background: linear-gradient(270deg, transparent 0%, var(--c-cyan) 100%);
}
.end-glyph {
    font-size: 18px;
    line-height: 1;
    animation: glow-breathe 4s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Field-line SVG visual layer (radial monopole emission)
   ------------------------------------------------------------ */
.field-radial {
    position: absolute;
    width: 70vmin;
    height: 70vmin;
    top: 50%;
    left: 22%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
    pointer-events: none;
    will-change: transform;
}
.field-radial--right {
    left: auto;
    right: 18%;
    transform: translate(50%, -50%);
}
.field-radial--centered {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vmin;
    height: 90vmin;
    opacity: 0.45;
}
.field-rays line {
    stroke: var(--c-cyan);
    stroke-width: 1;
    fill: none;
    filter: drop-shadow(0 0 4px rgba(77,184,199,0.85)) drop-shadow(0 0 12px rgba(77,184,199,0.40));
}
.field-core {
    fill: var(--c-cyan);
    filter: drop-shadow(0 0 6px rgba(77,184,199,1.0)) drop-shadow(0 0 16px rgba(212,238,241,0.55));
    animation: glow-breathe 4s ease-in-out infinite;
}
.field-core--bright {
    filter: drop-shadow(0 0 8px rgba(77,184,199,1.0)) drop-shadow(0 0 28px rgba(212,238,241,0.85));
}

.toroid {
    position: absolute;
    width: 60vmin;
    height: auto;
    opacity: 0.18;
    pointer-events: none;
}
.toroid ellipse {
    fill: none;
    stroke: var(--c-cyan);
    stroke-width: 1;
    filter: drop-shadow(0 0 3px rgba(77,184,199,0.6));
}
.toroid--left   { top: 64%; left: -8%; transform: rotate(-12deg); }
.toroid--right  { top: 22%; right: -10%; transform: rotate(14deg); }
.toroid--center { top: 18%; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 90vmin; }

/* ------------------------------------------------------------
   Gutter (chevron band riding the diagonal seam)
   ------------------------------------------------------------ */
.gutter {
    position: absolute;
    left: 0;
    width: 100%;
    height: 7vw;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}
.gutter--bottom { bottom: 0; }
.gutter-chevrons {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 16px,
            rgba(77,184,199,0.30) 16px,
            rgba(77,184,199,0.30) 18px,
            transparent 18px,
            transparent 30px
        );
    transform-origin: 0 100%;
    transform: rotate(-7.5deg) translateY(-2px);
    opacity: 0.55;
    filter: drop-shadow(0 0 3px rgba(77,184,199,0.4));
}
.gutter--up .gutter-chevrons {
    transform: rotate(7.5deg) translateY(-2px);
}
.gutter-chevrons--reverse { /* nothing extra; mirror handled by parent */ }

/* glowing seam line drawn on top of the angled cut */
.facet::after {
    content: "";
    position: absolute;
    left: -2%;
    width: 104%;
    height: 2px;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(77,184,199,0.65) 12%, var(--c-cyan) 50%, rgba(77,184,199,0.65) 88%, transparent 100%);
    box-shadow: 0 0 6px rgba(77,184,199,0.65), 0 0 14px rgba(77,184,199,0.35);
    transform-origin: 50% 50%;
    z-index: 6;
    pointer-events: none;
    animation: glow-breathe 4s ease-in-out infinite;
}
.facet--down::after { transform: rotate(-3.5deg) translateY(-3.5vw); }
.facet--up::after   { transform: rotate(3.5deg)  translateY(-3.5vw); }
.facet--final::after { display: none; }

/* ------------------------------------------------------------
   Reveal-on-scroll states (seeded by JS)
   ------------------------------------------------------------ */
.facet-inner > * {
    opacity: 0;
    transform: translate(var(--rx, -22px), var(--ry, 14px));
    filter: blur(0.4px);
    transition:
        opacity 700ms cubic-bezier(0.18, 0.92, 0.32, 1.0),
        transform 760ms var(--t-spring),
        filter 700ms ease-out;
    transition-delay: var(--rd, 0ms);
}
.facet--up .facet-inner > * { --rx: 22px; }
.facet.is-revealed .facet-inner > * {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
}

/* ------------------------------------------------------------
   Glow-breathe (globally synchronized)
   ------------------------------------------------------------ */
@keyframes glow-breathe {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(77,184,199,0.85)) drop-shadow(0 0 12px rgba(77,184,199,0.40));
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(77,184,199,1.00)) drop-shadow(0 0 16px rgba(77,184,199,0.55));
    }
}

/* ------------------------------------------------------------
   Responsive tightening
   ------------------------------------------------------------ */
@media (max-width: 980px) {
    .facet { padding: 12vh 6vw 14vh 6vw; }
    .facet-inner--right { padding-left: 0; }
    .facet-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .progress-rail {
        right: 12px;
        gap: 16px;
    }
    .progress-diamond .diamond-label { display: none; }
    .toroid--left, .toroid--right { display: none; }
    .field-radial { opacity: 0.22; }
    .facet-callouts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    body { font-size: 17px; }
    .masthead { top: 18px; left: 18px; }
    .masthead-line { width: 70px; }
    .facet { padding: 12vh 6vw 14vh 6vw; }
    .facet-title { font-size: clamp(34px, 9vw, 60px); }
    .facet-title--hero { font-size: clamp(40px, 10vw, 72px); }
    .equation-glyph { font-size: 24px; }
    .keystone-row { grid-template-columns: repeat(2, 1fr); }
    .meta-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ------------------------------------------------------------
   Reduced-motion respect
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}