/* ============================================================
   SCENE — SKIN AS LAYERS
   Scroll-through of a stylized skin cross-section.
   Four layers: surface, barrier, active dermis, below.
   Each layer activates as scroll progresses.
   Mela's voice appears layer by layer.
   ============================================================ */

/* ----- The scene is unusually tall (4 viewports) to accommodate scroll states ----- */

.scene-layers {
  position: relative;
  min-height: 400vh; /* 4 layers × 100vh each */
  padding: 0;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 50%, var(--parchment) 100%);
}

/* The sticky stage — face stays fixed while page scrolls */
.layers-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 1100px) {
  .layers-stage {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----- The face/skin SVG — full bleed left, centered on mobile ----- */

.face-container {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.face-svg {
  width: 100%;
  height: auto;
  max-height: 80vh;
  max-width: 560px;
}

/* ----- Skin layer styling ----- */

.skin-layer {
  transition: opacity 1200ms var(--ease-deliberate);
}

/* Base styling for the cross-section structure */
.cross-section {
  fill: none;
  stroke: var(--bark-soft);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  transition: opacity 1000ms var(--ease-deliberate),
              stroke-width 1000ms var(--ease-deliberate);
}

/* Surface details — hair shafts, pores, microbiome dots */
.surface-detail {
  fill: var(--bark-soft);
  opacity: 0.3;
  transition: opacity 1000ms var(--ease-deliberate),
              fill 1000ms var(--ease-deliberate);
}

/* Sebum film */
.sebum-film {
  fill: rgba(184, 146, 61, 0.10);
  transition: fill 1200ms var(--ease-deliberate),
              opacity 1200ms var(--ease-deliberate);
}

/* Microbiome dots */
.microbe-dot {
  fill: var(--bark-quiet);
  opacity: 0.4;
  transition: opacity 1000ms var(--ease-deliberate),
              fill 1000ms var(--ease-deliberate);
}

/* Barrier (stratum corneum) — represented as overlapping cells */
.barrier-cell {
  fill: var(--parchment-light);
  stroke: var(--bark-quiet);
  stroke-width: 0.8;
  opacity: 0.5;
  transition: opacity 1200ms var(--ease-deliberate),
              fill 1200ms var(--ease-deliberate),
              stroke 1200ms var(--ease-deliberate);
}

.barrier-fill {
  fill: rgba(107, 123, 94, 0.08);
  opacity: 0;
  transition: opacity 1500ms var(--ease-deliberate);
}

/* Epidermis layer */
.epidermis {
  fill: rgba(184, 146, 61, 0.04);
  opacity: 0.5;
  transition: opacity 1200ms var(--ease-deliberate),
              fill 1200ms var(--ease-deliberate);
}

/* Dermis layer (active) — vasculature visible here */
.dermis {
  fill: rgba(184, 146, 61, 0.06);
  opacity: 0.4;
  transition: opacity 1200ms var(--ease-deliberate),
              fill 1200ms var(--ease-deliberate);
}

.vessel {
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 1200ms var(--ease-deliberate),
              stroke-width 1200ms var(--ease-deliberate);
}

.collagen-strand {
  stroke: var(--bark-soft);
  stroke-width: 0.5;
  fill: none;
  opacity: 0.3;
  transition: opacity 1200ms var(--ease-deliberate);
}

/* Below — bloodstream, systemic */
.bloodstream {
  fill: rgba(196, 93, 67, 0.08);
  opacity: 0.3;
  transition: opacity 1500ms var(--ease-deliberate),
              fill 1500ms var(--ease-deliberate);
}

/* Inflow arrows from below */
.inflow {
  stroke: var(--coral);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 4 3;
  opacity: 0;
  transition: opacity 1200ms var(--ease-deliberate);
}

.inflow-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--bark-soft);
  opacity: 0;
  transition: opacity 1500ms var(--ease-deliberate);
}

/* Inflow from above (UV, products, environment) */
.outflow-from-above {
  stroke: var(--bark-quiet);
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 3 4;
  opacity: 0;
  transition: opacity 1200ms var(--ease-deliberate);
}

/* Layer labels — appear at the relevant scroll moment */
.layer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--bark-quiet);
  opacity: 0;
  transition: opacity 800ms var(--ease-deliberate);
}

.layer-label-name {
  font-family: var(--font-display);
  font-size: 14px;
  fill: var(--deep-bark);
  font-style: italic;
  font-variation-settings: 'opsz' 36;
  font-weight: 400;
  opacity: 0;
  transition: opacity 800ms var(--ease-deliberate);
}

/* ----- Scroll-state classes — applied to .scene-layers based on scroll position ----- */

/* Layer 0 — intro: nothing active yet, all dim */
.scene-layers[data-layer="0"] .cross-section { opacity: 0.5; }

/* Layer 1 — Surface active */
.scene-layers[data-layer="1"] .sebum-film { opacity: 1; }
.scene-layers[data-layer="1"] .surface-detail { opacity: 1; fill: var(--gold); }
.scene-layers[data-layer="1"] .microbe-dot { opacity: 0.9; fill: var(--sage); }
.scene-layers[data-layer="1"] .cross-section.surface { stroke-width: 2; opacity: 1; }
.scene-layers[data-layer="1"] .layer-label.surface,
.scene-layers[data-layer="1"] .layer-label-name.surface { opacity: 1; }

/* Layer 2 — Barrier active */
.scene-layers[data-layer="2"] .barrier-cell { opacity: 1; stroke: var(--sage); fill: rgba(107, 123, 94, 0.04); }
.scene-layers[data-layer="2"] .barrier-fill { opacity: 1; }
.scene-layers[data-layer="2"] .cross-section.barrier { stroke-width: 2; opacity: 1; }
.scene-layers[data-layer="2"] .layer-label.barrier,
.scene-layers[data-layer="2"] .layer-label-name.barrier { opacity: 1; }
.scene-layers[data-layer="2"] .surface-detail { opacity: 0.3; }
.scene-layers[data-layer="2"] .sebum-film { opacity: 0.4; }

/* Layer 3 — Dermis active */
.scene-layers[data-layer="3"] .dermis { opacity: 1; fill: rgba(196, 93, 67, 0.10); }
.scene-layers[data-layer="3"] .vessel { opacity: 1; stroke-width: 1.8; }
.scene-layers[data-layer="3"] .collagen-strand { opacity: 0.7; }
.scene-layers[data-layer="3"] .cross-section.dermis { stroke-width: 2; opacity: 1; }
.scene-layers[data-layer="3"] .layer-label.dermis,
.scene-layers[data-layer="3"] .layer-label-name.dermis { opacity: 1; }
.scene-layers[data-layer="3"] .barrier-cell { opacity: 0.5; }
.scene-layers[data-layer="3"] .barrier-fill { opacity: 0.4; }
.scene-layers[data-layer="3"] .sebum-film { opacity: 0.2; }

/* Layer 4 — Below active (systemic) */
.scene-layers[data-layer="4"] .bloodstream { opacity: 1; fill: rgba(196, 93, 67, 0.16); }
.scene-layers[data-layer="4"] .inflow { opacity: 0.8; }
.scene-layers[data-layer="4"] .inflow-label { opacity: 1; }
.scene-layers[data-layer="4"] .outflow-from-above { opacity: 0.6; }
.scene-layers[data-layer="4"] .cross-section.below { stroke-width: 2; opacity: 1; }
.scene-layers[data-layer="4"] .layer-label.below,
.scene-layers[data-layer="4"] .layer-label-name.below { opacity: 1; }
.scene-layers[data-layer="4"] .dermis { opacity: 0.5; }
.scene-layers[data-layer="4"] .vessel { opacity: 0.5; }
.scene-layers[data-layer="4"] .barrier-cell { opacity: 0.3; }
.scene-layers[data-layer="4"] .surface-detail { opacity: 0.2; }

/* ----- Right side: Mela's annotations panel ----- */

.layers-annotations {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-6) var(--space-8);
}

@media (max-width: 1099px) {
  .layers-annotations {
    height: auto;
    padding: 0 var(--space-4) var(--space-8);
  }
}

.annotations-inner {
  width: 100%;
  max-width: 460px;
  position: relative;
}

/* Layer-specific annotation card — only one visible at a time */
.layer-annotation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 1000ms var(--ease-carve),
              transform 1000ms var(--ease-carve);
}

.scene-layers[data-layer="1"] .layer-annotation[data-for="surface"],
.scene-layers[data-layer="2"] .layer-annotation[data-for="barrier"],
.scene-layers[data-layer="3"] .layer-annotation[data-for="dermis"],
.scene-layers[data-layer="4"] .layer-annotation[data-for="below"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.layer-annotation-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark-quiet);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.layer-annotation-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--bark-quiet);
  border-radius: 50%;
  font-size: 10px;
  color: var(--bark-soft);
  font-family: var(--font-mono);
}

.layer-annotation-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  font-weight: 320;
  color: var(--deep-bark);
  margin: 0 0 var(--space-4) 0;
}

.layer-annotation-title em {
  font-style: italic;
  color: var(--gold);
}

.layer-annotation-body {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  font-weight: 350;
  line-height: 1.5;
  color: var(--bark);
  margin: 0 0 var(--space-4) 0;
}

.layer-annotation-mela {
  border-left: 2px solid var(--gold);
  padding-left: var(--space-3);
  margin-top: var(--space-4);
}

.layer-annotation-mela-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.layer-annotation-mela-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
}

.layer-annotation-mela-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--deep-bark);
  font-style: italic;
  font-variation-settings: 'opsz' 36;
  font-weight: 400;
  margin: 0;
}

/* Layer progress indicator — far right edge */
.layer-progress {
  position: fixed;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: 0;
  transition: opacity 800ms var(--ease-deliberate);
}

.scene-layers.in-view ~ .layer-progress,
body.layers-active .layer-progress {
  opacity: 1;
}

.layer-progress-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  border: 0;
}

.layer-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bark-quiet);
  opacity: 0.3;
  transition: opacity 600ms var(--ease-deliberate),
              transform 600ms var(--ease-deliberate),
              background 600ms var(--ease-deliberate);
}

.layer-progress-item.active .layer-progress-dot {
  opacity: 1;
  background: var(--gold);
  transform: scale(1.4);
}

.layer-progress-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark-quiet);
  opacity: 0;
  transition: opacity 600ms var(--ease-deliberate);
}

.layer-progress-item.active .layer-progress-label,
.layer-progress-item:hover .layer-progress-label {
  opacity: 1;
}

@media (max-width: 768px) {
  .layer-progress { display: none; }
}

/* ----- Mobile fallback — stack layers vertically as separate scenes ----- */

@media (max-width: 1099px) {
  .scene-layers {
    min-height: auto;
    padding: var(--space-12) 0;
  }

  .layers-stage {
    position: relative;
    top: auto;
    height: auto;
    display: block;
    overflow: visible;
  }

  .face-container {
    height: auto;
    min-height: 60vh;
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment) 80%, rgba(245, 239, 230, 0) 100%);
    z-index: 1;
  }

  .layers-annotations {
    position: relative;
    z-index: 2;
  }

  .annotations-inner {
    max-width: 100%;
  }

  /* On mobile, all annotations stack visibly with spacing */
  .layer-annotation {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: var(--space-8) 0;
    border-bottom: 1px solid rgba(58, 51, 41, 0.08);
  }
}

/* ----- Reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
  .skin-layer, .cross-section, .surface-detail, .sebum-film,
  .microbe-dot, .barrier-cell, .barrier-fill, .epidermis,
  .dermis, .vessel, .collagen-strand, .bloodstream, .inflow,
  .inflow-label, .outflow-from-above, .layer-label, .layer-label-name,
  .layer-annotation {
    transition-duration: 0.01ms !important;
  }
}