/* Loaded only by the home page.

 * The home page is one page with a great many components of its own — the hero and its analysis
 * sweep, the sensor strip, the gap columns, the ten-year archive, the category cards. They were
 * sitting in the shared stylesheet, which meant the other twenty-nine pages downloaded all of it
 * to render none of it.
 *
 * What stays shared is what more than one page renders: the comparison slider (/sample-report
 * uses it), the finding card, the form, the footer, and the severity badges — whose modifier is
 * built at render time, badge--{{ flag.tone }}, so no static scan can prove where it is used.
 */

/* ============================ hero ============================ */

.hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 4vw, 4rem));
  padding-bottom: clamp(3rem, 1.5rem + 5vw, 5rem);
  text-align: center;
}

.hero .label { margin-bottom: var(--space-6); }
.hero h1 { max-width: 17ch; margin-inline: auto; }

.hero__lead {
  margin: var(--space-6) auto 0;
  max-width: 44ch;
  font-size: var(--text-lg);
  color: var(--fg-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* The satellite image is the hero object: large, centred, floating on the aura. */
.hero__figure {
  max-width: var(--container-wide);
  margin: clamp(2rem, 1rem + 3vw, 3.25rem) auto 0;
  padding-inline: var(--gutter);
}

.scan {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: var(--space-2);
  box-shadow: var(--shadow-lift);
}

/* Cropped to a band rather than shown whole. At full aspect the figure is 821px tall and pushes
 * its own caption off the screen, so the reader sees a satellite photograph and never the numbers
 * that explain it. The crop takes from the top and bottom, which costs nothing here — the river
 * and the wet fields both run across the middle. */
.scan__stack {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-xl) - 6px);
  overflow: hidden;
  line-height: 0;
}

.scan__stack picture {
  position: absolute;
  inset: 0;
  display: block;
}

.scan__stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .scan__stack { aspect-ratio: 4 / 3; }
}

/* The analysed frame sits exactly over the raw one and is revealed left to right, once, when the
 * figure comes into view. Before the sweep runs it is fully hidden; after it, fully shown. The
 * wipe is the only invented thing in this figure — both images underneath are real Sentinel data
 * over the same ground, so the sweep reveals a measurement rather than decorating one. */
.scan__result { clip-path: inset(0 100% 0 0); }

.scan.is-running .scan__result { animation: scan-reveal 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.scan__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
  box-shadow: 0 0 18px 2px rgb(63 207 142 / 55%);
}

.scan.is-running .scan__line { animation: scan-sweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes scan-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes scan-sweep {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Without the animation the figure must still make its point, so the analysed frame is simply
 * the one you see. Nothing is withheld behind a motion effect. */
@media (prefers-reduced-motion: reduce) {
  .scan__result { clip-path: inset(0 0 0 0); }
  .scan.is-running .scan__result,
  .scan.is-running .scan__line { animation: none; }
  .scan__line { display: none; }
}

.scan__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
  padding: 0 var(--space-3) var(--space-1);
}

.scan__legend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--fg-muted);
}

.scan__legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  background: rgb(63 207 142 / 38%);
}

.scan__legend--strong { color: var(--fg); }
.scan__legend--strong i { background: rgb(63 207 142 / 84%); }

.scan__caption .caption { margin-inline-start: auto; }

@media (max-width: 720px) {
  .scan__caption .caption { margin-inline-start: 0; }
}

/* ============================ statement (the gap) ============================ */

.statement { display: grid; gap: var(--space-5); }

@media (min-width: 900px) {
  .statement { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.statement__col {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.statement__col--accent {
  background: var(--gradient-soft);
  border-color: rgb(63 207 142 / 24%);
}

.statement h3 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
  margin-block: var(--space-3) var(--space-5);
  max-width: 20ch;
}

.statement__col--muted h3,
.statement__col--muted li { color: var(--fg-faint); }

.statement ul { list-style: none; padding: 0; }

.statement li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-base);
}

.statement li::before { content: "·"; font-family: var(--font-data); color: var(--fg-faint); }
.statement__col--accent li::before { content: "→"; color: var(--accent); }

/* ============================ split ============================ */

.split { display: grid; gap: var(--space-6); }

@media (min-width: 980px) {
  .split {
    grid-template-columns: 20rem 1fr;
    gap: clamp(3rem, 1rem + 5vw, 5rem);
    align-items: start;
  }

  .split__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .split--reverse { grid-template-columns: 1fr 20rem; }
  .split--reverse .split__aside { order: 2; }
}

.split__aside h2 { margin-top: var(--space-4); }
.split__aside .lead { margin-top: var(--space-4); font-size: var(--text-md); }

/* ============================ questions ============================ */

.questions { list-style: none; padding: 0; counter-reset: q; }

.questions li {
  counter-increment: q;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.1875rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
  transition: background var(--transition), border-color var(--transition);
}

.questions li + li { margin-top: 2px; }
.questions li:hover { background: var(--surface); border-color: var(--border); }

.questions li::before {
  content: counter(q, decimal-leading-zero);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--accent);
}

/* ============================ cards ============================ */

/* Glass: translucent over the aura, hairline border that brightens on hover. */
.card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.card:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.category-grid { display: grid; gap: var(--space-4); }

@media (min-width: 760px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.card__index { font-family: var(--font-data); font-size: var(--text-xs); color: var(--fg-faint); }
.card__summary { color: var(--fg-muted); font-size: var(--text-base); }

.card__example {
  font-size: var(--text-base);
  color: var(--fg-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.card__example b {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--weight-normal);
  margin-bottom: var(--space-2);
}

.segment-grid { display: grid; gap: var(--space-4); }

@media (min-width: 640px) { .segment-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .segment-grid { grid-template-columns: repeat(4, 1fr); } }

.segment-grid .card { gap: var(--space-2); }
.segment-grid h3 { font-size: var(--text-md); }
.segment-grid p { font-size: var(--text-base); color: var(--fg-muted); }

/* ============================ sensor strip ============================ */

/* The same ground through three sensors. This is the product's argument in one row: what the eye
 * sees, what the vegetation index sees, and what radar sees through cloud. It also answers the
 * complaint that a bare true-colour composite is not much to look at on its own. */

.sensors {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 720px) {
  .sensors { grid-template-columns: repeat(3, 1fr); }
}

.sensor {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sensor img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.sensor figcaption {
  display: grid;
  gap: var(--space-1);
  padding-inline: var(--space-1);
}

.sensor__name {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.sensor__note { font-size: var(--text-sm); color: var(--fg-muted); }

/* Instrument and window, in the data face. A page arguing from provenance has to carry it on
 * every frame, not only the hero. */
.sensor__meta {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
}

/* ============================ ten-year strip ============================ */

/* Ten Augusts of the same ground. The "10 yıllık arşiv" claim stops being a number and becomes
 * something you can look along. */

/* ---- site visit, paired with the seasonal comparison ---- */

.visit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-9));
  align-items: center;
}

.visit__photo { margin: 0; }

.visit__photo picture { display: block; }

.visit__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  /* Held back a little so it reads as the thing being argued with rather than the hero of the
   * page. The measured imagery below it should stay the brighter object. */
  filter: saturate(0.82) brightness(0.92);
}

.visit__photo figcaption { margin-top: var(--space-3); }

.visit { margin-bottom: clamp(var(--space-7), 4vw, var(--space-9)); }

@media (max-width: 860px) {
  .visit { grid-template-columns: 1fr; }
  .visit__photo { order: 2; }
}

/* ---- the ten-year strip ---- */

.years {
  list-style: none;
  margin: clamp(var(--space-7), 4vw, var(--space-9)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 900px) { .years { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .years { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.year {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
}

.year img { width: 100%; height: auto; display: block; }

.year__no {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.25rem 0.5rem;
  background: rgb(8 9 10 / 72%);
  border-top-right-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--fg);
}

.years__note { display: block; margin-top: var(--space-5); max-width: 68ch; }

/* ============================ the proof ============================ */

/* A site visit beside the same ground across a year. Full-bleed at 16:9 meant roughly 800px of one
 * image on a laptop, which pushed everything after it off the page and made the section read as
 * filler. Side by side they make the same argument in a third of the height — and the pairing is
 * the argument. */
.proof {
  display: grid;
  gap: var(--space-5);
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));
}

@media (min-width: 900px) {
  .proof { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}

.proof figure { margin: 0; display: grid; gap: var(--space-3); }

.proof__visit img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  filter: saturate(0.82) brightness(0.92);
}

.proof figcaption { display: grid; gap: var(--space-1); }

.proof__tag {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* ==================== the hero as a measurement viewport ==================== */

/* A satellite image in a rounded box reads as a stock photograph, which is the opposite of the
 * claim underneath it. Every value in this frame comes from the raster's own georeferencing — the
 * sensor, the window, the corner coordinates, the projection, the scale bar's width — so the
 * apparatus describes the picture rather than dressing it. */
.scan__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 72%);
  text-transform: uppercase;
}

.scan__bar {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.55rem clamp(0.6rem, 2vw, 1.1rem);
  line-height: 1.6;
  background: linear-gradient(180deg, rgb(8 9 10 / 68%), transparent);
}

.scan__bar--top { top: 0; }

.scan__bar--bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgb(8 9 10 / 68%), transparent);
}

.scan__coord { margin-left: auto; color: var(--accent); }

/* The width is the real thing: 1 km of a 5.29 km frame. */
.scan__scale { display: grid; gap: 0.3rem; justify-items: center; }

.scan__scale::after {
  content: "";
  width: var(--scale);
  min-width: 2.5rem;
  height: 5px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-top: 0;
}

.scan__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgb(255 255 255 / 55%);
}

.scan__corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.scan__corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.scan__corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.scan__corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

@media (max-width: 640px) {
  .scan__bar span:nth-child(2) { display: none; }
}

/* ============================ scale and flow ============================ */

/* The archive's size, stated immediately before the ten-year strip shows it. Four numbers, each
 * checkable against DATA_SOURCE_MATRIX.md — coverage and revisit are properties of the Sentinel
 * constellation, not claims about our deployment. */
.scale {
  list-style: none;
  margin: clamp(var(--space-6), 3vw, var(--space-7)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-5);
}

.scale li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-strong);
}

.scale b {
  font-family: var(--font-data);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.scale__label { font-size: var(--text-base); color: var(--fg); }
.scale__note { font-size: var(--text-sm); color: var(--fg-muted); }

/* The four steps. The page argued the case at length and never said what you do about it, which
 * is a hole rather than a missing flourish. */
.flow {
  list-style: none;
  margin: clamp(var(--space-6), 3vw, var(--space-7)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
  counter-reset: flow;
}

.flow li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.flow__no {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

.flow h3 { font-size: var(--text-base); }
.flow p { font-size: var(--text-sm); color: var(--fg-muted); }

/* The segment cards were four boxes of text and read as the thinnest thing on the page. Each takes
 * the photograph its own page already uses, so nothing new is introduced and the card previews
 * where it leads. The image is decorative here — the heading and line carry the meaning — so its
 * alt is empty rather than a description repeated from the link text. */
.card--figured { gap: var(--space-4); }

.card__photo {
  margin-top: auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
}

.card__photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.82) brightness(0.88);
  transition: filter 160ms ease;
}

.card--figured:hover .card__photo img { filter: saturate(1) brightness(1); }

/* ---- the closing band ---- */

/* Full width and shallow, so it reads as ground rather than as another figure to study. It fades
 * into the page at the bottom so the form below it does not start on a hard edge. */
.closing { margin: 0; position: relative; }

.closing__media { position: relative; line-height: 0; }

.closing__media img {
  width: 100%;
  height: clamp(220px, 26vw, 420px);
  object-fit: cover;
  display: block;
  filter: saturate(0.88) brightness(0.82);
}

.closing__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 9 10 / 55%) 0%, transparent 30%, rgb(8 9 10 / 92%) 100%);
}

.closing figcaption {
  position: absolute;
  left: 50%;
  bottom: clamp(var(--space-5), 3vw, var(--space-7));
  transform: translateX(-50%);
  display: grid;
  gap: var(--space-2);
}

.closing__line {
  max-width: 54ch;
  font-size: var(--text-lg);
  color: var(--fg);
  margin: 0;
}

/* The caption sits on a photograph rather than on the page ground, so the muted colour it uses
 * everywhere else is not legible here. */
.closing figcaption .caption { color: rgb(255 255 255 / 66%); }

@media (max-width: 720px) {
  .closing__line { font-size: var(--text-base); }
}