/* Anchor artwork to the page shell so breadcrumbs never shift its position. */
.md-main:not(:has(.landing)):not(:has(.not-found)) { position: relative; isolation: isolate; }
.md-main:not(:has(.landing)):not(:has(.not-found))::before {
 content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 300px; pointer-events: none;
 background: linear-gradient(90deg,#080808 0%,#080808d9 40%,transparent 72%,#080808 100%),url('../assets/spartan-storm-v2.webp') 78% 32% / cover no-repeat;
 opacity: .3; filter: grayscale(1);
 mask-image: linear-gradient(180deg,transparent 0%,#000 20%,#000 48%,transparent 100%);
}
/* A discharge briefly lights the scene, driven by the same clock as the bolt. */
.citadel-flash { position: absolute; inset: 0; z-index: -1; pointer-events: none;
 background: url('../assets/spartan-storm-v2.webp') center / cover no-repeat;
 filter: grayscale(1) brightness(1.55); opacity: var(--strike-light,0);
 mask-image: linear-gradient(90deg,transparent 35%,#000 72%); }
.motion-ready .reveal-target { transition-duration: 320ms,320ms,180ms,180ms,180ms,180ms; transform: translateY(12px); }
.motion-ready .reveal-target.is-visible { transform: translateY(0); }
.intro-enter .landing-copy > * { animation-duration: 380ms; }
.intro-enter .landing-copy > :nth-child(n+4) { animation-delay: 100ms; }
.intro-enter .landing-portrait { animation-duration: 450ms; animation-delay: 80ms; }
.page-motion .md-content__inner > h1 { animation-duration: 350ms; }
.experience-timeline::before { transform-origin: top; }
.page-motion .experience-timeline::before { animation: timeline-arrive 550ms ease-out both; }
@keyframes timeline-arrive { from { opacity: 0; transform: scaleY(.97); } to { opacity: 1; transform: scaleY(1); } }
/* The footer belongs to the same black-and-silver identity as the content. */
.portfolio-footer { background: #080808; border-top: 1px solid #303030; color: #bcbcbc; }
.portfolio-footer .footer-inner { display: grid; grid-template-columns: 1.3fr 1fr .65fr; gap: 2rem; padding: 1.6rem 1rem 1.4rem; }
.portfolio-footer a { color: #d6d6d6; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.portfolio-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.portfolio-footer a:focus-visible { outline: 2px solid #ccc; outline-offset: 3px; }
.portfolio-footer .footer-name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.portfolio-footer p { margin: .2rem 0; font-size: 13px; line-height: 1.6; }
.portfolio-footer .footer-copyright { color: #a0a0a0; margin-top: .75rem; }
.footer-navigation, .footer-social { display: flex; flex-wrap: wrap; align-content: start; gap: 0 1rem; }
.footer-social { flex-direction: column; align-items: start; }
@media(max-width:760px) {
 .md-main:not(:has(.landing)):not(:has(.not-found))::before { height: 220px; opacity: .22; }
 .landing { padding-top: 9rem; }
 .citadel-art, .citadel-mantle, .citadel-flash, .defense-field { height: 220px; }
 .citadel-art, .citadel-flash { background-size: auto 220px; background-position: 100% top; }
 .citadel-flash { mask-image: linear-gradient(0deg,transparent,#000 50%); }
 .portfolio-footer .footer-inner { grid-template-columns: 1fr; gap: .7rem; padding: 1.2rem .8rem; }
 .footer-social { flex-direction: row; gap: 1.2rem; }
}
@media(prefers-reduced-motion:reduce) {
 .citadel-flash { display: none; }
 .page-motion .experience-timeline::before, .intro-enter .landing-copy > *, .intro-enter .landing-portrait, .page-motion .md-content__inner > h1 { animation: none; }
 .motion-ready .reveal-target { opacity: 1; transform: none; transition: none; }
}

/* Visible atmospheric motion stays behind the page title and stops offscreen. */
.md-main:not(:has(.landing)):not(:has(.not-found))::before { animation: title-atmosphere 16s ease-in-out infinite alternate; }
.md-main:not(:has(.landing)):not(:has(.not-found))::after {
 content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 300px; pointer-events: none;
 background: radial-gradient(ellipse 35% 22% at 75% 48%,#d0d0d018,transparent 85%),radial-gradient(ellipse 30% 16% at 45% 65%,#c0c0c012,transparent 85%);
 mask-image: linear-gradient(180deg,transparent,#000 25%,#000 65%,transparent);
 animation: title-mist 12s ease-in-out infinite alternate;
}
@keyframes title-atmosphere { from { transform: translateX(-5px); opacity: .23; } to { transform: translateX(5px); opacity: .34; } }
@keyframes title-mist { from { transform: translateX(-22px); opacity: .45; } to { transform: translateX(22px); opacity: 1; } }
.motion-ready .reveal-target { transform: translateY(20px); transition-duration: 650ms,650ms,180ms,180ms,180ms,180ms; }
.motion-ready .reveal-target.is-visible { transform: translateY(0); }
.portfolio-footer .motion-preference { display: block; min-height: 44px; padding: 0; background: none; border: none; color: #bcbcbc; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.motion-preference:focus-visible { outline: 2px solid #ccc; outline-offset: 3px; }
.motion-preference:disabled { cursor: default; text-decoration: none; }
.motion-suspended .md-main::before, .motion-suspended .md-main::after,
.title-offscreen .md-main::before, .title-offscreen .md-main::after { animation-play-state: paused !important; }
.motion-paused .md-main::before, .motion-paused .md-main::after { animation: none !important; transform: none; }
.motion-paused .reveal-target { opacity: 1 !important; transform: none !important; transition: none !important; }
.motion-paused .intro-enter .landing-copy > *, .motion-paused .experience-timeline::before { animation: none !important; }
@media(max-width:760px) { .md-main:not(:has(.landing)):not(:has(.not-found))::after { height: 220px; } }
@media(prefers-reduced-motion:reduce) {
 .md-main:not(:has(.landing)):not(:has(.not-found))::before,
 .md-main:not(:has(.landing)):not(:has(.not-found))::after { animation: none; transform: none; }
 .motion-ready .reveal-target { opacity: 1; transform: none; transition: none; }
}