/* =====================================================================
   08 · Hidratação espacial — a estação de recarga em tela cheia.
   Filme varrido pela rolagem; texto à esquerda com chão próprio (véu
   localizado); à direita o selo "Ativação vendida" e o medidor de RECARGA.
   Estado padrão do CSS = estado FINAL (movimento reduzido mostra tudo).
   ===================================================================== */
#hidratacao .hid { background: #05010f; }

/* ---------- Fundo ---------- */
#hidratacao .hid__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#hidratacao .hid__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 60%; }
#hidratacao .hid__film { background: transparent; z-index: 1; }

/* cenário de reserva (sem filme e sem quadro-chave): estação em CSS */
#hidratacao .hid__fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(38% 30% at 50% 44%, rgba(0, 216, 248, .22), transparent 70%),
    radial-gradient(70% 60% at 55% 40%, #2a0a6e 0%, #12032e 48%, #05010f 82%);
}
#hidratacao .hid__moon {
  position: absolute; left: 22%; top: 8%; width: 17vw; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95), rgba(214, 208, 240, .9) 30%, rgba(120, 110, 170, .9) 62%, #2a2250 100%);
  box-shadow: 0 0 60px rgba(190, 170, 255, .45);
}
#hidratacao .hid__ring {
  position: absolute; right: 16%; top: 10%; width: 13vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #b48cff, #5b21c8 45%, #200058 80%);
  box-shadow: 0 0 50px rgba(120, 0, 240, .6);
}
#hidratacao .hid__ring::after {
  content: ''; position: absolute; left: -45%; right: -45%; top: 38%; height: 24%; border-radius: 50%;
  border: 3px solid var(--cyan); box-shadow: 0 0 18px var(--cyan), inset 0 0 12px var(--magenta);
  transform: rotate(-14deg);
}
#hidratacao .hid__floor {
  position: absolute; left: -20%; right: -20%; bottom: 0; height: 46%;
  background:
    radial-gradient(22% 30% at 50% 60%, rgba(240, 0, 240, .45), transparent 70%),
    linear-gradient(rgba(0, 216, 248, .22) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(120, 0, 240, .25) 1px, transparent 1px) 0 0 / 64px 64px;
  transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent);
}

/* gotas de energia subindo (paralaxe da rolagem) */
#hidratacao .hid__drops { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#hidratacao .hid__drops i {
  position: absolute; top: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95), rgba(0, 216, 248, .55) 38%, rgba(0, 216, 248, 0) 72%);
  box-shadow: 0 0 14px rgba(0, 216, 248, .45);
}

/* véu: chão do texto à esquerda, do medidor embaixo à direita e do HUD */
#hidratacao .hid__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .66) 26%, rgba(0, 0, 0, .22) 46%, transparent 58%),
    radial-gradient(42% 46% at 100% 100%, rgba(0, 0, 0, .62), transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, transparent 16%),
    linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, transparent 18%);
}
/* cantos de visor de capacete */
#hidratacao .hid__visor { position: absolute; inset: calc(var(--hud-h) + 12px) 16px 16px; z-index: 2; pointer-events: none; }
#hidratacao .hid__visor i { position: absolute; width: 30px; height: 30px; border: 0 solid rgba(0, 216, 248, .7); filter: drop-shadow(0 0 6px rgba(0, 216, 248, .7)); }
#hidratacao .hid__visor i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
#hidratacao .hid__visor i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
#hidratacao .hid__visor i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-color: rgba(240, 0, 240, .7); filter: drop-shadow(0 0 6px rgba(240, 0, 240, .7)); }
#hidratacao .hid__visor i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-color: rgba(240, 0, 240, .7); filter: drop-shadow(0 0 6px rgba(240, 0, 240, .7)); }

/* ---------- Texto ---------- */
#hidratacao .hid__inner { position: relative; z-index: 3; }
#hidratacao .hid__copy {
  position: absolute; left: var(--gutter); top: var(--hud-h); bottom: 20px; width: min(570px, 45%);
  display: flex; flex-direction: column; justify-content: center;
}
#hidratacao .hid__kicker { margin-bottom: 12px; }
#hidratacao .hid__title { font-size: clamp(50px, 6.3vw, 106px); }
#hidratacao .hid__paras { --s1: 1; --s2: 1; display: grid; gap: clamp(10px, 1.6vh, 16px); margin-top: clamp(14px, 2.2vh, 24px); }
#hidratacao .hid__p { max-width: 46ch; font-size: clamp(16px, .5vw + 10px, 19px); line-height: 1.52; color: #ddd8f0; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
#hidratacao .hid__p2 { opacity: var(--s1); transform: translateY(calc((1 - var(--s1)) * 22px)); }
#hidratacao .hid__msg {
  justify-self: start; margin-top: 4px; padding: 14px 22px 15px;
  opacity: var(--s2); transform: translateY(calc((1 - var(--s2)) * 18px));
}
#hidratacao .hid__msg-t {
  font-family: var(--f-mono); font-weight: 700; font-size: clamp(13px, .45vw + 8px, 16px); letter-spacing: .1em; line-height: 1.7; text-transform: uppercase;
}
#hidratacao .hid__msg-a { display: block; color: #fff; }
#hidratacao .hid__msg-b { display: block; color: var(--magenta); filter: drop-shadow(0 0 8px rgba(240, 0, 240, .55)); }
#hidratacao .hid__msg .sc { position: relative; }
#hidratacao .hid__msg .sc.is-caret::after, #hidratacao .hid__msg .sc.is-caret0::after {
  content: ''; position: absolute; left: 100%; top: .18em; width: .62em; height: 1.1em; margin-left: .12em;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  animation: hid-caret 1s steps(2, jump-none) infinite; animation-play-state: paused;
}
/* antes da primeira letra o cursor já pisca no começo da placa (terminal pronto, nunca placa vazia):
   mora na 1ª letra, ainda invisível, e se declara visível */
#hidratacao .hid__msg .sc.is-caret0::after { left: 0; margin-left: 0; visibility: visible; }
#hidratacao.is-on .hid__msg .sc.is-caret::after, #hidratacao.is-on .hid__msg .sc.is-caret0::after { animation-play-state: running; }
@keyframes hid-caret { 50% { opacity: 0; } }

/* ---------- Selo + medidor ---------- */
#hidratacao .hid__side {
  position: absolute; right: var(--gutter); bottom: clamp(30px, 6vh, 64px); width: min(430px, 33vw);
  display: grid; justify-items: end; gap: clamp(16px, 3vh, 28px);
}
/* o carimbo desce ancorado na base: cresce para cima, sobre o filme, e nunca invade o medidor */
#hidratacao .hid__sold-wrap { --ring: 1; position: relative; transform-origin: 50% 100%; }
/* onda de choque do carimbo */
#hidratacao .hid__sold-wrap::after {
  content: ''; position: absolute; inset: -6px; pointer-events: none; border: 2px solid var(--magenta); border-radius: 10px;
  box-shadow: 0 0 18px var(--magenta), inset 0 0 12px rgba(240, 0, 240, .5);
  transform: rotate(-4deg) scale(calc(.9 + var(--ring) * .7)); opacity: calc((1 - var(--ring)) * .9);
}
#hidratacao .hid__sold { padding: 12px 20px 14px; }
#hidratacao .hid__sold img { max-height: 44px; }

#hidratacao .hid__meter {
  --flash: 0;
  position: relative; width: 100%; padding: 14px 18px 18px;
  background: rgba(6, 3, 18, .58);
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(0, 216, 248, .32), 0 18px 40px rgba(0, 0, 0, .45);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
#hidratacao .hid__meter::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--flash);
  background: radial-gradient(90% 120% at 50% 100%, rgba(0, 216, 248, .55), rgba(240, 0, 240, .2) 50%, transparent 80%);
  mix-blend-mode: screen;
}
#hidratacao .hid__meter-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#hidratacao .hid__meter-k {
  display: inline-grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding-bottom: 8px;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
}
#hidratacao .hid__meter-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: hid-caret 1.2s steps(2, jump-none) infinite; animation-play-state: paused; }
#hidratacao.is-on .hid__meter-dot { animation-play-state: running; }
#hidratacao .hid__meter-l { grid-column: 2; grid-row: 1; transition: opacity .35s, transform .35s var(--ease-out); }
#hidratacao .hid__meter-l--a { opacity: 0; transform: translateY(-6px); }
#hidratacao .hid__meter-l--b { color: var(--magenta); }
#hidratacao .hid__meter:not(.is-full) .hid__meter-l--a { opacity: 1; transform: none; }
#hidratacao .hid__meter:not(.is-full) .hid__meter-l--b { opacity: 0; transform: translateY(6px); }
#hidratacao .hid__pct {
  display: inline-flex; align-items: flex-end; font-family: var(--f-mega); font-size: clamp(44px, 3.8vw, 62px); line-height: 1.04;
  color: var(--cyan); transform: skewX(-8deg); padding-top: .06em;
  /* brilho por filter: text-shadow seria cortado pelo overflow de cada coluna de dígito */
  filter: drop-shadow(0 0 10px rgba(0, 216, 248, .55));
  font-variant-numeric: tabular-nums;
}
#hidratacao .hid__pct-s { font-size: .56em; margin-left: .06em; padding-bottom: .12em; }
#hidratacao .hid__odo { display: inline-flex; }
#hidratacao .hid__d { display: inline-block; height: 1.04em; overflow: hidden; }
#hidratacao .hid__ds { display: flex; flex-direction: column; }
#hidratacao .hid__ds span { display: block; height: 1.04em; line-height: 1.04; text-align: center; }
#hidratacao .hid__meter.is-full .hid__pct { color: #e9fbff; filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 20px rgba(240, 0, 240, .7)); }

#hidratacao .hid__cells { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; height: 28px; padding-inline: 4px; }
#hidratacao .hid__cells i {
  display: block; transform: skewX(-14deg);
  background: rgba(0, 216, 248, .07); box-shadow: inset 0 0 0 1px rgba(0, 216, 248, .22);
  transition: background .18s, box-shadow .18s;
}
#hidratacao .hid__cells i.is-lit {
  background: linear-gradient(180deg, #9ff4ff, var(--cyan) 55%, #0089a3);
  box-shadow: 0 0 10px rgba(0, 216, 248, .8), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
#hidratacao .hid__cells i.is-head { background: #fff; box-shadow: 0 0 14px #fff, 0 0 26px var(--cyan); }
#hidratacao .hid__meter.is-full .hid__cells i { background: linear-gradient(180deg, #ffe0ff, var(--magenta) 30%, var(--violet) 65%, var(--cyan)); box-shadow: 0 0 12px rgba(240, 0, 240, .7); }

#hidratacao .hid__note {
  position: absolute; z-index: 3; bottom: 16px;
  left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  color: rgba(233, 228, 247, .72); text-shadow: 0 1px 6px #000;
}

/* ---------- Celular: um parágrafo por vez, medidor embaixo ---------- */
@media (max-width: 820px) {
  #hidratacao .hid__veil {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .55) 44%, rgba(0, 0, 0, .1) 60%, transparent 66%),
      linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .35) 30%, transparent 42%);
  }
  #hidratacao .hid__visor { inset: calc(var(--hud-h) + 8px) 8px 8px; }
  #hidratacao .hid__visor i { width: 20px; height: 20px; }
  #hidratacao .hid__copy { top: calc(var(--hud-h) + 14px); bottom: auto; right: var(--gutter); width: auto; justify-content: flex-start; }
  #hidratacao .hid__title { font-size: clamp(44px, 13.4vw, 66px); }
  #hidratacao .hid__paras {
    margin-top: 14px; padding: 14px 16px 16px;
    background: rgba(6, 3, 18, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(160, 150, 220, .16);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }
  #hidratacao .hid__paras > * { grid-area: 1 / 1; }
  #hidratacao .hid__p { font-size: 16px; max-width: none; text-shadow: none; }
  /* troca em sequência, nunca cruzada: o que sai some por inteiro (1ª metade de --s) antes de o
     próximo aparecer (2ª metade) — em nenhum quadro há texto sobre texto */
  #hidratacao .hid__p1 { opacity: clamp(0, 1 - var(--s1) * 2, 1); transform: translateY(calc(min(var(--s1) * 2, 1) * -16px)); }
  #hidratacao .hid__p2 {
    align-self: center;
    opacity: min(clamp(0, var(--s1) * 2 - 1, 1), clamp(0, 1 - var(--s2) * 2, 1));
    transform: translateY(calc(clamp(0, 2 - var(--s1) * 2, 1) * 18px - min(var(--s2) * 2, 1) * 16px));
  }
  #hidratacao .hid__msg {
    align-self: center; margin: 0; padding: 0; clip-path: none; background: none;
    opacity: clamp(0, var(--s2) * 2 - 1, 1); transform: translateY(calc(clamp(0, 2 - var(--s2) * 2, 1) * 18px));
  }
  #hidratacao .hid__msg::before, #hidratacao .hid__msg::after { display: none; }
  #hidratacao .hid__msg-t { font-size: clamp(14px, 4.1vw, 17px); }
  /* no celular ocupa a largura; no tablet em pé não estica o medidor de ponta a ponta */
  #hidratacao .hid__side { left: auto; right: var(--gutter); width: min(calc(100% - 2 * var(--gutter)), 460px); bottom: 38px; gap: 14px; }
  #hidratacao .hid__sold { padding: 9px 14px 11px; }
  #hidratacao .hid__sold .sold__k { font-size: 13px; }
  #hidratacao .hid__sold img { max-height: 34px; }
  #hidratacao .hid__meter { padding: 10px 14px 14px; }
  #hidratacao .hid__pct { font-size: 40px; }
  #hidratacao .hid__cells { height: 22px; gap: 3px; }
  #hidratacao .hid__note { bottom: 12px; left: var(--gutter); }
  #hidratacao .hid__moon { width: 34vw; left: 8%; top: 12%; }
  #hidratacao .hid__ring { width: 26vw; right: 6%; top: 14%; }
}

/* ---------- Movimento reduzido: o quadro final, parado ----------
   No desktop o layout da cena já cabe numa tela (é o da parada 1). No celular os parágrafos se
   revezam numa célula só: sem a rolagem que os troca, tudo empilha. */
.reduced #hidratacao .hid__drops { display: none; }
@media (max-width: 820px) {
  .reduced #hidratacao .hid { height: auto; min-height: 100svh; overflow: visible; padding: calc(var(--hud-h) + 12px) 0 30px; }
  .reduced #hidratacao .hid__inner { height: auto; display: grid; gap: 14px; }
  .reduced #hidratacao .hid__copy, .reduced #hidratacao .hid__side { position: relative; inset: auto; }
  .reduced #hidratacao .hid__side { justify-items: start; gap: 10px; width: min(460px, 100%); }
  .reduced #hidratacao .hid__sold { padding: 8px 12px 9px; }
  .reduced #hidratacao .hid__sold img { max-height: 30px; }
  .reduced #hidratacao .hid__paras > * { grid-area: auto; opacity: 1; transform: none; }
  .reduced #hidratacao .hid__veil { background: rgba(0, 0, 0, .6); }
}