/* Atmosphere layered over every design: grain, vignette, ground fog, a passing apparition, failing-bulb flicker, dead treelines. */
.atmo { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.atmo-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.atmo-grain { opacity: .09; mix-blend-mode: overlay; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-6%,-2%); } 80% { transform: translate(5%,4%); } 100% { transform: translate(0,0); } }

.atmo-fog { top: auto; height: 42vh; overflow: hidden; opacity: .55; }
.fog-layer { position: absolute; bottom: -12vh; left: 0; width: 300%; height: 52vh;
  background:
    radial-gradient(28% 40% at 12% 70%, rgba(200,205,215,.22), transparent 70%),
    radial-gradient(22% 35% at 30% 80%, rgba(200,205,215,.18), transparent 70%),
    radial-gradient(30% 45% at 48% 75%, rgba(200,205,215,.2), transparent 70%),
    radial-gradient(24% 38% at 64% 82%, rgba(200,205,215,.18), transparent 70%),
    radial-gradient(28% 40% at 80% 72%, rgba(200,205,215,.22), transparent 70%),
    radial-gradient(22% 35% at 96% 80%, rgba(200,205,215,.18), transparent 70%);
  filter: blur(18px); animation: drift 70s linear infinite; }
.fog-layer.two { bottom: -20vh; opacity: .7; animation-duration: 110s; animation-direction: reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-66.66%); } }

.atmo-ghost { inset: auto; left: 0; top: 0; width: 120px; height: 230px; opacity: 0; z-index: 60; filter: blur(5px); }
.atmo-ghost svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .site-header .brand { transition: opacity .45s ease, visibility .45s; }
  body.brand-hidden .site-header .brand { opacity: 0; visibility: hidden; }
  body.brand-instant .site-header .brand { transition: none; }
  .site-header { transition: background-color .45s ease, border-color .45s ease, backdrop-filter .45s ease; }
  body.brand-hidden .site-header { background-color: transparent; border-bottom-color: transparent; backdrop-filter: none; }
  body.brand-instant .site-header { transition: none; }
}

/* failing-bulb flicker on the big logo and hero headlines */
.hero > img, .hero-copy > img, .hero-logo img, .mast-top .brand img, .mobile-mast img, .blaze img.big { animation: flicker 9s infinite; }
.hero h1, .entry h1, .blaze h1 { text-shadow: 0 0 18px rgba(255,255,255,.08), 0 0 2px rgba(255,255,255,.1); animation: breathe 7s ease-in-out infinite; }
@keyframes flicker {
  0%, 61%, 64%, 66%, 100% { opacity: 1; }
  62% { opacity: .35; } 63% { opacity: .9; } 65% { opacity: .2; }
  86% { opacity: 1; } 87% { opacity: .7; } 88% { opacity: 1; }
}
@keyframes breathe { 0%, 100% { filter: blur(0); } 50% { filter: blur(.4px); } }

/* location photos read as old surveillance stills */
.place-photo, .mile .photo, .band-photo, .stop-card, .evidence-thumb { position: relative; }
.place-photo::after, .mile .photo::after, .band-photo::after, .evidence-thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,.55)); }
.place-card:hover .place-photo, .mile:hover .photo, .band:hover .band-photo { animation: glitch .45s steps(3) 1; }
@keyframes glitch { 0% { transform: translate(0); filter: none; } 33% { transform: translate(-3px, 1px); filter: hue-rotate(-25deg) saturate(1.6); } 66% { transform: translate(3px, -1px); filter: brightness(1.4); } 100% { transform: translate(0); } }

/* dead-tree silhouettes */
.treeline { position: absolute; left: 0; right: 0; bottom: 0; height: 340px; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 90% at 50% 100%, var(--horizon, rgba(160,170,190,.14)), transparent 72%); }
.treeline svg { width: 100%; height: 100%; display: block; opacity: .5; filter: blur(1.4px); }
.has-trees { position: relative; }
.has-trees > .hero-copy { position: relative; z-index: 1; }
.atmo-moon { position: absolute; top: 60px; right: 9%; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 35%, #fbf3dc, #d9cba6 60%, #b9a77e); box-shadow: 0 0 60px 20px rgba(240,225,180,.18), 0 0 160px 60px rgba(240,225,180,.08); opacity: .85; }
.atmo-moon::after { content: ''; position: absolute; left: -60px; right: -60px; top: 50px; height: 34px; border-radius: 50%;
  background: rgba(10,13,20,.85); filter: blur(10px); animation: clouds 22s ease-in-out infinite alternate; }
@keyframes clouds { from { transform: translateX(-30px); } to { transform: translateX(40px); } }

@media (max-width: 900px) {
  .atmo-fog { height: 30vh; opacity: .45; }
  .treeline { height: 190px; }
  .atmo-moon { width: 70px; height: 70px; top: 20px; right: 6%; }
  .atmo-moon::after { top: 30px; height: 20px; }
  .atmo-ghost { width: 80px; height: 155px; }
}
@media (prefers-reduced-motion: reduce) {
  .atmo-grain, .fog-layer, .atmo-ghost, .hero > img, .hero-copy > img, .hero-logo img, .mast-top .brand img, .blaze img.big, .hero h1, .entry h1, .blaze h1, .atmo-moon::after { animation: none !important; }
}
.lit-window { animation: candle 5s infinite; }
@keyframes candle { 0%, 100% { opacity: .9; } 20% { opacity: .55; } 22% { opacity: .85; } 48% { opacity: .7; } 50% { opacity: .15; } 53% { opacity: .8; } 80% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .lit-window { animation: none; } }