/* encuentro — the reaction section as an encounter.
   Base (no JS, reduced motion, failed init): styles.css stacks the three lines on ink
   and keeps the canvas hidden. Everything pinned is gated by html.fx-encuentro, which
   the script adds only after a successful init and never under reduced motion. */

/* ---------- Pin ---------- */
html.fx-encuentro .reaction {
  height: 280vh;
  height: 280svh;
}

html.fx-encuentro .reaction-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) clamp(40px, 7vh, 88px);
  padding-bottom: clamp(40px, 7svh, 88px);
}

/* The field sits behind the copy and never takes the pointer. */
html.fx-encuentro .reaction-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Three lines in one cell. Only opacity and y change, so all three stay in the
   accessibility tree and are read once, in order. */
html.fx-encuentro .reaction-copy {
  display: grid;
  align-items: end;
  width: 100%;
}

html.fx-encuentro .reaction .state {
  grid-area: 1 / 1;
  font-size: min(clamp(34px, 5.4vw, 80px), 10vh);
  font-size: min(clamp(34px, 5.4vw, 80px), 10svh);
  will-change: opacity, transform;
}

html.fx-encuentro .reaction .state + .state { opacity: 0; }

@media (max-width: 719px) {
  html.fx-encuentro .reaction {
    height: 240vh;
    height: 240svh;
  }

  /* Copy anchored to the bottom of the small viewport: never under the toolbar. */
  html.fx-encuentro .reaction-pin {
    padding: 0 16px 40px;
    padding-bottom: clamp(32px, 5svh, 48px);
  }

  html.fx-encuentro .reaction .state {
    font-size: clamp(34px, 9.5vw, 40px);
    letter-spacing: -0.03em;
  }
}

/* ---------- Reduced motion: one still frame, its own block above the copy ---------- */
.reaction-canvas.is-still {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 56vh;
  max-height: 56svh;
  margin-bottom: var(--s-5);
  pointer-events: none;
}

/* ---------- Releases (even if the class leaked) ---------- */
@media (prefers-reduced-motion: reduce) {
  html .reaction,
  html.fx-encuentro .reaction { height: auto; }

  html.fx-encuentro .reaction-pin {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    display: block;
    padding: clamp(96px, 12vw, 160px) var(--gutter);
  }

  html.fx-encuentro .reaction-canvas:not(.is-still) { display: none; }

  html.fx-encuentro .reaction-copy { display: flex; }

  html.fx-encuentro .reaction .state {
    grid-area: auto;
    font-size: clamp(34px, 5.4vw, 80px);
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}

@media print {
  html.fx-encuentro .reaction { height: auto; }

  html.fx-encuentro .reaction-pin {
    position: relative;
    height: auto;
    overflow: visible;
    display: block;
  }

  html.fx-encuentro .reaction-canvas { display: none; }

  html.fx-encuentro .reaction-copy { display: flex; }

  html.fx-encuentro .reaction .state {
    grid-area: auto;
    opacity: 1 !important;
    transform: none !important;
  }
}