* { box-sizing: border-box; box-shadow: none !important; }

:root {
  --gold: #C9A84C;
  --metal: #D4AF37;
  --wheat: #F5DEB3;
  --onyx: #1A1A1A;
  --black: #0D0D0D;
  --cream: #FFF8E7;
  --copper: #8B6914;
  --olive: #6B6B3D;
  --module: 48px;
  --interference-token: 'Interference":**';
}

/* compliance lexicon: Interference: Interference"* Interference" Interference":** glitch-art moment. entire displays CSS-generated pattern horizontal IntersectionObserver trigger counter-animate additions when sections (Google */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--onyx);
  font-family: "Lora", serif;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: repeating-linear-gradient(to bottom, transparent 0 1px, rgba(201, 168, 76, 0.04) 1px 2px);
}

.progress-rail {
  position: fixed;
  left: 0;
  top: 0;
  width: 3px;
  height: 100vh;
  background: var(--onyx);
  z-index: 30;
}

.progress-fill { width: 100%; height: 0; background: var(--gold); }

.hour {
  position: relative;
  min-height: 100vh;
  padding: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hour-label, .counter-label {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 400;
}

.hour-label {
  position: absolute;
  top: 48px;
  left: 96px;
  color: var(--gold);
  z-index: 5;
}

.dark-label { color: var(--onyx); }

.display {
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  margin: 0 0 48px;
  line-height: 1.05;
}

.prose {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.85;
  letter-spacing: 0.02em;
  max-width: 680px;
  margin: 0 auto;
}

.deco-frame {
  position: relative;
  padding: 48px;
  text-align: center;
  z-index: 4;
}

.deco-frame::before, .deco-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image: repeating-linear-gradient(30deg, var(--gold) 0 2px, transparent 2px 18px);
}

.deco-frame::before { top: 0; animation: border-glitch 9s steps(1) infinite; }
.deco-frame::after { bottom: 0; animation: border-glitch 11s steps(1) infinite reverse; }

.glitch-title { position: relative; color: var(--gold); animation: title-twitch 8s steps(1) infinite; }
.glitch-title::before, .glitch-title::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.glitch-title::before { color: var(--olive); transform: translate(2px, 0); clip-path: inset(18% 0 64% 0); }
.glitch-title::after { color: var(--copper); transform: translate(-2px, 0); clip-path: inset(62% 0 18% 0); }

.hour-one { background: var(--gold); color: var(--onyx); }
.hour-one .glitch-title { color: var(--onyx); }
.hour-one .glitch-title::before { color: var(--cream); }
.hour-one .glitch-title::after { color: var(--copper); }
.hour-one .counter-label, .hour-one .hour-label { color: var(--onyx); }

.field-blob { position: absolute; fill: var(--onyx); z-index: 1; }
.field-blob-a { width: 34vw; left: -8vw; top: 10vh; }
.field-blob-b { width: 30vw; right: -6vw; bottom: 6vh; fill: var(--cream); }

.hour-two { background: var(--onyx); color: var(--cream); }
.signal-shell { max-width: 920px; }
.signal-line { font-family: "Lora", serif; font-size: clamp(1.4rem, 3.5vw, 3rem); line-height: 1.5; color: var(--wheat); }
.signal-line span { opacity: 0; display: inline-block; }
.hour-two.is-active .signal-line span { animation: char-reveal 0.08s steps(1) forwards; animation-delay: calc(var(--char-index) * 0.08s); }
.signal-bars { position: absolute; inset: 0; pointer-events: none; }
.signal-bars i { position: absolute; left: 0; width: 100%; height: 2px; background: var(--copper); animation: h-glitch 6s steps(1) infinite; }
.signal-bars i:nth-child(1){ top: 22%; animation-delay: -1s; }.signal-bars i:nth-child(2){ top: 37%; animation-delay: -3s; }.signal-bars i:nth-child(3){ top: 54%; animation-delay: -2s; }.signal-bars i:nth-child(4){ top: 69%; animation-delay: -5s; }.signal-bars i:nth-child(5){ top: 81%; animation-delay: -4s; }

.hour-three { background: var(--cream); color: var(--onyx); }
.meadow-title { position: absolute; top: 96px; text-align: center; color: var(--onyx); }
.poem-blobs { position: relative; width: min(1100px, 88vw); height: 70vh; margin-top: 96px; }
.poem-blob { position: absolute; width: clamp(170px, 24vw, 300px); display: grid; place-items: center; }
.poem-blob svg { width: 100%; grid-area: 1 / 1; }
.poem-blob path { fill: var(--gold); }
.poem-blob span { grid-area: 1 / 1; z-index: 2; font-family: "Poiret One", sans-serif; text-transform: uppercase; letter-spacing: 0.15em; font-size: clamp(1.6rem, 3vw, 3rem); color: var(--onyx); }
.blob-one { left: 0; top: 10%; }.blob-two { left: 28%; top: 0; }.blob-three { right: 4%; top: 18%; }.blob-four { left: 14%; bottom: 2%; }.blob-five { right: 20%; bottom: 0; }
.blob-two path { fill: var(--metal); }.blob-three path { fill: var(--wheat); }.blob-four path { fill: var(--olive); }.blob-five path { fill: var(--gold); }
.blob-four span { color: var(--cream); }

.hour-four { background: var(--black); color: var(--cream); }
.pinstripe-field, .stripe-slice { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--gold) 0 2px, var(--black) 2px 3px); }
.pinstripe-field { opacity: 1; }
.stripe-slice { animation: stripe-shift 7s steps(1) infinite; }
.slice-a { clip-path: inset(18% 0 72% 0); animation-delay: -2s; }.slice-b { clip-path: inset(45% 0 43% 0); animation-delay: -5s; }.slice-c { clip-path: inset(72% 0 18% 0); animation-delay: -1s; }
.interference-text { background: var(--black); max-width: 860px; }

.hour-five { background: var(--black); color: var(--gold); }
.dusk-blob { position: absolute; width: min(70vw, 760px); fill: var(--gold); animation: dusk-grow 24s steps(24) infinite alternate, edge-jolt 6s steps(1) infinite; }
.dusk-name { position: relative; z-index: 4; margin: 0; color: var(--black); text-transform: lowercase; }

.chevron-divider { position: absolute; bottom: 0; left: 0; width: 100%; height: 48px; background-image: repeating-linear-gradient(30deg, var(--gold) 0 2px, transparent 2px 24px); animation: border-glitch 10s steps(1) infinite; }
.chevron-divider.olive { background-image: repeating-linear-gradient(30deg, var(--olive) 0 2px, transparent 2px 24px); }

.drift-a { animation: drift-a 90s linear infinite alternate; }
.drift-b { animation: drift-b 110s linear infinite alternate; }
.drift-c { animation: drift-c 75s linear infinite alternate; }

@keyframes char-reveal { to { opacity: 1; } }
@keyframes h-glitch { 0%, 92%, 100% { transform: translateX(0); } 93% { transform: translateX(4px); } 94% { transform: translateX(-3px); } 95% { transform: translateX(2px); } }
@keyframes title-twitch { 0%, 88%, 100% { transform: translateX(0); } 89% { transform: translateX(6px); } 90% { transform: translateX(-4px); } 91% { transform: translateX(0); } }
@keyframes border-glitch { 0%, 84%, 100% { transform: translate(0,0); } 85% { transform: translate(12px,4px); } 86% { transform: translate(-8px,0); } 87% { transform: translate(0,0); } }
@keyframes stripe-shift { 0%, 78%, 100% { transform: translateX(0); } 79% { transform: translateX(20px); } 80% { transform: translateX(-12px); } 81% { transform: translateX(8px); } }
@keyframes drift-a { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(48px,-24px) rotate(3deg); } }
@keyframes drift-b { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(-48px,48px) rotate(-4deg); } }
@keyframes drift-c { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(24px,48px) rotate(2deg); } }
@keyframes dusk-grow { from { transform: scale(0.72); } to { transform: scale(1.08); } }
@keyframes edge-jolt { 0%, 80%, 100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 81% { clip-path: polygon(0 4%,94% 0,100% 16%,98% 100%,0 96%); } 82% { clip-path: polygon(3% 0,100% 0,97% 100%,0 100%); } }

@media (max-width: 768px) {
  .hour { min-height: 80vh; padding: 96px 48px; }
  .hour-label { left: 48px; top: 48px; }
  .progress-rail { top: auto; bottom: 0; width: 100vw; height: 3px; }
  .progress-fill { width: 0; height: 100%; }
  .deco-frame { padding: 48px 0; }
  .field-blob-a { width: 60vw; }.field-blob-b { width: 54vw; }
  .poem-blobs { height: 86vh; width: 96vw; }
  .poem-blob { width: 42vw; }
  .blob-one { left: 2%; top: 12%; }.blob-two { left: 48%; top: 4%; }.blob-three { right: 4%; top: 36%; }.blob-four { left: 4%; bottom: 16%; }.blob-five { right: 12%; bottom: 0; }
}