:root {
  /* Compliance motifs: Interlocking shapes reminiscent of Navajo weaving patterns; Interlocking Rings Rings: Rings* Rings:** Olympic-style but irregular; IntersectionObserver` to trigger the transition when the panel is 60% visible. */
  --primary-dark: #6B1D2A;
  --primary-light: #F5ECD7;
  --parchment: #E8DCC8;
  --accent: #8B4D5C;
  --deep-ground: #2E0F15;
  --text-dark: #4A3728;
  --highlight: #C47A6E;
  --blush: #D4918A;
  --whisper: #FBF7EE;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--primary-light);
  color: var(--text-dark);
  font-family: "Nunito", sans-serif;
}

body { cursor: e-resize; }

.scroll-canvas {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  will-change: transform;
  background: var(--primary-light);
}

.scroll-canvas::-webkit-scrollbar { display: none; }

.panel {
  position: relative;
  flex: 0 0 auto;
  min-width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--primary-light);
}

.panel-inner {
  position: relative;
  z-index: 3;
  padding: clamp(2rem, 6vw, 6rem);
}

.breath-gap {
  flex: 0 0 auto;
  min-width: 15vw;
  height: 100vh;
  background: var(--whisper);
  cursor: default;
}

h1,
h2 {
  margin: 0 0 1rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--primary-dark);
  font-size: clamp(2rem, 5vw, 4.5rem);
}

p {
  margin: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  color: var(--text-dark);
}

.annotation {
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 1rem;
}

.rotated-left { transform: rotate(-1deg); }
.rotated-right { transform: rotate(2deg); }

.dark-panel { background: var(--deep-ground); }
.dark-panel h2 { color: var(--primary-light); }
.dark-panel p { color: var(--parchment); }
.dark-panel .annotation { color: var(--blush); }

.threshold-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 4vw;
}

.enso-wrap {
  position: relative;
  width: min(52vw, 560px);
  aspect-ratio: 1;
  margin-left: 3vw;
  border-radius: 50%;
}

.enso {
  position: absolute;
  inset: 10%;
  fill: none;
  stroke: var(--primary-dark);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 740;
  stroke-dashoffset: 740;
  opacity: 0.88;
  animation: drawEnso 4s ease-in-out forwards, breatheInk 18s ease-in-out infinite 4s;
}

.grain-dots {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(139,77,92,0.28) 0 2px, transparent 2.4px),
    radial-gradient(circle at 69% 60%, rgba(196,122,110,0.23) 0 1.6px, transparent 2px),
    radial-gradient(circle at 49% 72%, rgba(107,29,42,0.14) 0 1.2px, transparent 1.8px);
  background-size: 34px 34px, 51px 51px, 23px 23px;
  animation: grainDrift 20s ease-in-out infinite alternate;
}

.title-block { max-width: 650px; }
.lead { max-width: 34rem; }
.scroll-hint { margin-top: 2.5rem; font-family: "Caveat", cursive; color: var(--accent); transform: rotate(-1deg); }

.textile-panel { min-width: 120vw; }
.sashiko-field {
  position: absolute;
  inset: 0;
  background-color: var(--deep-ground);
  background-image:
    linear-gradient(90deg, rgba(245,236,215,0.22) 2px, transparent 2px),
    linear-gradient(0deg, rgba(245,236,215,0.16) 2px, transparent 2px),
    radial-gradient(circle, rgba(245,236,215,0.55) 1.4px, transparent 1.8px),
    linear-gradient(45deg, transparent 46%, rgba(212,145,138,0.22) 48%, rgba(212,145,138,0.22) 52%, transparent 54%);
  background-size: 20px 20px, 20px 20px, 20px 20px, 40px 40px;
  animation: sashikoShift 2s steps(2, end) infinite;
}

.overlay-card {
  width: min(44rem, 48vw);
  margin: 17vh 0 0 12vw;
  padding: clamp(2rem, 4vw, 4rem);
  background: rgba(46,15,21,0.72);
  border: 1px solid rgba(245,236,215,0.24);
  box-shadow: 0 30px 90px rgba(0,0,0,0.28);
}

.ritual-panel { background: var(--parchment); }
.ritual-copy { width: min(42rem, 44vw); margin: 18vh 0 0 8vw; }
.ritual-collage { position: absolute; inset: 0; }
.woven-diamond {
  position: absolute;
  width: 15vw;
  aspect-ratio: 1;
  transform: rotate(45deg);
  border: 12px double var(--primary-dark);
  box-shadow: inset 0 0 0 18px var(--highlight), inset 0 0 0 26px var(--parchment);
  opacity: 0.42;
  animation: floatSlow 14s ease-in-out infinite;
}
.diamond-one { right: 15vw; top: 14vh; }
.diamond-two { right: 30vw; bottom: 12vh; width: 10vw; animation-delay: -5s; }
.rings {
  position: absolute;
  right: 8vw;
  top: 35vh;
  width: 32vw;
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.62;
}
.rings ellipse { animation: ringPulse 12s ease-in-out infinite; transform-origin: center; }
.rings ellipse:nth-child(2) { animation-delay: -4s; }
.rings ellipse:nth-child(3) { animation-delay: -8s; }
.fragment {
  position: absolute;
  font-family: "Caveat", cursive;
  color: var(--accent);
  font-size: clamp(1.2rem, 2.2vw, 2.1rem);
  background: rgba(251,247,238,0.72);
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
}
.fragment-a { left: 44vw; top: 19vh; transform: rotate(-3deg); }
.fragment-b { left: 56vw; top: 67vh; transform: rotate(2deg); }
.fragment-c { left: 19vw; bottom: 13vh; transform: rotate(1deg); }
.fragment-d { right: 7vw; bottom: 22vh; transform: rotate(-2deg); }

.boundary-panel { min-width: 140vw; }
.tessellation-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.boundary-copy {
  width: min(44rem, 38vw);
  margin: 18vh auto 0;
  padding: clamp(2rem, 4vw, 4rem);
  background: rgba(46,15,21,0.62);
  border: 1px solid rgba(212,145,138,0.22);
}
.boundary-label {
  position: absolute;
  top: 50%;
  z-index: 2;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(5rem, 13vw, 14rem);
  color: rgba(245,236,215,0.12);
}
.individual { left: 8vw; }
.collective { right: 10vw; }

.memory-panel { background: var(--primary-light); }
.memory-stage { position: absolute; inset: 8vh 8vw 10vh 46vw; }
.symbols-layer,
.skeleton-layer { position: absolute; inset: 0; }
.symbol { position: absolute; fill: none; stroke: var(--primary-dark); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.torii { width: 19vw; left: 2vw; top: 3vh; }
.koru { width: 22vw; right: 1vw; bottom: 2vh; stroke: var(--accent); }
.diamond-symbol { position: absolute; width: 16vw; height: 16vw; left: 13vw; top: 31vh; opacity: 0; }
.diamond-symbol span { position: absolute; inset: 18%; border: 5px solid var(--highlight); transform: rotate(45deg); }
.diamond-symbol span:nth-child(2) { inset: 30%; border-color: var(--primary-dark); }
.diamond-symbol span:nth-child(3) { inset: 42%; border-color: var(--accent); }
.diamond-symbol span:nth-child(4) { inset: 4%; border-color: rgba(107,29,42,0.22); }
.skeleton {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg, #C47A6E 25%, #D4918A 50%, #C47A6E 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  box-shadow: 0 18px 50px rgba(196,122,110,0.18);
}
.sk-one { width: 24vw; height: 5vh; left: 1vw; top: 8vh; }
.sk-two { width: 16vw; height: 16vw; right: 4vw; top: 16vh; border-radius: 35%; }
.sk-three { width: 28vw; height: 4vh; left: 9vw; bottom: 20vh; }
.sk-four { width: 13vw; height: 13vw; left: 3vw; bottom: 5vh; border-radius: 50%; }
.memory-copy { width: min(38rem, 36vw); margin: 17vh 0 0 7vw; }
.memory-panel.revealed .skeleton-layer { opacity: 0; transition: opacity 1.2s ease-in-out; }
.memory-panel.revealed .symbol,
.memory-panel.revealed .diamond-symbol { opacity: 1; transition: opacity 1.2s ease-in-out 0.25s; }
.memory-panel.revealed .symbol path { stroke-dasharray: 520; stroke-dashoffset: 520; animation: drawSymbol 3.6s ease-in-out forwards 0.3s; }

.convergence-panel { min-width: 80vw; background: var(--parchment); }
.convergence-copy { width: min(39rem, 50vw); margin: 22vh auto 0; text-align: center; }
.convergence-pattern {
  position: absolute;
  inset: 10vh 8vw;
  background:
    radial-gradient(circle at center, rgba(107,29,42,0.18) 0 2px, transparent 2.4px),
    linear-gradient(45deg, transparent 47%, rgba(139,77,92,0.18) 49%, rgba(139,77,92,0.18) 51%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(196,122,110,0.2) 49%, rgba(196,122,110,0.2) 51%, transparent 53%);
  background-size: 32px 32px, 56px 56px, 56px 56px;
  border-radius: 50%;
  opacity: 0.75;
  animation: grainDrift 19s ease-in-out infinite alternate;
}
.ring-orbit { position: absolute; inset: 18%; border: 3px solid rgba(107,29,42,0.22); border-radius: 48% 52% 45% 55%; animation: orbitTurn 20s linear infinite; }
.orbit-two { inset: 28%; border-color: rgba(139,77,92,0.26); animation-duration: 25s; animation-direction: reverse; }
.orbit-three { inset: 38%; border-color: rgba(196,122,110,0.34); animation-duration: 16s; }

.closing-panel { min-width: 60vw; display: grid; place-items: center; background: var(--primary-light); }
.closing-mark {
  position: relative;
  z-index: 2;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(2.4rem, 6vw, 6rem);
  color: rgba(107,29,42,0.8);
  letter-spacing: 0.02em;
}
.closing-weave {
  position: absolute;
  inset: 18vh 5vw;
  background:
    linear-gradient(90deg, rgba(107,29,42,0.15) 1px, transparent 1px),
    linear-gradient(0deg, rgba(139,77,92,0.15) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(196,122,110,0.28), transparent 58%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  filter: blur(0.2px);
  opacity: 0.75;
}
.closing-note { position: absolute; bottom: 14vh; transform: rotate(1deg); }

.progress-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--primary-dark);
  z-index: 20;
}

@keyframes drawEnso { to { stroke-dashoffset: 0; } }
@keyframes breatheInk { 50% { transform: scale(1.015) rotate(1deg); opacity: 0.72; } }
@keyframes grainDrift { to { background-position: 18px 11px, -14px 16px, 9px -12px; } }
@keyframes sashikoShift { to { background-position: 1px 1px, 1px 1px, 1px 1px, 1px 1px; } }
@keyframes floatSlow { 50% { transform: translateY(-18px) rotate(45deg); } }
@keyframes ringPulse { 50% { transform: scale(1.04); opacity: 0.75; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes drawSymbol { to { stroke-dashoffset: 0; } }
@keyframes orbitTurn { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  html,
  body { overflow: auto; }
  body { cursor: default; }
  .scroll-canvas {
    width: 100%;
    height: auto;
    min-height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .panel,
  .textile-panel,
  .boundary-panel,
  .convergence-panel,
  .closing-panel {
    min-width: 100vw;
    width: 100%;
    min-height: 100vh;
    height: auto;
  }
  .breath-gap { min-width: 100%; width: 100%; height: 20vh; min-height: 20vh; }
  .threshold-inner { grid-template-columns: 1fr; align-content: center; }
  .enso-wrap { width: 72vw; margin: 0 auto; }
  .overlay-card,
  .ritual-copy,
  .boundary-copy,
  .memory-copy,
  .convergence-copy { width: auto; margin: 10vh 7vw; }
  .ritual-collage, .memory-stage { position: relative; inset: auto; height: 54vh; margin: 4vh 5vw 0; }
  .woven-diamond { width: 30vw; }
  .rings { width: 58vw; }
  .fragment-a { left: 9vw; top: 6vh; }
  .fragment-b { left: 28vw; top: 35vh; }
  .fragment-c { left: 6vw; bottom: 7vh; }
  .fragment-d { right: 4vw; bottom: 18vh; }
  .torii { width: 36vw; }
  .koru { width: 42vw; }
  .diamond-symbol { width: 30vw; height: 30vw; }
  .sk-one { width: 52vw; }
  .sk-two { width: 30vw; height: 30vw; }
  .sk-three { width: 62vw; }
  .sk-four { width: 24vw; height: 24vw; }
  .closing-panel { min-height: 70vh; }
  .progress-bar { left: auto; right: 0; top: 0; bottom: auto; width: 2px; height: 0; }
}