/* =================================================================
   sbom.wiki — Coastal-blend, Art Deco, hexagonal-honeycomb, ripple
   Cinematic nature-documentary aesthetic for Software Bill of Materials
   ================================================================= */

:root {
  --c-deep-teal: #134E4A;
  --c-deepest-teal: #0A2E2A;
  --c-seafoam: #A7F3D0;
  --c-ocean-blue: #0EA5E9;
  --c-coral-warm: #FB923C;
  --c-kelp-green: #166534;
  --c-sand-light: #F5F0E8;
  --c-reef-purple: #7C3AED;

  --font-display: "Poiret One", "Lora", serif;
  --font-body: "Lora", Georgia, serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--c-deep-teal);
  color: var(--c-sand-light);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.85;
  overflow-x: hidden;
}

body {
  position: relative;
}

/* Ripple overlay */
#ripple-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

#ripple-layer .ripple-svg {
  position: absolute;
  pointer-events: none;
}

#ripple-layer .ripple-circle {
  fill: none;
  stroke: var(--c-ocean-blue);
  stroke-width: 1.5;
  stroke-opacity: 0.18;
  animation: rippleGrow 0.8s ease-out forwards;
}

@keyframes rippleGrow {
  0%   { r: 0;   stroke-opacity: 0.18; }
  100% { r: 200; stroke-opacity: 0;    }
}

/* ============================ ECOSYSTEM ============================ */
.ecosystem {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(167,243,208,0.08), transparent 60%),
    linear-gradient(180deg, var(--c-deep-teal) 0%, #1c6962 45%, #5db59c 80%, var(--c-seafoam) 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 6vh 6vw;
}

.frame {
  position: absolute;
  top: 0;
  height: 100%;
  width: clamp(120px, 14vw, 200px);
  pointer-events: none;
  opacity: 0.85;
}
.frame-left  { left: 0; }
.frame-right { right: 0; transform: scaleX(1); }

.botanical path,
.botanical-svg path,
.botanical-svg ellipse,
.botanical-svg circle {
  fill: none;
  stroke: var(--c-kelp-green);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.botanical .bud,
.botanical-svg .bud {
  fill: var(--c-coral-warm);
  stroke: var(--c-coral-warm);
}
.botanical-svg .fruit {
  fill: var(--c-coral-warm);
  fill-opacity: 0.7;
  stroke: var(--c-coral-warm);
}

/* Path-draw animation on hero frames */
.frame .botanical path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawFrame 2s ease-out forwards;
}
.frame .botanical .bud {
  opacity: 0;
  animation: budFade 1.4s ease-out 1.4s forwards;
}

@keyframes drawFrame {
  to { stroke-dashoffset: 0; }
}
@keyframes budFade {
  to { opacity: 1; }
}

.ecosystem-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-seafoam);
  opacity: 0.85;
  margin-bottom: 24px;
  animation: fadeRise 1.2s ease-out 200ms both;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 132px);
  letter-spacing: 0.18em;
  color: var(--c-sand-light);
  line-height: 1;
  margin-bottom: 36px;
  position: relative;
  display: inline-block;
  animation: wordmarkIn 1.4s ease-out 600ms both;
}

@keyframes wordmarkIn {
  0%   { opacity: 0; letter-spacing: 0;     transform: translateY(8px); }
  100% { opacity: 1; letter-spacing: 0.18em; transform: translateY(0);  }
}

.wordmark-ripples {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.wordmark-ripples .ring {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  border: 1.5px solid var(--c-ocean-blue);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: heroRing 4s ease-out infinite;
}
.wordmark-ripples .ring:nth-child(1) { animation-delay: 0s; }
.wordmark-ripples .ring:nth-child(2) { animation-delay: 1.3s; }
.wordmark-ripples .ring:nth-child(3) { animation-delay: 2.6s; }

@keyframes heroRing {
  0%   { width: 0;     height: 0;     opacity: 0.45; }
  60%  { width: 380px; height: 380px; opacity: 0.12; }
  100% { width: 620px; height: 620px; opacity: 0;    }
}

.tagline {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 20px);
  font-style: italic;
  color: var(--c-sand-light);
  opacity: 0.92;
  max-width: 640px;
  margin: 0 auto 56px;
  animation: fadeRise 1.4s ease-out 1100ms both;
}
.tagline em {
  color: var(--c-coral-warm);
  font-style: italic;
}

.hex-previews {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
  animation: fadeRise 1.4s ease-out 1500ms both;
}

.hex-prev {
  aspect-ratio: 1 / 1.1547;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid;
  place-items: center;
  padding: 14px;
  position: relative;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.hex-prev:hover { transform: translateY(-4px) scale(1.03); }

.hex-prev .hex-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-deepest-teal);
  font-weight: 500;
}

.cat-library   { background: var(--c-seafoam);     }
.cat-framework { background: #cdeed8;              }
.cat-runtime   { background: #7fdbc4;              }
.cat-tool      { background: var(--c-sand-light);  }

.scroll-hint {
  margin-top: 68px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-sand-light);
  opacity: 0.7;
  animation: fadeRise 1.4s ease-out 2000ms both, hint 2.4s ease-in-out 3s infinite;
}
@keyframes hint {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@keyframes fadeRise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0);    }
}

/* ============================ KNOWLEDGE CELLS ============================ */
.cells {
  position: relative;
  background: linear-gradient(180deg, var(--c-seafoam) 0%, #cdeed8 30%, #f1f7ee 100%);
  padding: 14vh 6vw 16vh;
  color: var(--c-deepest-teal);
}

.section-head {
  max-width: 1100px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--c-kelp-green);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 72px);
  letter-spacing: 0.08em;
  color: var(--c-deep-teal);
  margin-bottom: 18px;
}

.section-lede {
  font-style: italic;
  max-width: 640px;
  margin: 0 auto;
  color: var(--c-deepest-teal);
  opacity: 0.88;
}

.honeycomb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 8px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Even rows offset (rows 2 of 3) */
.honeycomb .cell:nth-child(3n+1):nth-child(n+4) { /* placeholder for clarity */ }

/* Use grid row trick: row 2 (children 4..6) shifted */
.honeycomb .cell:nth-child(n+4):nth-child(-n+6) {
  margin-left: calc(50% / 3 + 4px);
}

.cell {
  position: relative;
  aspect-ratio: 1 / 1.05;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--c-sand-light);
  padding: 14% 10% 14%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.6s;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
}
.cell.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cell:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 8px 18px rgba(10,46,42,0.12));
}

.cell-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.species {
  width: 56px;
  height: 56px;
}

.species path,
.species ellipse,
.species circle {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.2s ease-out;
}
.cell.is-visible .species path,
.cell.is-visible .species ellipse,
.cell.is-visible .species circle {
  stroke-dashoffset: 0;
}

.stripe {
  display: block;
  width: 38px;
  height: 2px;
  background: var(--c-deep-teal);
  margin-top: 4px;
}

.cell.cat-library   .stripe { background: var(--c-coral-warm);  }
.cell.cat-framework .stripe { background: var(--c-kelp-green);  }
.cell.cat-runtime   .stripe { background: var(--c-ocean-blue);  }
.cell.cat-tool      .stripe { background: var(--c-reef-purple); }

.cell.cat-library   { background: #f7eee0; }
.cell.cat-framework { background: #ecf5e7; }
.cell.cat-runtime   { background: #e2f2f7; }
.cell.cat-tool      { background: #efe6f8; }

.cell-body {
  text-align: center;
  margin-top: 10px;
}

.cell .cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-kelp-green);
  margin-bottom: 6px;
}
.cell.cat-library   .cat { color: var(--c-coral-warm);  }
.cell.cat-framework .cat { color: var(--c-kelp-green);  }
.cell.cat-runtime   .cat { color: var(--c-ocean-blue);  }
.cell.cat-tool      .cat { color: var(--c-reef-purple); }

.cell h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.05em;
  color: var(--c-deep-teal);
  margin-bottom: 6px;
}

.cell .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--c-deepest-teal);
  opacity: 0.7;
  margin-bottom: 10px;
}

.cell .prose {
  font-style: italic;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.7;
  color: var(--c-deepest-teal);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cell .pkg {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-deep-teal);
  background: rgba(19,78,74,0.06);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================ CANOPY ============================ */
.canopy {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.45), transparent 60%),
    linear-gradient(180deg, #f1f7ee 0%, #d3e3dc 50%, #6da99c 100%);
  color: var(--c-deepest-teal);
  padding: 14vh 6vw 16vh;
  overflow: hidden;
}

.canopy .section-title { color: var(--c-deep-teal); }

.canopy-figure {
  max-width: 1100px;
  margin: 0 auto 36px;
  position: relative;
}

.canopy-svg {
  width: 100%;
  height: auto;
  display: block;
}

.tree-trunk path,
.tree-roots path {
  fill: none;
  stroke: var(--c-kelp-green);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}
.canopy.is-visible .tree-trunk path,
.canopy.is-visible .tree-roots path {
  animation: drawCanopy 2.4s ease-out forwards;
}
.canopy.is-visible .tree-roots path { animation-delay: 0.6s; }

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

.tree-flowers circle {
  fill: var(--c-coral-warm);
  fill-opacity: 0.85;
  stroke: var(--c-deep-teal);
  stroke-width: 0.8;
  opacity: 0;
}
.canopy.is-visible .tree-flowers circle {
  animation: bloom 0.9s ease-out forwards;
}
.canopy.is-visible .tree-flowers circle:nth-child(1) { animation-delay: 1.6s; }
.canopy.is-visible .tree-flowers circle:nth-child(2) { animation-delay: 1.75s; }
.canopy.is-visible .tree-flowers circle:nth-child(3) { animation-delay: 1.9s; }
.canopy.is-visible .tree-flowers circle:nth-child(4) { animation-delay: 2.05s; }
.canopy.is-visible .tree-flowers circle:nth-child(5) { animation-delay: 2.2s; }
.canopy.is-visible .tree-flowers circle:nth-child(6) { animation-delay: 2.35s; }
.canopy.is-visible .tree-flowers circle:nth-child(7) { animation-delay: 2.5s; }

@keyframes bloom {
  0%   { opacity: 0; transform-origin: center; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.95; transform: scale(1); }
}

.tree-thorns path {
  fill: var(--c-reef-purple);
  stroke: var(--c-reef-purple);
  stroke-width: 0.6;
  opacity: 0;
}
.canopy.is-visible .tree-thorns path {
  animation: bloom 0.8s ease-out 2.7s forwards;
}

.tree-tips circle {
  fill: var(--c-ocean-blue);
  fill-opacity: 0.6;
  opacity: 0;
}
.canopy.is-visible .tree-tips circle {
  animation: bloom 0.7s ease-out forwards;
}
.canopy.is-visible .tree-tips circle:nth-child(1) { animation-delay: 2.4s; }
.canopy.is-visible .tree-tips circle:nth-child(2) { animation-delay: 2.55s; }
.canopy.is-visible .tree-tips circle:nth-child(3) { animation-delay: 2.7s; }
.canopy.is-visible .tree-tips circle:nth-child(4) { animation-delay: 2.85s; }
.canopy.is-visible .tree-tips circle:nth-child(5) { animation-delay: 3.0s; }
.canopy.is-visible .tree-tips circle:nth-child(6) { animation-delay: 3.15s; }

.soil-line {
  stroke: var(--c-deepest-teal);
  stroke-width: 0.6;
  stroke-dasharray: 4 6;
  opacity: 0.4;
}

.canopy-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-deepest-teal);
}
.canopy-caption .legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.canopy-caption em {
  font-style: italic;
  font-family: var(--font-body);
  letter-spacing: 0;
  opacity: 0.75;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot-flower { background: var(--c-coral-warm);  }
.dot-stem   { background: var(--c-kelp-green);  }
.dot-root   { background: var(--c-ocean-blue);  }
.dot-thorn  { background: var(--c-reef-purple); }

.canopy-prose {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-style: italic;
  color: var(--c-deepest-teal);
}
.canopy-prose strong {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  background: rgba(19,78,74,0.08);
  padding: 1px 8px;
  border-radius: 4px;
}

/* ============================ SEABED FOOTER ============================ */
.seabed {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(167,243,208,0.05), transparent 60%),
    linear-gradient(180deg, #1c4a46 0%, var(--c-deepest-teal) 70%);
  color: var(--c-sand-light);
  padding: 16vh 6vw 8vh;
  overflow: hidden;
}

.seaweed {
  position: absolute;
  bottom: 0;
  height: 60%;
  width: 30vw;
  max-width: 360px;
  pointer-events: none;
  opacity: 0.6;
}
.seaweed-l { left: 0; }
.seaweed-r { right: 0; }

.seaweed .botanical-svg path {
  stroke: var(--c-kelp-green);
  stroke-width: 1;
  animation: sway 6s ease-in-out infinite;
  transform-origin: bottom center;
}
.seaweed-r .botanical-svg path {
  animation-direction: reverse;
}

@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg);  }
}

.seabed-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.seabed-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 0.18em;
  color: var(--c-sand-light);
  margin-bottom: 12px;
}

.seabed-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-seafoam);
  opacity: 0.78;
  margin-bottom: 36px;
}

.seabed-nav {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-bottom: 36px;
}
.seabed-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-sand-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.4s, color 0.4s;
}
.seabed-nav a:hover {
  border-color: var(--c-coral-warm);
  color: var(--c-coral-warm);
}

.seabed-fine {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--c-sand-light);
  opacity: 0.65;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .hex-previews { grid-template-columns: repeat(2, 1fr); max-width: 420px; gap: 14px; }
  .honeycomb { grid-template-columns: repeat(2, 1fr); }
  .honeycomb .cell:nth-child(n+4):nth-child(-n+6) { margin-left: 0; }
}
@media (max-width: 560px) {
  .hex-previews { grid-template-columns: repeat(2, 1fr); }
  .honeycomb { grid-template-columns: repeat(1, 1fr); max-width: 320px; }
  .honeycomb .cell:nth-child(n+4):nth-child(-n+6) { margin-left: 0; }
  .frame { width: 90px; opacity: 0.55; }
}