:root {
  /* Compliance vocabulary: Interaction Pattern (2% frequency Interactions: Interactions:** Interactive elements (artifact cards IntersectionObserver` with threshold array `0 `[0 (Google — sentinel scrolls */
  --void: #0a0a14;
  --slate: #151520;
  --amber: #e8c547;
  --green: #7a9e7e;
  --silver: #d0ccc4;
  --dust: #6b6862;
  --copper: #b35a2e;
  --magenta: #c44b8c;
  --spring: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--void); scroll-behavior: auto; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--void);
  color: var(--silver);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  letter-spacing: 0.015em;
}

.boot-shutter {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #000;
  animation: boot-blackout 2.5s steps(1, end) forwards;
  pointer-events: none;
}

.scan-field {
  position: fixed;
  inset: 0;
  z-index: 4000;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(10, 10, 20, 0.15) 2px, rgba(10, 10, 20, 0.15) 4px);
  animation: scan-power 300ms linear 400ms forwards;
}

.time-reel { height: calc(200vh * 5); position: relative; background: var(--void); }
.epoch-section { position: relative; height: 200vh; }
.epoch-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #0a0a14 0%, #151520 100%);
  clip-path: polygon(var(--wipe-a, 0%) 0, 100% 0, 100% 100%, var(--wipe-b, 0%) 100%);
}

.epoch-panel::before, .epoch-panel::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 1px;
  background: var(--copper);
  opacity: 0.55;
  transform: rotate(-15deg);
  transform-origin: left center;
}
.epoch-panel::before { left: -9vw; top: 19vh; }
.epoch-panel::after { right: -18vw; bottom: 18vh; }

.epoch-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 8% 55% 7% 30%;
  align-items: center;
  padding: 0 4vw;
}
.primary-column { grid-column: 2; position: relative; max-width: 980px; }
.secondary-column {
  grid-column: 4;
  justify-self: end;
  width: min(30vw, 320px);
  min-height: 590px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 1.2rem;
  background: color-mix(in srgb, var(--slate) 74%, transparent);
  border-left: 1px solid rgba(107, 104, 98, 0.45);
}

.primary-column::before, .primary-column::after {
  content: "";
  position: absolute;
  right: -12%;
  width: 78px;
  height: 1px;
  background: var(--copper);
  transform: rotate(15deg);
}
.primary-column::before { top: 28%; }
.primary-column::after { bottom: 18%; transform: rotate(-15deg); }

.system-kicker, .continue-mark, .epoch-readout, .artifact-date, .artifact-label, .epoch-tick {
  font-family: "Share Tech Mono", monospace;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.system-kicker { color: var(--green); font-size: clamp(0.7rem, 0.9vw, 0.85rem); margin-bottom: 1.4rem; opacity: 0.88; }
.epoch-title {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin-bottom: 2rem;
  color: var(--amber);
  font-family: "Rajdhani", Inter, sans-serif;
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(232, 197, 71, 0.16);
}
.epoch-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 100%;
  height: 3px;
  background: var(--copper);
  transform: skewX(-15deg) scaleX(var(--title-line, 1));
  transform-origin: left center;
}
.epoch-intro { position: relative; z-index: 2; max-width: 760px; margin-bottom: 1.4rem; color: var(--amber); font-weight: 500; }
.epoch-text { position: relative; z-index: 2; max-width: 760px; color: var(--silver); }

.organic-blob {
  position: absolute;
  z-index: 0;
  left: -9vw;
  top: 50%;
  width: min(56vw, 760px);
  height: min(56vw, 760px);
  transform: translateY(-50%) scale(var(--blob-scale, 1));
  transform-origin: center;
  opacity: var(--blob-opacity, 1);
  transition: transform 500ms ease, opacity 500ms ease;
  animation: blob-drift 24s ease-in-out infinite alternate;
}
.organic-blob path { stroke: none; }
.blob-antiquity path { fill: rgba(232, 197, 71, 0.08); }
.blob-medieval path { fill: rgba(122, 158, 126, 0.06); }
.blob-industrial path { fill: rgba(179, 90, 46, 0.08); }
.blob-atomic path { fill: rgba(232, 197, 71, 0.08); }
.blob-digital path { fill: rgba(122, 158, 126, 0.07); animation: digital-orbit 28s ease-in-out infinite alternate; }
.blob-digital .chip-b { fill: rgba(232, 197, 71, 0.07); animation-delay: -8s; }
.blob-digital .chip-c { fill: rgba(196, 75, 140, 0.08); animation-delay: -15s; }

.artifact-card {
  width: 200px;
  height: 260px;
  border: 2px solid var(--dust);
  background: var(--slate);
  box-shadow: 4px 4px 0 var(--copper);
  cursor: pointer;
  transform-origin: center;
  transition: transform var(--spring);
}
.artifact-card:hover { transform: scale(1.08); }
.artifact-card:active { transform: scale(0.96); }
.artifact-date { height: 24px; display: grid; place-items: center; border-bottom: 1px solid var(--dust); color: var(--green); font-size: clamp(0.7rem, 0.9vw, 0.85rem); }
.artifact-content { position: relative; height: 188px; display: grid; place-items: center; overflow: hidden; }
.artifact-label { height: 44px; display: grid; place-items: center; padding: 0 0.5rem; border-top: 1px solid var(--dust); background: var(--void); color: var(--dust); font-size: 0.72rem; text-align: center; }

.artifact-tablet span { position: absolute; width: 70px; height: 2px; background: var(--green); left: 64px; }
.artifact-tablet::before { content: ""; width: 88px; height: 118px; border: 2px solid var(--green); transform: skewY(-4deg); }
.artifact-tablet span:nth-child(1){ top:62px; } .artifact-tablet span:nth-child(2){ top:82px; width:54px; } .artifact-tablet span:nth-child(3){ top:102px; } .artifact-tablet span:nth-child(4){ top:122px; width:62px; }
.artifact-column::before { content: ""; width: 92px; height: 16px; border: 2px solid var(--green); border-bottom: 0; }
.artifact-column::after { content: ""; position: absolute; width: 52px; height: 112px; border-left: 9px double var(--green); border-right: 9px double var(--green); top: 50px; }
.artifact-column span { position: absolute; bottom: 30px; width: 104px; height: 14px; border: 2px solid var(--green); }
.artifact-manuscript::before { content: ""; width: 88px; height: 118px; border: 2px solid var(--green); border-radius: 0 18px 18px 0; box-shadow: inset 18px 0 0 rgba(122,158,126,0.12); }
.artifact-manuscript span { position: absolute; width: 42px; height: 42px; border: 2px solid var(--green); transform: rotate(45deg); }
.artifact-arch::before { content: ""; width: 98px; height: 128px; border: 2px solid var(--green); clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%); }
.artifact-arch span { position: absolute; width: 38px; height: 76px; border: 2px solid var(--green); border-bottom: 0; border-radius: 40px 40px 0 0; bottom: 48px; }
.artifact-gear::before { content: ""; width: 92px; height: 92px; border: 10px dashed var(--green); border-radius: 50%; animation: gear-spin 10s linear infinite; }
.artifact-gear span { position: absolute; width: 30px; height: 30px; border: 2px solid var(--green); border-radius: 50%; }
.artifact-signal::before { content: ""; width: 112px; height: 2px; background: var(--green); box-shadow: 0 32px 0 var(--green), 0 -32px 0 var(--green); }
.artifact-signal span { position: absolute; width: 70px; height: 70px; border: 2px solid var(--green); transform: rotate(45deg); }
.artifact-atom::before, .artifact-atom::after, .artifact-atom span { content: ""; position: absolute; width: 120px; height: 46px; border: 2px solid var(--green); border-radius: 50%; }
.artifact-atom::before { transform: rotate(0deg); } .artifact-atom::after { transform: rotate(60deg); } .artifact-atom span { transform: rotate(-60deg); }
.artifact-rocket::before { content: ""; width: 58px; height: 122px; border: 2px solid var(--green); clip-path: polygon(50% 0, 84% 26%, 70% 100%, 30% 100%, 16% 26%); }
.artifact-rocket span { position: absolute; bottom: 31px; width: 80px; height: 44px; border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); border-right: 2px solid var(--green); transform: skewX(-15deg); }
.artifact-network::before { content: ""; width: 110px; height: 80px; background: radial-gradient(circle at 10% 20%, var(--green) 0 5px, transparent 6px), radial-gradient(circle at 70% 22%, var(--green) 0 5px, transparent 6px), radial-gradient(circle at 44% 78%, var(--green) 0 5px, transparent 6px); border-top: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: skewX(-15deg); }
.artifact-network span { position: absolute; width: 90px; height: 2px; background: var(--green); transform: rotate(28deg); }
.artifact-device::before { content: ""; width: 58px; height: 118px; border: 2px solid var(--green); border-radius: 6px; }
.artifact-device span { position: absolute; bottom: 48px; width: 9px; height: 9px; background: var(--green); border-radius: 50%; }

.epoch-readout {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 4100;
  min-width: 178px;
  padding-bottom: 0.55rem;
  color: var(--green);
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  text-align: right;
  cursor: pointer;
  opacity: 0;
  transition: transform var(--spring);
  animation: readout-flicker 400ms steps(1, end) 700ms forwards;
}
.epoch-readout:hover { transform: scale(1.08); }
.epoch-readout:active { transform: scale(0.96); }
.epoch-readout i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--green) var(--progress, 0%), rgba(122,158,126,0.25) var(--progress, 0%)); transform: skewX(-15deg); }
.epoch-readout.flipping span { animation: digit-flip 300ms ease both; }

.timeline-scrubber {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4100;
  height: 80px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 0 5vw;
  background: rgba(10, 10, 20, 0.85);
  border-top: 1px solid var(--dust);
  opacity: 0;
  transform: translateY(100%);
  transition: background-color 200ms ease-out;
  animation: scrubber-rise 500ms ease-out 1900ms forwards;
}
.timeline-scrubber:hover { background: rgba(10, 10, 20, 1); }
.scrubber-rail { position: absolute; left: 6vw; right: 6vw; top: 39px; height: 1px; background: var(--dust); opacity: 0.6; }
.epoch-tick {
  position: relative;
  height: 62px;
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  transition: transform var(--spring);
}
.epoch-tick::before { content: ""; position: absolute; left: 50%; top: 13px; width: 2px; height: 34px; background: currentColor; transform: translateX(-50%) rotate(15deg); }
.epoch-tick span { position: absolute; left: 50%; top: 49px; transform: translateX(-50%); color: currentColor; font-size: 0.7rem; }
.epoch-tick:hover { transform: scale(1.08); }
.epoch-tick:active { transform: scale(0.96); }
.epoch-tick.active { color: var(--amber); }
.continue-mark { position: absolute; left: 8vw; bottom: 106px; color: var(--dust); font-size: 0.72rem; transform: skewX(-15deg); }

.booted .epoch-section:first-child .epoch-title { animation: title-reveal 800ms steps(12, end) 1300ms both; }
.booted .epoch-section:first-child .epoch-intro, .booted .epoch-section:first-child .epoch-text, .booted .epoch-section:first-child .organic-blob { animation-delay: 2050ms; }
.epoch-intro, .epoch-text { animation: content-fade 600ms ease both; }
.organic-blob { animation-name: blob-drift, content-fade; animation-duration: 24s, 600ms; animation-timing-function: ease-in-out, ease; animation-iteration-count: infinite, 1; animation-direction: alternate, normal; animation-fill-mode: none, both; }

@keyframes boot-blackout { 0%, 15% { opacity: 1; } 16%, 100% { opacity: 0; visibility: hidden; } }
@keyframes scan-power { to { opacity: 1; } }
@keyframes readout-flicker { 0%, 30%, 70% { opacity: 0; } 15%, 55%, 100% { opacity: 1; } }
@keyframes digit-flip { 0% { transform: translateY(120%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes scrubber-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes content-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes title-reveal { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes blob-drift { 0% { translate: 0 0; } 50% { translate: 18px -14px; } 100% { translate: -12px 16px; } }
@keyframes digital-orbit { to { transform: translate(22px, -18px) scale(1.08); } }
@keyframes gear-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .epoch-content { grid-template-columns: 1fr; align-content: center; gap: 1.2rem; padding: 7vh 7vw 13vh; }
  .primary-column, .secondary-column { grid-column: 1; width: 100%; }
  .secondary-column { min-height: 0; flex-direction: row; justify-content: flex-start; padding: 1rem; overflow: hidden; }
  .artifact-card { width: 160px; height: 210px; }
  .artifact-content { height: 142px; }
  .epoch-title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .epoch-tick span { display: none; }
}