/* ============================================================
   Harz Forest Dieback — Scroll Animation Component
   forest-animation.css

   All visual parameters exposed as CSS custom properties at :root.
   Edit these values to reconfigure the component without touching
   any JavaScript.
   ============================================================ */

/* ── Configurable custom properties ──────────────────────────── */
:root {
  --forest-opacity:       0.80;                   /* NDVI base image opacity         */
  --healthy-opacity:      0.70;                   /* spruce green mask opacity        */
  --overlay-gradient:     linear-gradient(
                            to bottom,
                            rgba(0, 0, 0, 0.45) 0%,
                            rgba(0, 0, 0, 0.00) 25%,
                            rgba(0, 0, 0, 0.00) 75%,
                            rgba(0, 0, 0, 0.50) 100%
                          );
  --text-colour:          #ffffff;
  --text-shadow:          0 1px 4px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
  --pulse-amplitude:      0.08;                   /* read by JS; not used in CSS     */
  --pulse-duration:       3000;                   /* ms; read by JS                  */
  --transition-duration:  400;                    /* ms; read by JS                  */
  --zoom-scale:           1.05;                   /* read by JS                      */
  --background-colour:    #0A150A;                /* dark forest background          */
  --spruce-green:         #2D6A1B;                /* used in AOI outline tint        */
  --aoi-stroke:           rgba(255,255,255,0.18); /* AOI boundary line colour        */
  --aoi-stroke-width:     1.5;                    /* px; read by JS                  */
  --font-family:          Georgia, 'Times New Roman', serif;
  --year-font-size:       clamp(3.5rem, 9vw, 7.5rem);
  --stat-font-size:       clamp(0.75rem, 1.8vw, 1.05rem);
  --caption-font-size:    clamp(0.7rem, 1.5vw, 0.95rem);
  --ui-padding:           clamp(1.5rem, 4vw, 3rem);

  /* Internal — set by JS during animation; do not edit */
  --_zoom:                1;
}

/* ── Reset & box model ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* ── Component root ──────────────────────────────────────────── */
.forest-component {
  position:   relative;
  width:      100%;
  outline:    none;               /* focus ring handled custom below */
}

.forest-component:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: -2px;
}

/* ── Scroll track: creates the scrollable height ─────────────── */
.fc-scroll-track {
  /* Height set by JS based on year count × 100vh */
  position: relative;
}

/* ── Stage: sticky viewport-locked canvas container ─────────── */
.fc-stage {
  position:         sticky;
  top:              0;
  left:             0;
  width:            100%;
  height:           100vh;
  overflow:         hidden;
  background-color: var(--background-colour);
  transform:        scale(var(--_zoom));
  transform-origin: center center;
  will-change:      transform;
}

/* ── Canvas layers ───────────────────────────────────────────── */
.fc-canvas {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  display:    block;
}

/* NDVI colour image — base scientific context */
.fc-ndvi-canvas {
  z-index: 1;
}

/* Spruce green healthy-forest mask */
.fc-mask-canvas {
  z-index:    2;
  /* mix-blend-mode removed — Safari renders canvas blend modes incorrectly */
}

/* AOI outline — drawn once, never redrawn */
.fc-outline-canvas {
  z-index:    3;
  pointer-events: none;
}

/* ── Gradient overlay for text legibility ────────────────────── */
.fc-gradient {
  position:   absolute;
  inset:      0;
  z-index:    4;
  background: var(--overlay-gradient);
  pointer-events: none;
}

/* ── UI text layer ───────────────────────────────────────────── */
.fc-ui {
  position:   absolute;
  inset:      0;
  z-index:    5;
  display:    flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:    var(--ui-padding);
  pointer-events: none;
  color:      var(--text-colour);
  font-family: var(--font-family);
}

/* Year number */
.fc-year {
  font-size:      var(--year-font-size);
  font-weight:    400;
  letter-spacing: -0.02em;
  line-height:    1;
  text-shadow:    var(--text-shadow);
  margin-bottom:  0.4em;
  font-variant-numeric: tabular-nums;
  /* Transition year number fade */
  transition:     opacity 200ms ease;
}

/* Statistics row */
.fc-stats {
  display:        flex;
  gap:            2em;
  margin-bottom:  0.75em;
  flex-wrap:      wrap;
}

.fc-stat {
  display:        flex;
  flex-direction: column;
  gap:            0.1em;
}

.fc-stat-value {
  font-size:      calc(var(--stat-font-size) * 1.5);
  font-weight:    600;
  letter-spacing: 0.01em;
  text-shadow:    var(--text-shadow);
  font-variant-numeric: tabular-nums;
  min-width:      4ch;
  display:        inline-block;
}

.fc-stat-label {
  font-size:      var(--stat-font-size);
  opacity:        0.75;
  font-style:     italic;
  text-shadow:    var(--text-shadow);
  letter-spacing: 0.03em;
}

/* Caption */
.fc-caption {
  font-size:      var(--caption-font-size);
  font-style:     italic;
  opacity:        0.82;
  text-shadow:    var(--text-shadow);
  max-width:      55ch;
  line-height:    1.5;
  letter-spacing: 0.01em;
  transition:     opacity 300ms ease;
}

.fc-caption.fc-caption--hidden {
  opacity: 0;
}

/* ── NDVI legend ─────────────────────────────────────────────── */
.fc-legend {
  position:       absolute;
  bottom:         var(--ui-padding);
  right:          var(--ui-padding);
  z-index:        6;
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  gap:            0.45rem;
  pointer-events: none;
  background:     rgba(0,0,0,0.35);
  padding:        0.6rem 0.7rem;
  border-radius:  6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:         1px solid rgba(255,255,255,0.08);
}

.fc-legend-title {
  font-family:    var(--font-family);
  font-size:      0.62rem;
  color:          rgba(255,255,255,0.85);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode:   vertical-rl;
  transform:      rotate(180deg);
  align-self:     center;
  text-shadow:    var(--text-shadow);
}

/* Gradient bar — matches the NDVI colormap */
.fc-legend-bar {
  width:          10px;
  height:         140px;
  border-radius:  3px;
  flex-shrink:    0;
  background:     linear-gradient(
    to bottom,
    #0A2A06  0%,      /* NDVI 1.0  — deep forest   */
    #2D6A1B  23%,     /* NDVI 0.65 — forest green  */
    #5A9E3A  38%,     /* NDVI 0.5  — healthy       */
    #A8C040  50%,     /* NDVI 0.4  — transitional  */
    #E8C547  57%,     /* NDVI 0.3  — dead thresh   */
    #D47A1E  72%,     /* NDVI 0.15 — stressed      */
    #6B1A00  88%,     /* NDVI 0.0  — bare/dead     */
    #3D0D00  100%     /* NDVI −1   — shadow/water  */
  );
  border:         1px solid rgba(255,255,255,0.12);
}

/* Numeric tick labels */
.fc-legend-labels {
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  height:         140px;
  font-family:    'Courier New', monospace;
  font-size:      0.58rem;
  color:          rgba(255,255,255,0.80);
  text-shadow:    var(--text-shadow);
  line-height:    1;
}

/* Named category markers with tick lines */
.fc-legend-markers {
  position:       relative;
  width:          38px;
  height:         140px;
  flex-shrink:    0;
}

.fc-legend-marker {
  position:       absolute;
  left:           0;
  transform:      translateY(-50%);
  font-family:    var(--font-family);
  font-size:      0.58rem;
  font-style:     italic;
  color:          rgba(255,255,255,0.90);
  text-shadow:    var(--text-shadow);
  white-space:    nowrap;
}

.fc-legend-marker::before {
  content:        '';
  display:        inline-block;
  width:          6px;
  height:         1px;
  background:     rgba(255,255,255,0.35);
  vertical-align: middle;
  margin-right:   4px;
}

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

/* ── Loading screen ──────────────────────────────────────────── */
.fc-loading {
  position:       absolute;
  inset:          0;
  z-index:        20;
  display:        flex;
  align-items:    center;
  justify-content: center;
  background:     var(--background-colour);
  color:          rgba(255,255,255,0.7);
  font-family:    var(--font-family);
  font-size:      1rem;
  letter-spacing: 0.1em;
  transition:     opacity 600ms ease;
}

.fc-loading.fc-loading--hidden {
  opacity:        0;
  pointer-events: none;
}

/* ── Reduced-motion fallback: static grid ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fc-stage,
  .fc-scroll-track {
    display: none;
  }

  .fc-static-grid {
    display:                grid;
    grid-template-columns:  repeat(auto-fill, minmax(280px, 1fr));
    gap:                    1rem;
    padding:                1rem;
    background:             var(--background-colour);
  }

  .fc-static-card {
    position:   relative;
    overflow:   hidden;
    border-radius: 4px;
  }

  .fc-static-card img {
    width:      100%;
    display:    block;
  }

  .fc-static-card-label {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    0.5rem 0.75rem;
    background: rgba(0,0,0,0.6);
    color:      white;
    font-family: var(--font-family);
    font-size:  0.85rem;
  }
}

.fc-static-grid {
  display: none;
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 768px) {
  .fc-stats {
    gap: 1.2em;
  }

  .fc-caption {
    display: none;   /* caption hidden on small screens — too cluttered */
  }
}

/* ── Test harness panel ──────────────────────────────────────── */
.fc-harness {
  position:         fixed;
  top:              1rem;
  right:            1rem;
  z-index:          1000;
  background:       rgba(10, 10, 10, 0.92);
  border:           1px solid rgba(255,255,255,0.15);
  border-radius:    8px;
  padding:          1rem;
  width:            260px;
  color:            rgba(255,255,255,0.85);
  font-family:      'Courier New', monospace;
  font-size:        0.72rem;
  backdrop-filter:  blur(8px);
  display:          flex;
  flex-direction:   column;
  gap:              0.6rem;
  max-height:       90vh;
  overflow-y:       auto;
}

.fc-harness h3 {
  font-size:        0.75rem;
  text-transform:   uppercase;
  letter-spacing:   0.12em;
  opacity:          0.6;
  margin-bottom:    0.2rem;
  border-bottom:    1px solid rgba(255,255,255,0.1);
  padding-bottom:   0.3rem;
}

.fc-harness label {
  display:          flex;
  flex-direction:   column;
  gap:              0.2rem;
  font-size:        0.68rem;
  opacity:          0.8;
}

.fc-harness input[type="range"],
.fc-harness input[type="text"],
.fc-harness select {
  width:            100%;
  background:       rgba(255,255,255,0.08);
  border:           1px solid rgba(255,255,255,0.2);
  color:            white;
  border-radius:    3px;
  padding:          0.2rem 0.4rem;
  font-family:      inherit;
  font-size:        0.68rem;
}

.fc-harness input[type="range"] {
  padding: 0;
  accent-color: #2D6A1B;
}

.fc-fps {
  font-size:        0.95rem;
  font-weight:      bold;
  color:            #7ECA5F;
  letter-spacing:   0.05em;
}

.fc-harness-toggle {
  position:         fixed;
  top:              1rem;
  right:            1rem;
  z-index:          1001;
  background:       rgba(10,10,10,0.8);
  border:           1px solid rgba(255,255,255,0.2);
  color:            white;
  border-radius:    4px;
  padding:          0.3rem 0.6rem;
  font-size:        0.7rem;
  cursor:           pointer;
  font-family:      'Courier New', monospace;
  display:          none;   /* shown by JS after harness initialised */
}