/* Fecho (the closing). Two blocks share the centre of the pinned stage:
 *   .fe-book  the bookend phone (0.4): the hero's list, answered by a sweep
 *   .fe-call  the lock (1.25): the Kima mark, "Quero visitas." and the WhatsApp button
 * The particle field is a fixed canvas (.fe-field) that fecho.js puts first in
 * <body>, so every section paints over it. Timings here are kept in step with
 * fecho.js (SWEEP_AT and LOCK_MS there). */

/* ---- the field (JS only, never with reduced motion) ---------------------- */
.fe-field {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; visibility: hidden;
}

/* ---- stage: both blocks in one centred cell ------------------------------ */
.fe-stage {
  position: relative; height: 100%;
  display: grid; place-items: center;
  padding: var(--s5) var(--rail) var(--s6);
}
.fe-book, .fe-call { grid-area: 1 / 1; min-width: 0; }

/* ---- the bookend phone --------------------------------------------------- */
.fe-book { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; }
/* a soft pool of ink behind the phone and its caption keeps the field's lines off the text */
.fe-book::before {
  content: ""; position: absolute; inset: -4% -38% -16%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 8, 6, .94) 68%, rgba(6, 8, 6, 0));
}
.fe-book > * { position: relative; }
/* small and centred: as tall as the stage allows after the caption, never above 620px */
.fe-book .phone-fit {
  width: auto; height: min(calc(100svh - var(--header-h) - 170px), 620px);
  aspect-ratio: 429 / 886;
}
.fe-caption { font: 400 clamp(26px, 2.5vw, 38px)/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.fe-caption .lime { display: inline-block; }
.fe-note { font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

/* hidden until 0.4 (visibility, so it is not read before its beat) */
.js .fe-book {
  opacity: 0; visibility: hidden; transform: translateY(32px) scale(.97);
  transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .45s;
}
.fe-stage.is-book .fe-book {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s var(--ease), transform .9s var(--ease-expo), visibility 0s;
}
/* the lock takes it away */
.fe-stage.is-locked .fe-book {
  opacity: 0; visibility: hidden; transform: translateY(-14px) scale(.96);
  transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .45s;
}

/* the sweep: the answered list (.fe-now) lies over the unread one (.fe-was) and is
 * revealed top to bottom by a feathered mask. Layer = 3 screens tall: opaque to 47.5%,
 * a feather of about half a row, then clear. Position 75% shows none of it, 19% all of it. */
.js .fe-now {
  -webkit-mask: linear-gradient(#000 47.5%, transparent 49.5%) 0 75% / 100% 300% no-repeat;
          mask: linear-gradient(#000 47.5%, transparent 49.5%) 0 75% / 100% 300% no-repeat;
}
.fe-book.is-sweep .fe-now { animation: fe-sweep .75s linear both; }
@keyframes fe-sweep {
  from { -webkit-mask-position: 0 61%; mask-position: 0 61%; }   /* front at the first row */
  to   { -webkit-mask-position: 0 19%; mask-position: 0 19%; }   /* past the last row */
}
.fe-book.is-answered .fe-now { -webkit-mask: none; mask: none; }
.fe-book.is-answered .fe-was { visibility: hidden; }

/* chips pop just after the front passes their row; "Respondida." lands at the end */
.js .fe-chip { opacity: 0; transform: scale(.4); }
.fe-book.is-sweep .fe-chip { animation: fe-pop .55s var(--ease-expo) both; animation-delay: calc(150ms + var(--i) * 75ms); }
.fe-book.is-answered .fe-chip { opacity: 1; transform: none; }
.fe-chip { transform-origin: 100% 50%; }   /* --i (the row's index) comes from the row's style */
@keyframes fe-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.js .fe-caption .lime { opacity: 0; }
.fe-book.is-sweep .fe-caption .lime { animation: fe-word .6s var(--ease-expo) .7s both; }
.fe-book.is-answered .fe-caption .lime { opacity: 1; }
@keyframes fe-word { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- the call ------------------------------------------------------------ */
.fe-call { display: flex; flex-direction: column; align-items: center; gap: var(--s6); text-align: center; }
.fe-mark { width: clamp(120px, 24svh, 232px); height: auto; aspect-ratio: 1; }
.fe-title { font: 400 clamp(52px, 8vw, 120px)/.95 var(--serif); letter-spacing: -.025em; }
.fe-cta .btn { min-height: 64px; padding: 20px 36px; font-size: 14px; gap: 12px; box-shadow: 0 0 0 6px var(--signal-wash); }
.fe-wa { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* hidden until the lock. The crisp mark fades in as the particles arrive
 * (.85s, while fecho.js fades them out); the line and the button rise after. */
.js .fe-mark, .js .fe-title, .js .fe-cta { opacity: 0; visibility: hidden; }
.js .fe-title, .js .fe-cta { transform: translateY(22px); }
.fe-stage.is-locked .fe-mark {
  opacity: 1; visibility: visible;
  transition: opacity .5s var(--ease) .85s, visibility 0s .85s;
}
.fe-stage.is-locked .fe-title, .fe-stage.is-locked .fe-cta {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .7s var(--ease) .65s, transform 1s var(--ease-expo) .65s, visibility 0s .65s;
}
.fe-stage.is-locked .fe-cta { transition-delay: .85s; }

/* ---- small screens ------------------------------------------------------- */
@media (max-width: 600px) {
  .fe-stage { padding: var(--s4) var(--s4) var(--s5); }
  .fe-book .phone-fit { height: min(calc(100svh - var(--header-h) - 170px), 560px); }
  .fe-book { gap: var(--s3); }
  .fe-note { white-space: normal; }
  .fe-call { gap: var(--s5); }
  .fe-cta .btn { padding: 18px 28px; }
}

/* ---- without JS, and with reduced motion: one static sequence ------------- */
html:not(.js) .fe-was { display: none; }
html:not(.js) .fe-stage, .rm .fe-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s9); height: auto; padding-top: var(--s8); }
.rm .fe-stage.is-locked .fe-book { opacity: 1; visibility: visible; transform: none; }   /* the bookend stays, above the call */
html:not(.js) .fe-book .phone-fit, .rm .fe-book .phone-fit { height: min(80svh, 620px); }