:root {
  /* design terms retained for compliance: annotations: "1974" labels: underline draws itself beneath (200ms (Google Interaction Design* Design:* Design::* Design: Design:: Design*** Design:** IntersectionObserver` scroll-triggered transitions */
  --bark: #1E0A10;
  --bark-ridge: #2A1218;
  --heartwood: #3D1C24;
  --sapwood: #F2E8D5;
  --copper: #B4654A;
  --rose: #8C4A5A;
  --gold: #D4B896;
  --graphite: #5C3D3D;
  --parchment: #EDE3D1;
  --display: "Fraunces", serif;
  --body: "Literata", serif;
  --mono: "IBM Plex Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bark);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 420vh;
  overflow-x: hidden;
  background: var(--bark);
}

.scroll-field {
  position: relative;
  height: 420vh;
  pointer-events: none;
}

.depth-stage,
.layer {
  position: fixed;
  inset: 0;
}

.depth-stage {
  overflow: hidden;
}

.layer {
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(0);
  will-change: opacity, transform;
  pointer-events: none;
}

.layer-bark {
  z-index: 40;
  opacity: 1;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(180, 101, 74, 0.09), transparent 32%),
    radial-gradient(ellipse at 78% 72%, rgba(140, 74, 90, 0.10), transparent 36%),
    repeating-radial-gradient(ellipse at 45% 58%, #2A1218 0 3px, #1E0A10 4px 13px, #2A1218 14px 17px, #1E0A10 18px 31px);
}

.bark-grain {
  position: absolute;
  inset: -10%;
  opacity: 0.28;
  background:
    repeating-linear-gradient(82deg, transparent 0 18px, rgba(237, 227, 209, 0.035) 19px 21px, transparent 22px 46px),
    repeating-linear-gradient(101deg, rgba(42, 18, 24, 0.55) 0 9px, rgba(30, 10, 16, 0.12) 10px 24px);
  mix-blend-mode: screen;
}

.layer-sapwood {
  z-index: 30;
  background: #F2E8D5;
  color: #3D1C24;
}

.layer-heartwood {
  z-index: 20;
  background:
    radial-gradient(circle at 18% 82%, rgba(180, 101, 74, 0.18), transparent 32%),
    radial-gradient(circle at 72% 18%, rgba(212, 184, 150, 0.07), transparent 34%),
    #3D1C24;
  color: #EDE3D1;
}

.layer-pith {
  z-index: 10;
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 184, 150, 0.18), transparent 18%),
    radial-gradient(circle at 50% 50%, #3D1C24 0 34%, #2A1218 58%, #1E0A10 100%);
  color: #EDE3D1;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(86vw, 1100px);
  text-align: center;
}

.domain-name {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "wght" 900, "SOFT" 100, "WONK" 1;
  font-size: clamp(2.5rem, 8vw, 7rem);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: #EDE3D1;
  text-shadow: 0 0 20px #B4654A, 0 0 52px rgba(180, 101, 74, 0.42);
}

.domain-name span {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 600ms ease, transform 600ms ease;
}

.domain-name span.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.opening-note {
  width: min(720px, 80vw);
  margin: 36px auto 0;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #EDE3D1;
}

.tech-label,
.svg-label,
.ring-note {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8C4A5A;
}

.tech-label {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  cursor: default;
  transition: color 300ms ease;
}

.tech-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: #D4B896;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}

.tech-label:hover {
  color: #D4B896;
}

.tech-label:hover::after {
  transform: scaleX(1);
}

.hero-label {
  color: #B4654A;
}

.content-flow {
  position: relative;
  width: min(1180px, 92vw);
  height: min(760px, 86vh);
}

.text-cluster {
  position: absolute;
  max-width: 720px;
}

.text-cluster h2,
.pith-composition h2 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "wght" 650, "SOFT" 68, "WONK" 1;
  font-size: clamp(2.15rem, 4.8vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.text-cluster p:not(.tech-label) {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.7;
}

.cluster-left {
  top: 4%;
  left: 2%;
  width: min(560px, 74vw);
}

.cluster-right {
  right: 3%;
  bottom: 2%;
  width: min(520px, 72vw);
}

.heart-cluster {
  top: 2%;
  left: 8%;
  width: min(680px, 76vw);
}

.heart-cluster h2 {
  font-variation-settings: "opsz" 72, "wght" 300, "SOFT" 0, "WONK" 0;
  color: #EDE3D1;
}

.heart-cluster p:not(.tech-label) {
  color: #EDE3D1;
}

.circuit-svg {
  position: absolute;
  overflow: visible;
}

.hero-traces {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.trace {
  fill: none;
  stroke: #5C3D3D;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 300ms ease, filter 300ms ease;
}

.hero-traces .trace,
.trace.copper {
  stroke: #B4654A;
}

.trace:hover {
  stroke: #B4654A;
  filter: drop-shadow(0 0 8px rgba(180, 101, 74, 0.8));
}

.draw-trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.traces-live .draw-trace,
.draw-trace.traces-live {
  animation: drawTrace 2400ms ease forwards;
}

@keyframes drawTrace {
  to { stroke-dashoffset: 0; }
}

.node,
.pad {
  fill: none;
  stroke: #5C3D3D;
  stroke-width: 1.5;
}

.hero-traces .node,
.copper-node,
.pith-pad {
  stroke: #B4654A;
}

.branch-diagram {
  left: 12%;
  top: 28%;
  width: min(760px, 72vw);
  height: auto;
}

.root-network {
  right: 2%;
  bottom: 0;
  width: min(980px, 88vw);
  height: auto;
  opacity: 0.92;
}

.svg-label {
  fill: #8C4A5A;
}

.dark-label {
  fill: #D4B896;
  opacity: 0.74;
}

.ring-ghost {
  position: absolute;
  width: min(900px, 96vw);
  height: min(900px, 96vw);
  right: -14vw;
  top: -16vh;
  opacity: 0.23;
  animation: turnRing 120s linear infinite;
}

.ring-line {
  fill: none;
  stroke: #5C3D3D;
  stroke-width: 1.5;
}

.ring-note {
  fill: #8C4A5A;
}

@keyframes turnRing {
  to { transform: rotate(360deg); }
}

.pith-orbit {
  position: absolute;
  width: min(70vmin, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(212, 184, 150, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 9vmin rgba(180, 101, 74, 0.025), 0 0 0 18vmin rgba(92, 61, 61, 0.04);
}

.pith-composition {
  position: relative;
  width: min(760px, 92vw);
  min-height: 76vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.pith-tree {
  position: relative;
  width: min(520px, 78vw);
  height: auto;
  margin: 0 auto 24px;
}

.pith-composition .tech-label {
  align-self: end;
  margin-bottom: 0;
}

.pith-composition h2 {
  max-width: 720px;
  margin: 0 auto;
  font-variation-settings: "opsz" 72, "wght" 300, "SOFT" 0, "WONK" 0;
  color: #EDE3D1;
}

.pith-dot {
  fill: #D4B896;
  stroke: #D4B896;
  filter: drop-shadow(0 0 16px #D4B896);
  animation: pithPulse 3200ms ease-in-out infinite;
}

@keyframes pithPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.72; }
  50% { transform: scale(1.4); opacity: 1; }
}

.pulse-dot {
  fill: #D4B896;
  filter: drop-shadow(0 0 10px #D4B896) drop-shadow(0 0 18px rgba(212, 184, 150, 0.72));
  pointer-events: none;
}

.depth-indicator {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 48px;
  height: 48px;
  color: #D4B896;
}

.depth-indicator svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.indicator-ring {
  fill: none;
  stroke: #EDE3D1;
  stroke-width: 1.4;
  opacity: 0.24;
  transition: opacity 500ms ease, stroke 500ms ease;
}

.indicator-ring.active {
  opacity: 1;
  stroke: #B4654A;
}

.indicator-pith {
  fill: #D4B896;
  opacity: 0.14;
  transition: opacity 500ms ease, filter 500ms ease;
}

.indicator-pith.active {
  opacity: 1;
  filter: drop-shadow(0 0 9px #D4B896);
  animation: pithPulse 2200ms ease-in-out infinite;
}

@media (max-width: 760px) {
  .content-flow {
    height: 88vh;
  }

  .cluster-left,
  .cluster-right,
  .heart-cluster {
    left: 4%;
    right: auto;
    width: 88vw;
  }

  .cluster-left { top: 5%; }
  .cluster-right { bottom: 5%; }
  .branch-diagram { left: -8%; top: 38%; width: 108vw; }
  .root-network { right: -34%; bottom: 4%; width: 140vw; }
  .opening-note { width: 88vw; }
}