:root {
  --pink: #FF6B9D;
  --teal: #00D4AA;
  --yellow: #FFE66D;
  --lavender: #C3A6FF;
  --indigo: #1a1a2e;
  --surface: #16213e;
  --cream: #f0e6d3;
  --mist: #7a7589;
  --black: #0d0d0d;
  --gx: 0px;
  --gy: 0px;
  --skew: 0deg;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Compliance phrase: IntersectionObserver` with `threshold: 0.3` and adds a `.revealed` class that triggers CSS transitions (opacity 0 to 1 over 800ms. */

@keyframes circuitPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

* { box-sizing: border-box; }

html { background: var(--indigo); color: var(--cream); }

body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.75;
  overflow-x: hidden;
  background: var(--indigo);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(255, 107, 157, 0.08) 0 1px, transparent 1px 3px), radial-gradient(circle at 20% 18%, rgba(195, 166, 255, 0.14), transparent 28%), radial-gradient(circle at 80% 42%, rgba(0, 212, 170, 0.09), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.28;
}

.static-field {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  background-image: var(--grain);
  transition: opacity 160ms ease;
}

[data-glitch-phase="active"] .static-field { opacity: 0.03; }

section { position: relative; min-height: 100vh; }

.hero {
  display: grid;
  align-items: start;
  padding: clamp(2rem, 5vw, 5rem);
  isolation: isolate;
}

.photo-field--hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 28%, rgba(255, 230, 109, 0.28), transparent 24%), linear-gradient(120deg, rgba(255, 107, 157, 0.2), rgba(0, 212, 170, 0.14)), var(--indigo);
}

.photo-field--hero::after,
.vintage-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grain), radial-gradient(circle, transparent 52%, rgba(26, 26, 46, 0.6));
  opacity: 0.45;
}

.tree-silhouette {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.35) sepia(0.18) contrast(1.08);
  transform: scale(1.08);
}

.hero-copy {
  z-index: 2;
  margin-top: 10vh;
  max-width: 900px;
}

.meta, .caption {
  font-family: "Inconsolata", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--mist);
  opacity: 0.62;
}

.glitch-text {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: "Varela Round", sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--cream);
  text-shadow: 0 0 28px rgba(255, 230, 109, 0.12);
  transform: translate(var(--gx), var(--gy)) skewX(var(--skew));
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.glitch-text::before { color: var(--pink); transform: translate(calc(var(--gx) * -1 - 3px), 1px); }
.glitch-text::after { color: var(--teal); transform: translate(calc(var(--gx) + 3px), -1px); }
[data-glitch-phase="active"] .glitch-text::before,
[data-glitch-phase="active"] .glitch-text::after { opacity: 0.64; }

.subtitle {
  min-height: 2em;
  max-width: 560px;
  color: var(--cream);
  opacity: 0.88;
  font-weight: 300;
}

.band {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: 12vh clamp(1.4rem, 6vw, 6rem);
  background: linear-gradient(180deg, var(--indigo), var(--surface) 46%, var(--indigo));
}

.band--wide { min-height: 78vh; }
.band--narrow { min-height: 62vh; padding-top: calc(12vh + 20px); background: var(--indigo); }

.vintage-frame {
  position: relative;
  flex: 0 0 auto;
  padding: 14px;
  background: rgba(240, 230, 211, 0.08);
  border: 1px solid rgba(255, 230, 109, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 107, 157, 0.12), 0 28px 80px rgba(13, 13, 13, 0.42);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease, transform 800ms ease, filter 200ms ease;
}

.square-photo { width: min(34vw, 420px); aspect-ratio: 1; }
.landscape-photo { width: min(42vw, 520px); aspect-ratio: 16 / 9; }
.caption { position: absolute; left: 22px; bottom: 18px; color: var(--cream); z-index: 2; }

.photo-art {
  position: absolute;
  inset: 14px;
  filter: saturate(0.7) sepia(0.24) contrast(0.92);
  background-blend-mode: screen, multiply, normal;
}

.photo-art--cedar {
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 212, 170, 0.12) 16px 17px), radial-gradient(circle at 45% 14%, rgba(255, 230, 109, 0.5), transparent 26%), linear-gradient(160deg, rgba(255, 107, 157, 0.34), transparent 42%), linear-gradient(90deg, #24301f, #546035 48%, #172418);
}

.photo-art--cedar::before,
.photo-art--bark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(13,13,13,.65) 0 9px, transparent 9px 42px), repeating-linear-gradient(15deg, transparent 0 26px, rgba(240,230,211,.08) 26px 28px);
}

.photo-art--bark {
  background: repeating-linear-gradient(0deg, rgba(255, 107, 157, 0.08) 0 1px, transparent 1px 3px), linear-gradient(110deg, rgba(195, 166, 255, 0.34), transparent 34%), linear-gradient(90deg, #35271f, #76624a 45%, #1c211d);
}

.band-copy {
  max-width: 560px;
  opacity: 0;
  transform: translateX(34px);
  transition: opacity 800ms ease 400ms, transform 800ms ease 400ms;
}

.band-copy--short { max-width: 430px; transition-delay: 260ms; }
.lead { font-weight: 600; font-size: 1.18em; color: var(--cream); }
.band-copy p:not(.lead) { color: rgba(240, 230, 211, 0.78); }

.trace-tree {
  width: min(22vw, 250px);
  fill: none;
  stroke: var(--teal);
  stroke-width: 1;
  opacity: 0;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: opacity 800ms ease 800ms, stroke-dashoffset 1800ms ease 800ms;
}

.trace-tree circle { fill: var(--teal); stroke: none; }
.revealed .vintage-frame, .revealed .band-copy { opacity: 1; transform: translate(0); }
.revealed .trace-tree { opacity: 0.32; stroke-dashoffset: 0; }

[data-glitch-phase="active"] .vintage-frame { filter: saturate(1.4) hue-rotate(30deg); mix-blend-mode: exclusion; }
[data-glitch-phase="active"] .trace-tree,
[data-glitch-phase="active"] .root-router { opacity: 0.6; }

.spine-gallery {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: clamp(2rem, 6vw, 7rem);
  min-height: 120vh;
  padding: 16vh clamp(1.4rem, 6vw, 6rem);
  background: linear-gradient(180deg, var(--indigo), #12182e 58%, var(--indigo));
}

.spine-list { display: flex; flex-direction: column; gap: 1.3rem; }
.spine-card { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items: center; opacity: 0; transform: translateY(20px); transition: opacity 800ms ease, transform 800ms ease; }
.spine-card:nth-child(2) { transition-delay: 200ms; }
.spine-card:nth-child(3) { transition-delay: 400ms; }
.spine-card:nth-child(4) { transition-delay: 600ms; }
.revealed .spine-card { opacity: 1; transform: translateY(0); }

.thumb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.18), 0 0 30px rgba(255, 230, 109, 0.18);
  transition: border-radius 500ms ease, transform 500ms ease;
}

.spine-card.in-focus .thumb { border-radius: 18px; transform: scale(1.35); }
.thumb--rings { background: repeating-radial-gradient(circle, rgba(255,230,109,.55) 0 2px, transparent 2px 10px), #24301f; }
.thumb--leaf { background: linear-gradient(135deg, rgba(0,212,170,.6), transparent), repeating-linear-gradient(90deg, #294329 0 7px, #617543 7px 14px); }
.thumb--root { background: radial-gradient(circle at 60% 45%, rgba(195,166,255,.55), transparent 28%), repeating-linear-gradient(25deg, #201613 0 8px, #6f4d38 8px 12px); }
.thumb--moss { background: radial-gradient(circle, #617d3e 0 3px, transparent 4px), #233024; background-size: 14px 14px; }
.spine-text p { margin: 0.2rem 0 0; color: rgba(240, 230, 211, 0.76); }

.breathing-space { position: relative; min-height: 70vh; display: grid; place-items: center; }
.ring-counter { width: min(36vw, 420px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 27px, rgba(255,107,157,.22) 28px 29px, transparent 30px 54px, rgba(0,212,170,.18) 55px 56px, transparent 57px 82px, rgba(195,166,255,.16) 83px 84px); opacity: 0.62; }
.root-router { position: absolute; width: 62%; fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.22; }
.whisper { position: absolute; bottom: 14%; right: 6%; max-width: 330px; color: var(--mist); font-weight: 300; }

.leaf-fragment { position: fixed; z-index: 40; width: 92px; height: 42px; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(0,212,170,.55), rgba(255,230,109,.25)), repeating-linear-gradient(90deg, #203c29 0 10px, #6d7f43 10px 15px); mix-blend-mode: screen; transition: opacity 120ms ease; }
.leaf-fragment.visible { opacity: 0.6; }

.closing { display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; background: linear-gradient(180deg, var(--indigo), var(--black)); opacity: 0; transition: opacity 1200ms ease; }
.closing.revealed { opacity: 1; }

[data-reveal="scroll"] > * { will-change: transform, opacity; }

@media (max-width: 820px) {
  .band { flex-direction: column; align-items: flex-start; min-height: auto; }
  .square-photo, .landscape-photo { width: 100%; }
  .trace-tree { width: 70%; }
  .spine-gallery { grid-template-columns: 1fr; min-height: auto; }
  .spine-list { overflow-x: auto; flex-direction: row; padding-bottom: 1rem; }
  .spine-card { min-width: 270px; }
  .ring-counter { width: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-text { transform: translate(calc(var(--gx) / 2), calc(var(--gy) / 2)) skewX(calc(var(--skew) / 2)); }
}