/* ==========================================================================
   BYTES — design tokens
   A trefoil knot can't be untangled without cutting it: a fitting emblem
   for a log of small notes that all loop back into each other.
   ========================================================================== */

:root{
  /* -- color -- */
  --void:        #040404;   /* hero black */
  --graphite:    #0b0c0e;   /* feed background */
  --graphite-2:  #131417;   /* card surface */
  --steel:       #9fb3bf;   /* cool rim-light tint */
  --ignite:      #ff8a42;   /* warm ignition / accent */
  --ignite-dim:  #c96a35;
  --parchment:   #f2ede2;   /* warm off-white text */
  --parchment-60:rgba(242,237,226,.6);
  --parchment-30:rgba(242,237,226,.3);
  --line:        rgba(242,237,226,.12);

  /* -- type -- */
  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Source Serif 4', Georgia, serif;
  --f-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; }
html{ background: var(--void); scroll-behavior: auto; }
body{
  margin: 0;
  background: var(--graphite);
  color: var(--parchment);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--ignite); color: var(--void); }

a{ color: var(--parchment); }

.mono{ font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   FIXED SCROLLYTELLING STAGE
   ========================================================================== */

#stage{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--void);
}

#webgl{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* corner ignition glow — a DOM light that grows behind the canvas so the
   illumination reads as filling the whole "frame", not just the model */
#corner-glow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 14% 86%, rgba(255,138,66,.55), rgba(255,138,66,0) 42%);
  mix-blend-mode: screen;
}

.eyebrow{ color: var(--steel); margin: 0 0 .9rem; }

.wordmark{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(3rem, 11vw, 7.5rem);
  letter-spacing: -.03em;
  margin: 0 0 1rem;
  color: var(--parchment);
}

.tagline{
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  color: var(--parchment-60);
  line-height: 1.6;
  margin: 0;
  max-width: 34rem;
}

/* shared positioning for anything that crossfades over the stage —
   the hero title card and every byte caption share this treatment so
   the eye doesn't have to relearn where to look between them */
.overlay-copy{
  position: absolute;
  left: 50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  width: min(88vw, 36rem);
}

.overlay-copy--hero{
  top: 50%;
  transform: translate(-50%, -46%);
  text-align: center;
  width: min(90vw, 42rem);
}

#byte-overlay-list{ position: absolute; inset: 0; }

.byte-overlay{
  position: absolute;
  left: 50%;
  bottom: 13vh;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  width: min(88vw, 34rem);
}

.byte-meta{
  margin-bottom: .8rem;
}
.byte-date{ color: var(--steel); }

.byte-body{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--parchment-60);
}
.byte-body p{ margin: 0 0 1em; }
.byte-body p:last-child{ margin-bottom: 0; }
.byte-body h1, .byte-body h2, .byte-body h3{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--parchment);
  margin: 0 0 .8rem;
  line-height: 1.25;
}
.byte-body h1{ font-size: clamp(1.3rem, 2.8vw, 1.9rem); }
.byte-body h2{ font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.byte-body h3{ font-size: clamp(1.1rem, 2vw, 1.35rem); }
.byte-body code{
  font-family: var(--f-mono);
  font-size: .86em;
  background: rgba(19,20,23,.7);
  padding: .15em .4em;
  border-radius: 3px;
  color: var(--parchment);
}
.byte-body pre{
  background: rgba(19,20,23,.7);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  font-size: .82rem;
}
.byte-body pre code{ background: none; padding: 0; }
.byte-body a{ color: var(--ignite); text-decoration-color: var(--ignite-dim); }
.byte-body strong{ color: var(--parchment); }

/* large corner counter, visible only while scrolling through bytes */
#counter{
  position: absolute;
  right: 6vw;
  bottom: 8vh;
  z-index: 4;
  text-align: right;
  opacity: 0;
  pointer-events: none;
}
#counter-year{
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--parchment);
}
#counter-month{
  display: block;
  margin-top: .6rem;
  color: var(--ignite);
  letter-spacing: .22em;
}

#scroll-cue{
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: none;
  border: none;
  color: var(--parchment-60);
  cursor: pointer;
  padding: .5rem;
  transition: opacity .25s linear;
  animation: cue-bob 2.6s ease-in-out infinite, cue-fade 2.6s ease-in-out infinite;
}
#scroll-cue:focus-visible{ outline: 1px solid var(--ignite); outline-offset: 4px; }
#scroll-cue.is-gone{ pointer-events: none; animation-play-state: paused; }

@keyframes cue-bob{
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@keyframes cue-fade{
  0%, 100% { opacity: .25; }
  50%      { opacity: .95; }
}

/* ==========================================================================
   FOOTER — revealed once the pinned stage releases at the end
   ========================================================================== */

#site-footer{
  padding: 3rem 6vw 4rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--parchment-30);
  background: var(--graphite);
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 720px){
  .overlay-copy--hero{ width: 92vw; }
  .byte-overlay{ bottom: 16vh; width: 90vw; }
  #counter{ right: 5vw; bottom: 6vh; }
  #site-footer{ flex-direction: column; gap: .5rem; }
}