/* 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: #1d2c3e;
   --surface-footer: #101b28;
   --surface-nav: #142131;
   --surface-paper: #f4f8fc;
   --text-dark: #202c3a;
   --text-muted: #536275;
   --text-light-muted: #cbd5e1;
   --border-soft: #d4dfeb;
   /* Four colours: each holds for 10s and blends into the next over 12s. */
   --theme-cycle-duration: 88s;
}

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.png) no-repeat center center;
   background-size: cover;
   isolation: isolate;
}
header { min-height: 560px; }
.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.png); z-index: 3; }
.scene-yellow { background-image: url(../img/bg2.png); z-index: 2; }
.scene-red { background-image: url(../img/bg1.png); z-index: 1; }
.scene-charcoal { background-image: url(../img/bg0.png); 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.png);
}

.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%, 11.363636%, 100% { opacity: 1; }
   25%, 86.363636% { opacity: 0; }
}
@keyframes scene-yellow {
   0%, 36.363636% { opacity: 1; }
   50%, 100% { opacity: 0; }
}
@keyframes scene-red {
   0%, 61.363636% { opacity: 1; }
   75%, 100% { opacity: 0; }
}
:root.theme-paused, :root.theme-suspended,
.theme-paused .scene-layer, .theme-suspended .scene-layer {
   animation-play-state: paused;
}

#nav-wrap, #nav-wrap.opaque { background-color: var(--surface-nav); }
#about, #call-to-action, #contact { background: var(--surface-about); }
#about p, #contact, #call-to-action p { color: var(--text-light-muted); }
#resume, #portfolio, .popup-modal { background: var(--surface-paper); color: var(--text-dark); }
#resume h1, #resume h3, #resume h4, #resume .skills em { color: var(--text-dark); }
#resume .info, #resume .date { color: var(--text-muted); }
#resume .work, #resume .education { border-color: var(--border-soft); }
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); }
#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; }
}