/* Static blue is also the fallback when scripts or an image are unavailable. */
:root {
   --accent: #245f96;
   --accent-hover: #17456e;
   --accent-light: #a7d5ff;
   --surface-page: #101b28;
   --surface-about: #101925;
   --surface-resume: #090f18;
   --surface-footer: #101b28;
   --surface-nav: #142131;
   --surface-paper: #f4f8fc;
   --text-dark: #202c3a;
   --text-muted: #536275;
   --text-light-muted: #cbd5e1;
   --border-soft: #29394d;
   /* Four colours: each holds for 4.2s and blends into the next over 12s. */
   --theme-cycle-duration: 64.8s;
}

body { background: var(--surface-page); }
/* The shared palette already interpolates colours; avoid a second, lagging fade. */
a, button, .button, #go-top a, ul#nav li a, header .scrolldown a {
   transition: none;
}
header, #quotes {
   background: linear-gradient(rgba(5, 10, 18, .62), rgba(5, 10, 18, .58)), #101b28 url(../img/bg3.webp) no-repeat center center;
   background-size: cover;
   isolation: isolate;
}
header { min-height: 560px; }
#home, #home * { -webkit-user-select: none; user-select: none; }
#home .matrix-trigger {
   all: unset;
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
   font: inherit;
   color: inherit;
   text-shadow: inherit;
}
#home .matrix-trigger:focus-visible {
   outline: 2px solid var(--accent-light);
   outline-offset: 8px;
}
/* Carry the scene's tint through the boundary into the dark About surface. */
header::after {
   content: '';
   position: absolute;
   inset: auto 0 0;
   height: clamp(120px, 20vh, 220px);
   background: linear-gradient(to bottom, transparent, var(--surface-page));
   pointer-events: none;
}
header .banner { position: relative; z-index: 1; }
header .scrolldown a { z-index: 1; }
.theme-background, .scene-layer, .theme-background::after {
   position: absolute;
   inset: 0;
   pointer-events: none;
}
.theme-background { z-index: -1; overflow: hidden; }
.scene-layer {
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
}
.scene-blue { background-image: url(../img/bg3.webp); z-index: 3; }
.scene-yellow { background-image: url(../img/bg2.webp); z-index: 2; }
.scene-red { background-image: url(../img/bg1.webp); z-index: 1; }
.scene-charcoal { background-image: url(../img/bg0.webp); z-index: 0; }
.theme-background::after {
   content: '';
   z-index: 4;
   /* A constant scrim prevents brightness pulses and preserves white text. */
   background: linear-gradient(rgba(5, 10, 18, .62), rgba(5, 10, 18, .58));
}
#quotes .theme-background::after {
   background: rgba(5, 10, 18, .74);
}
#quotes {
   background-image: linear-gradient(rgba(5, 10, 18, .74), rgba(5, 10, 18, .74)), url(../img/bg3.webp);
}

.theme-running { animation: site-palette var(--theme-cycle-duration) ease-in-out infinite; }
.theme-running .scene-blue { animation: scene-blue var(--theme-cycle-duration) ease-in-out infinite; }
.theme-running .scene-yellow { animation: scene-yellow var(--theme-cycle-duration) ease-in-out infinite; }
.theme-running .scene-red { animation: scene-red var(--theme-cycle-duration) ease-in-out infinite; }
/* Lower layers stay opaque beneath the fading layer: no fade through black. */
@keyframes scene-blue {
   0%, 6.481481%, 100% { opacity: 1; }
   25%, 81.481481% { opacity: 0; }
}
@keyframes scene-yellow {
   0%, 31.481481% { opacity: 1; }
   50%, 100% { opacity: 0; }
}
@keyframes scene-red {
   0%, 56.481481% { opacity: 1; }
   75%, 100% { opacity: 0; }
}
:root.theme-paused, :root.theme-suspended,
:root.matrix-transmission-open,
.theme-paused .scene-layer, .theme-suspended .scene-layer,
.matrix-transmission-open .scene-layer {
   animation-play-state: paused;
}
:root.matrix-transmission-open { overflow: hidden; }
.matrix-terminal {
   position: fixed;
   inset: 0;
   z-index: 10000;
   box-sizing: border-box;
   overflow: auto;
   padding: clamp(76px, 12vh, 120px) clamp(24px, 5vw, 80px) 48px;
   background: #000;
   color: #00ff41;
   cursor: default;
   text-align: left;
}
.matrix-terminal[hidden] { display: none; }
.matrix-terminal-output {
   margin: 0;
   padding: 0;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   font: 400 clamp(16px, 2vw, 24px)/2.1 'Courier New', monospace;
   letter-spacing: .025em;
   color: #00ff41;
   text-shadow: 0 0 7px rgba(0, 255, 65, .35);
}
.matrix-terminal-cursor {
   display: inline-block;
   width: .8em;
   height: .8em;
   margin-left: .12em;
   vertical-align: -.15em;
   background: #00ff41;
   animation: matrix-cursor-blink 900ms steps(1, end) infinite;
}
@keyframes matrix-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.matrix-terminal-close {
   position: absolute;
   top: 20px;
   right: 24px;
   margin: 0;
   padding: 8px 12px;
   border: 1px solid #174f26;
   background: #000;
   color: #83c494;
   font: 12px/1.5 'Courier New', monospace;
   text-transform: none;
   letter-spacing: 0;
}
.matrix-terminal-close:hover, .matrix-terminal-close:focus-visible {
   background: #061509;
   color: #00ff41;
}
.matrix-terminal-close:focus-visible { outline: 2px solid #00ff41; outline-offset: 4px; }
.matrix-terminal-announcement {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
}

#nav-wrap, #nav-wrap.opaque { background-color: var(--surface-nav); }
#call-to-action, #contact { background: var(--surface-about); }
#about p, #contact, #call-to-action p { color: var(--text-light-muted); }
#portfolio, .popup-modal { background: var(--surface-paper); color: var(--text-dark); }
#about, #resume { position: relative; isolation: isolate; }
#about {
   background: linear-gradient(to bottom, var(--surface-page), transparent 260px), var(--surface-about);
}
#resume {
   background: linear-gradient(to bottom, var(--surface-about), transparent 300px), var(--surface-resume);
   color: var(--text-light-muted);
}
#resume h1, #resume h3, #resume h4, #resume .skills em { color: #f1f5f9; }
#resume .info, #resume .date { color: var(--text-light-muted); }
#resume a, #resume a:visited { color: var(--accent-light); }
#resume a:hover, #resume a:focus { color: #fff; }
#resume a:focus-visible { outline-color: var(--accent-light); }
#resume h1 span { border-color: var(--accent-light); }
#resume .work, #resume .education { border-color: var(--border-soft); }
/* Glyphs fill the space beside the text; the portrait stays in the foreground. */
.matrix-rain {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   pointer-events: none;
   user-select: none;
   z-index: -1;
}
footer { background: var(--surface-footer); color: var(--text-light-muted); }
footer a, footer a:visited { color: var(--text-light-muted); }
footer a:hover, footer a:focus { color: var(--accent-light); }
footer {
   padding: 64px 20px 32px;
   margin-bottom: 0;
}
footer .footer-identity {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   color: #fff;
   font: 20px/28px 'opensans-semibold', sans-serif;
}
footer .footer-identity img {
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 7px;
}
footer .footer-location {
   margin: 14px 0 8px;
   font-size: 14px;
   line-height: 24px;
}
footer .footer-location span { padding: 0 6px; }
footer .footer-contact {
   display: flex;
   justify-content: center;
   gap: 28px;
   margin-bottom: 24px;
}
footer .footer-contact a {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   color: var(--accent-light);
   font: 14px/24px 'opensans-semibold', sans-serif;
}
footer .footer-contact a:hover, footer .footer-contact a:focus { color: #fff; }
footer .footer-copyright {
   margin: 0 0 8px;
   font-size: 13px;
   line-height: 22px;
}
footer .footer-credit {
   margin: 0;
   font-size: 12px;
   line-height: 22px;
}
footer .footer-credit a { text-decoration: underline; text-underline-offset: 3px; }
#go-top a { background-color: var(--surface-about); }
#go-top a:hover, #go-top a:focus { background-color: var(--accent); }
#about .button, #about .button:visited { color: #fff; }
#about .button:hover, #about .button:focus { color: #fff; }
mark, ins { background: var(--accent-light); color: var(--text-dark); }

@media only screen and (max-width: 767px) {
   #nav-wrap:target > ul#nav { background: var(--surface-nav); }
   ul#nav li { border-bottom-color: var(--text-muted); }
}
@media (prefers-reduced-motion: reduce) {
   a, button { transition: none !important; }
   .matrix-rain { display: none; }
   .matrix-terminal-cursor { animation: none; }
}