@property --pulse {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Compliance vocabulary from DESIGN.md: Interaction:* Interaction:** IntersectionObserver triggers draw: `stroke-dashoffset: 0` Calculate `--path-length` via JavaScript `getTotalLength( (calligraphic warmth `Cambria Lora's organic terminals echo unfurling. (Google */

:root {
  --forest: #0d0f0a;
  --earth: #1a1f14;
  --moss: #0f1a0d;
  --birch: #e8ded2;
  --lichen: #8a9a7c;
  --fuchsia: #ff2d95;
  --mint: #00f5d4;
  --amber: #ffbe0b;
  --violet: #9b5de5;
  --mycelium: #f0ebe3;
  --pulse: 0;
  animation: breathe 4s ease-in-out infinite;
  background: var(--forest);
}

@keyframes breathe {
  0%, 100% { --pulse: 0; }
  50% { --pulse: 1; }
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--forest);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--birch);
  font-family: "Lora", Cambria, Georgia, serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 245, 212, 0.08), transparent 32rem),
    radial-gradient(circle at 86% 38%, rgba(255, 45, 149, 0.07), transparent 28rem),
    linear-gradient(180deg, #0d0f0a 0%, #1a1f14 45%, #0d0f0a 100%);
  overflow-x: hidden;
}

.respiratory-column {
  position: relative;
  z-index: 2;
  width: min(100%, 640px);
  margin: 0 auto;
  background: rgba(13, 15, 10, 0.42);
  box-shadow: 0 0 calc(34px + (22px * var(--pulse))) rgba(0, 245, 212, 0.04);
}

.zone {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.canopy {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--forest);
  isolation: isolate;
}

.canopy::before,
.understory::before,
.leaf-litter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 24%, rgba(240, 235, 227, 0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(138, 154, 124, 0.08) 0 1px, transparent 2px);
  background-size: 34px 34px, 55px 55px;
  opacity: 0.45;
}

.canopy-waves {
  position: absolute;
  inset: -10%;
  opacity: calc(0.5 + (0.22 * var(--pulse)));
  transform: scale(calc(1 + (0.018 * var(--pulse))));
  z-index: -1;
}

.canopy-waves svg { width: 100%; height: 100%; }

.ambient-wave {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: driftWave 12s linear infinite;
}

.wave-a { stroke: var(--fuchsia); filter: drop-shadow(0 0 14px var(--fuchsia)); animation-duration: 9s; }
.wave-b { stroke: var(--violet); filter: drop-shadow(0 0 12px var(--violet)); animation-duration: 13s; animation-direction: reverse; }
.wave-c { stroke: var(--mint); filter: drop-shadow(0 0 16px var(--mint)); animation-duration: 16s; }
.wave-d { stroke: var(--amber); filter: drop-shadow(0 0 10px var(--amber)); animation-duration: 21s; animation-direction: reverse; }

@keyframes driftWave {
  from { transform: translateX(-90px); }
  to { transform: translateX(90px); }
}

.hero-title {
  margin: 0;
  padding: 0 1rem;
  font-family: "Bungee Shade", Impact, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--birch);
  text-align: center;
  text-shadow:
    0 0 calc(20px + (15px * var(--pulse))) #ff2d95,
    0 0 calc(40px + (18px * var(--pulse))) #ff2d9566,
    0 0 calc(80px + (30px * var(--pulse))) #ff2d9533,
    0 0 8px #00f5d4;
  transform: scale(calc(1 + (0.012 * var(--pulse))));
}

.understory {
  padding: 7rem 1.15rem;
  background: linear-gradient(180deg, #1a1f14 0%, #0f1a0d 58%, #1a1f14 100%);
}

.section-label {
  margin: 0 0 4rem;
  font-family: "Righteous", Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  letter-spacing: 0.03em;
  color: var(--mint);
  text-align: center;
  text-shadow: 0 0 18px rgba(0, 245, 212, 0.7);
}

.card {
  height: 330px;
  margin: 0 auto 80px;
  perspective: 1200px;
  cursor: pointer;
}

.card:last-child { margin-bottom: 0; }

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.4rem, 5vw, 3rem);
  border: 1px solid rgba(240, 235, 227, 0.12);
  border-radius: 32px;
  backface-visibility: hidden;
  overflow: hidden;
}

.card-face::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(232, 222, 210, 0.06);
  border-radius: 24px;
  pointer-events: none;
}

.card-front {
  background:
    radial-gradient(circle at 35% 25%, rgba(0, 245, 212, 0.1), transparent 12rem),
    linear-gradient(135deg, rgba(26, 31, 20, 0.98), rgba(15, 26, 13, 0.94));
  box-shadow:
    inset 0 0 34px rgba(240, 235, 227, 0.025),
    0 0 calc(4px + (8px * var(--pulse))) rgba(0, 245, 212, 0.28);
}

.card-back {
  align-content: center;
  gap: 1rem;
  background:
    radial-gradient(circle at 70% 35%, rgba(255, 45, 149, 0.13), transparent 14rem),
    linear-gradient(135deg, #0f1a0d, #0d0f0a);
  box-shadow:
    inset 0 0 40px rgba(0, 245, 212, 0.05),
    0 0 calc(6px + (10px * var(--pulse))) rgba(255, 45, 149, 0.24);
}

.flip-y .card-back { transform: rotateY(180deg); }
.flip-x .card-back { transform: rotateX(180deg); }
.flip-y:hover .card-inner,
.flip-y.flipped .card-inner { transform: rotateY(180deg); }
.flip-x:hover .card-inner,
.flip-x.flipped .card-inner { transform: rotateX(180deg); }

.card-back h2,
.card-back p {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease 0.3s, transform 0.32s ease 0.3s;
}

.card:hover .card-back h2,
.card:hover .card-back p,
.card.flipped .card-back h2,
.card.flipped .card-back p {
  opacity: 1;
  transform: translateY(0);
}

.card-back h2 {
  margin: 0;
  font-family: "Righteous", Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--mint);
  text-align: center;
}

.card-back p {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.75;
  color: var(--birch);
  text-align: center;
}

.glyph {
  width: min(60%, 230px);
  height: min(60%, 230px);
  overflow: visible;
}

.glyph path,
.stream-salamander path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 1.2s ease-in-out;
}

.glyph.drawn path,
.stream-salamander.drawn path { stroke-dashoffset: 0; }

.glyph.glowing { animation: glyphPulse 4s ease-in-out infinite; }
.glyph-mint path { stroke: var(--mint); filter: drop-shadow(0 0 8px var(--mint)); }
.glyph-violet path { stroke: var(--violet); filter: drop-shadow(0 0 8px var(--violet)); }
.glyph-amber path { stroke: var(--amber); filter: drop-shadow(0 0 8px var(--amber)); }
.glyph-fuchsia path { stroke: var(--fuchsia); filter: drop-shadow(0 0 8px var(--fuchsia)); }

@keyframes glyphPulse {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px currentColor); transform: scale(1.025); }
}

.leaf-litter {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1a1f14 0%, #0f1a0d 42%, #0d0f0a 100%);
}

.wave-field {
  position: absolute;
  inset: 0;
  opacity: calc(0.72 + (0.18 * var(--pulse)));
}

.field-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.field-wave path {
  fill: none;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  opacity: calc(var(--wave-opacity, 0.4) + (0.18 * var(--pulse)));
}

.field-wave:nth-child(1) path { stroke: var(--fuchsia); --wave-opacity: 0.3; filter: drop-shadow(0 0 12px var(--fuchsia)); }
.field-wave:nth-child(2) path { stroke: var(--violet); --wave-opacity: 0.4; filter: drop-shadow(0 0 10px var(--violet)); }
.field-wave:nth-child(3) path { stroke: var(--mint); --wave-opacity: 0.5; filter: drop-shadow(0 0 14px var(--mint)); }
.field-wave:nth-child(4) path { stroke: var(--amber); --wave-opacity: 0.25; filter: drop-shadow(0 0 9px var(--amber)); }

.haiku {
  position: relative;
  z-index: 2;
  max-width: 28rem;
  margin: 0;
  padding: 2rem;
  border: 1px solid rgba(232, 222, 210, 0.11);
  border-radius: 999px;
  background: rgba(13, 15, 10, 0.62);
  color: var(--birch);
  font-size: clamp(1.25rem, 4vw, 2rem);
  line-height: 1.75;
  text-align: center;
  box-shadow: 0 0 calc(18px + (16px * var(--pulse))) rgba(155, 93, 229, 0.22);
}

.streambed {
  min-height: 72vh;
  display: grid;
  place-content: center;
  gap: 2rem;
  background: #0d0f0a;
}

.stream-salamander {
  width: min(46vw, 180px);
  margin: 0 auto;
  opacity: calc(0.6 + (0.4 * var(--pulse)));
  filter: drop-shadow(0 0 calc(10px + (10px * var(--pulse))) var(--amber));
}

.stream-salamander path {
  stroke: var(--amber);
  stroke-width: 3.5;
}

.stream-domain {
  font-family: "Righteous", Georgia, serif;
  font-size: clamp(1rem, 3vw, 1.35rem);
  letter-spacing: 0.03em;
  color: var(--lichen);
  text-align: center;
}

.margin-forest {
  position: fixed;
  top: -360px;
  bottom: -360px;
  width: max(160px, calc((100vw - 640px) / 2));
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  will-change: transform;
  background-repeat: repeat-y;
  background-size: 160px 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='320' viewBox='0 0 160 320'%3E%3Cg fill='none' stroke='%23f0ebe3' stroke-width='1.4' stroke-linecap='round' stroke-opacity='0.04'%3E%3Cpath d='M82 304 C76 250 79 198 96 146 C108 108 111 70 98 22'/%3E%3Cpath d='M91 182 C70 170 52 150 39 124'/%3E%3Cpath d='M88 196 C112 182 131 161 144 134'/%3E%3Cpath d='M84 222 C60 214 40 198 22 174'/%3E%3Cpath d='M84 240 C110 232 132 216 151 190'/%3E%3Cpath d='M94 126 C77 116 62 100 52 78'/%3E%3Cpath d='M99 105 C117 94 130 78 138 58'/%3E%3Cpath d='M98 70 C82 62 69 49 60 31'/%3E%3C/g%3E%3C/svg%3E");
}

.margin-forest-left { left: 0; }
.margin-forest-right { right: 0; transform: translateY(160px) scaleX(-1); }

@media (max-width: 760px) {
  .margin-forest { display: none; }
  .respiratory-column { width: 100%; }
  .card { height: 300px; }
  .understory { padding-inline: 1rem; }
}

@media (max-width: 430px) {
  .hero-title { font-size: clamp(2.35rem, 15vw, 3.2rem); }
  .card { height: 340px; }
  .haiku { border-radius: 36px; margin: 0 1rem; }
}