/* Silver light, flowing graphite and restrained interactions — CVUPCA. */
.light-stage { position: relative; isolation: isolate; overflow: clip; }
.light-stage > .container { position: relative; z-index: 2; }
.ambient-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    contain: paint;
}
.ambient-field::before,
.ambient-field::after {
    content: '';
    position: absolute;
    pointer-events: none;
    animation-play-state: paused;
}

/* Wide fans originate above the frame, with a dark corridor for the type. */
.ambient-field--rays {
    mask-image: linear-gradient(#000 0%, #000 52%, transparent 100%);
}
.ambient-field--rays::before,
.ambient-field--rays::after {
    inset: -30% -40% -20%;
    transform-origin: 52% 0%;
    background: conic-gradient(from 132deg at 52% 0%,
        transparent 0deg, rgba(244,244,242,.035) 7deg,
        rgba(244,244,242,.30) 10deg, transparent 14deg,
        transparent 23deg, rgba(244,244,242,.16) 27deg,
        transparent 32deg, transparent 44deg,
        rgba(244,244,242,.24) 48deg, transparent 52deg,
        transparent 67deg, rgba(244,244,242,.12) 72deg,
        transparent 77deg, transparent 360deg);
    filter: blur(7px);
    animation: silver-rays 14s ease-in-out infinite alternate;
}
.ambient-field--rays::after {
    opacity: .55;
    transform-origin: 35% 0%;
    animation: silver-rays-counter 19s ease-in-out infinite alternate;
}
.hero { background: radial-gradient(ellipse at 20% 15%, #292929, #080808 70%); }
.hero .hero-aurora { display: none; }
.hero-content { text-shadow: 0 2px 24px rgba(0,0,0,.7); }
.hero-actions { text-shadow: none; }
.hero-crest-name { box-shadow: 0 0 24px rgba(244,244,242,.06); }

/* Gradients are painted once, then moved and scaled as whole layers. */
.ambient-field--flow::before {
    inset: -60% -30%;
    background:
        radial-gradient(ellipse at 28% 35%, rgba(230,230,230,.17), transparent 44%),
        radial-gradient(ellipse at 75% 62%, rgba(145,145,145,.12), transparent 42%),
        conic-gradient(from 30deg at 50% 50%, #080808, #262626, #080808, #171717, #080808);
    opacity: .75;
    animation: graphite-flow 22s ease-in-out infinite alternate;
}
.ambient-field--flow::after {
    inset: 0;
    background: linear-gradient(105deg, rgba(3,3,3,.78), rgba(3,3,3,.48) 55%, rgba(3,3,3,.12));
}
/* The hero uses broad, soft fields instead of directional beams. */
.hero > .ambient-field--flow { z-index: 1; }
.spell-gradient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.light-stage > .spell-ready::before { display: none; }
.light-stage:not(.hero) > .spell-ready { opacity: .32; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.light-stage:not(.hero) > .spell-ready::after { background: linear-gradient(90deg, rgba(8,8,8,.5), transparent, rgba(8,8,8,.3)); }
.hero > .ambient-field--flow.spell-ready::after {
    inset: 0;
    background: radial-gradient(ellipse at 50% 48%, rgba(0,0,0,.42), rgba(0,0,0,.12) 75%);
    animation: none;
    transform: none;
}
.gradient-picker { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; font: 600 .75rem var(--f-body); text-shadow: none; }
.gradient-picker > span { flex-basis: 100%; color: var(--text-secondary); margin-bottom: 4px; }
.gradient-picker button { min-height: 44px; padding: 8px 18px; border: 1px solid #777; color: #fff; background: #080808; cursor: pointer; font: inherit; }
.gradient-picker button[aria-pressed="true"] { background: #f4f4f2; color: #050505; border-color: #f4f4f2; }
.hero > .ambient-field--flow::before {
    inset: -18%;
    background:
        radial-gradient(ellipse 38% 32% at 28% 30%, #686868 0%, #343434 35%, transparent 75%),
        radial-gradient(ellipse 38% 36% at 74% 72%, #494949 0%, #252525 38%, transparent 78%),
        #040404;
    opacity: 1;
    animation: hero-gradient-drift 8s ease-in-out -4s infinite alternate;
}
.hero > .ambient-field--flow::after {
    inset: -18%;
    background:
        radial-gradient(ellipse 32% 42% at 72% 28%, rgba(220,220,220,.22), transparent 75%),
        radial-gradient(ellipse 50% 44% at 45% 58%, rgba(0,0,0,.72), transparent 85%);
    animation: hero-gradient-tide 11s ease-in-out -6s infinite alternate;
}
@keyframes hero-gradient-drift {
    from { transform: translate(-10%, -7%) rotate(-12deg) scale(1.02); }
    to { transform: translate(10%, 7%) rotate(16deg) scale(1.12); }
}
@keyframes hero-gradient-tide {
    from { transform: translate(9%, -6%) rotate(10deg) scale(1); opacity: .65; }
    to { transform: translate(-9%, 6%) rotate(-15deg) scale(1.15); opacity: 1; }
}
.ambient-field::before,
.ambient-field::after { animation-play-state: paused; }
.light-stage.is-light-visible > .ambient-field::before,
.light-stage.is-light-visible > .ambient-field::after { animation-play-state: running; }
.hero.is-light-visible .ambient-field::before,
.hero.is-light-visible .ambient-field::after { animation-play-state: running; }
.doc-preview > :not(.ambient-field) { position: relative; z-index: 1; }
.doc-preview > .ambient-field { z-index: 0; }
.doc-emblem { background: rgba(3,3,3,.55); }
.lac-gateway__mark { -webkit-text-stroke-color: rgba(244,244,242,.48); }
.page-masthead::before { z-index: 1; }

/* Light carries through the quieter reading sections without moving text. */
.manifesto { background: radial-gradient(ellipse at 0 0, #1b1b1b, transparent 65%), var(--surface-raised); }
.principles-section { background: radial-gradient(ellipse at 100% 10%, #151515, transparent 55%), var(--surface-deep); }
.periods-section { background: radial-gradient(ellipse at 0 30%, #171717, transparent 60%), var(--surface-raised); }
footer { background: radial-gradient(ellipse at 50% 0, #191919, transparent 65%), var(--surface-root); }
.quick-access { border-top-color: rgba(244,244,242,.35); }
.quick-card,
.rank-entry,
.principle-card,
.period-clause,
.qa-item summary {
    background-image: radial-gradient(ellipse at 50% 0, rgba(244,244,242,.065), transparent 75%);
    background-size: 100% 0%;
    background-repeat: no-repeat;
    transition: background-size .35s ease, border-color .25s ease, color .25s ease;
}
:is(.quick-card, .rank-entry, .principle-card, .period-clause, .qa-item summary):focus-within {
    background-size: 100% 100%;
}
.qa-item details[open] { box-shadow: inset 0 1px rgba(244,244,242,.22); }
/* Reading stays still; the decorative depth follows the section's passage. */
@supports (animation-timeline: view()) {
    .manifesto > .ambient-field, .principles-section > .ambient-field {
        inset: -50px 0;
        animation: reading-depth linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }
}
@keyframes reading-depth { from { transform: translateY(-35px); } to { transform: translateY(35px); } }
.rank-entry, .period-clause { position: relative; }
.rank-entry::before, .period-clause::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(244,244,242,.65), rgba(244,244,242,.06));
    transform: scaleX(1); transform-origin: left;
}
.reveal-ready :is(.rank-entry, .period-clause):not(.in-view)::before { transform: scaleX(0); }
.reveal-ready :is(.rank-entry, .period-clause).in-view::before { transition: transform 1.1s var(--ease-out) .15s; }
.reveal-ready :is(.rank-entry, .period-clause):nth-child(2n) { transition-delay: .09s; }
.reveal-ready .period-clause:nth-child(3) { transition-delay: .18s; }
.doc-btn svg, .lac-gateway__action svg, .btn svg { transition: transform .3s var(--ease-out); }
:is(.doc-btn, .lac-gateway__action, .btn):is(:hover, :focus-visible) svg { transform: translateX(4px); }
.btn, .doc-btn, .lac-gateway__action { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.btn:focus-visible, .doc-btn:focus-visible, .lac-gateway__action:focus-visible { box-shadow: 0 0 0 5px rgba(244,244,242,.14); }
@media (hover: hover) and (pointer: fine) {
    :is(.quick-card, .rank-entry, .principle-card, .period-clause, .qa-item summary):hover { background-size: 100% 100%; }
    :is(.btn, .doc-btn, .lac-gateway__action):hover { box-shadow: 0 0 30px rgba(244,244,242,.12); }
}


@keyframes silver-rays {
    from { transform: rotate(-9deg) scaleX(.96); opacity: .55; }
    to { transform: rotate(9deg) scaleX(1.12); opacity: .95; }
}
@keyframes silver-rays-counter {
    from { transform: rotate(15deg) scaleX(1.1); }
    to { transform: rotate(-12deg) scaleX(.9); }
}
@keyframes graphite-flow {
    from { transform: translate(-6%, -4%) rotate(-12deg) scale(1); }
    to { transform: translate(8%, 6%) rotate(22deg) scale(1.12); }
}

html.page-hidden .ambient-field::before,
html.page-hidden .ambient-field::after,
html.page-hidden .hero-photo-media,
html.page-hidden .hero-crest-wrap,
html.page-hidden .hero-aurora::before,
html.page-hidden .hero-entrance-rule::after { animation-play-state: paused !important; }
.hero:not(.is-light-visible) .hero-photo-media,
.hero:not(.is-light-visible) .hero-crest-wrap,
.hero:not(.is-light-visible) .hero-aurora::before,
.hero:not(.is-light-visible) .hero-entrance-rule::after { animation-play-state: paused !important; }
@media (max-width: 560px) {
    .ambient-field--rays::before { opacity: .7; filter: blur(4px); }
    .ambient-field--rays::after { display: none; }
    .ambient-field--flow::before { inset: -35%; }
}
@media (prefers-reduced-motion: reduce) {
    .manifesto > .ambient-field, .principles-section > .ambient-field { animation: none; transform: none; }
    .rank-entry::before, .period-clause::before { transform: none !important; transition: none !important; }
    .doc-btn svg, .lac-gateway__action svg, .btn svg { transition: none; transform: none !important; }
    .ambient-field::before, .ambient-field::after { animation: none !important; }
    .ambient-field--rays::before { transform: rotate(-5deg); opacity: .6; }
    .ambient-field--rays::after { display: none; }
    .quick-card, .rank-entry, .principle-card, .period-clause, .qa-item summary { transition: none; }
}