/* =====================================================================
   Hagá · LP — seção "Recursos" (bento com 2 cards de cena)
   Adaptada das pranchas do Claude Design (handoff v3, 14/10/2026).

   Escopo: tudo sob .lpr, com prefixo "lpr-" (as classes das pranchas colidem com
   CSS antigo de landing.css). As pranchas usam container queries; aqui viram
   media queries, no padrão de lp-como-funciona.css:
     celular < 900px · intermediário 900–1199px · desktop ≥ 1200px (regra base).

   ≥ 1200   linha 1: Planos · Leitura e áudio (2×) · Reflexões
            linha 2: Ofensiva · Panorama · Grupos (2×)   → cenas em diagonal
   900–1199 Leitura e áudio (largura toda) · 2×2 · Grupos (largura toda)
   < 900    uma coluna: áudio, planos, reflexões, ofensiva, panorama, grupos

   Tema CLARO (a página é forçada ao claro). Os cards de cena são escuros por
   desenho: vídeo + véu navy + texto claro.
   Carregar depois de lp-hero.css (reusa as variáveis do botão só se houver CTA).
   ===================================================================== */

/* ---------- 1. Tokens da seção ---------- */
.lpr{
  /* Tokens das pranchas que o design-system/ real não tem — valores do V4
     (design-system-v4/canonical/tokens/colors.css), tema claro. */
  --lpr-surface-3: #F2F0FB;          /* V4 --surface-3 é #EFEDFA; um grau mais claro: --fg-2 sobre ele dá só 4,63:1 (4,4:1 medido no pixel) */
  --lpr-primary-soft: rgba(123,127,232,.12);
  --lpr-divider: #F2F0FA;
  --lpr-ember-soft: rgba(255,112,67,.12);
  --lpr-on-dark: #F5F6FC;            /* --fg do tema escuro: texto nos cards de cena */

  --lpr-h2-size: 44px;  --lpr-h2-lh: 1.08;
  --lpr-tracking: -0.02em;
  /* Destaque do título: periwinkle-600 → um tom entre 600 e 500. O 500 puro dá 3,0:1 sobre o lavanda (mínimo para texto grande: 3:1). */
  --lpr-title-grad: linear-gradient(90deg, var(--periwinkle-600) 0%, #6569DB 100%);

  --lpr-pad-y: 120px;
  --lpr-gutter: 48px;
  --lpr-max: 1280px;
  --lpr-fade-h: 96px;
  --lpr-gap: 24px;
  --lpr-card-pad: 28px;
  --lpr-card-radius: 28px;
  --lpr-card-shadow: 0 2px 6px rgba(58,52,120,.05), 0 14px 34px rgba(98,102,214,.10);
  --lpr-icon: 48px;
  --lpr-step: 60ms;
  --lpr-glow: radial-gradient(closest-side, rgba(123,127,232,.14) 0%, rgba(123,127,232,.05) 55%, rgba(123,127,232,0) 100%);

  position: relative;
  isolation: isolate;
  background: var(--lpr-surface-3);
  color: var(--fg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  padding: var(--lpr-pad-y) 0;
  /* Corte horizontal NA SEÇÃO (as manchas saem pela borda da janela sem gerar
     rolagem lateral). `clip`, e não `hidden`, para não virar contêiner de rolagem. */
  overflow-x: clip;
}
/* Degradê de entrada: vem do --bg do fim de "Como funciona" até o lavanda da seção. */
.lpr::before{content:""; position:absolute; left:0; right:0; top:0; height:var(--lpr-fade-h); background:var(--grad-veil); transform:scaleY(-1); z-index:0; pointer-events:none}
.lpr__glow{position:absolute; z-index:0; pointer-events:none; border-radius:50%; background:var(--lpr-glow)}
.lpr__glow--a{width:820px; height:820px; left:-260px; top:120px}
.lpr__glow--b{width:760px; height:760px; right:-240px; bottom:-260px}
.lpr__in{position:relative; z-index:1; max-width:var(--lpr-max); margin:0 auto; padding:0 var(--lpr-gutter)}

/* ---------- 2. Título e introdução (mesmo estilo de "Como funciona") ---------- */
.lpr__head{max-width:760px; margin:0 auto; text-align:center}
.lpr-h2{margin:0; font-family:var(--font-display); font-weight:700; font-size:var(--lpr-h2-size); line-height:var(--lpr-h2-lh); letter-spacing:var(--lpr-tracking); color:var(--fg); text-wrap:balance}
.lpr-h2__accent{background:var(--lpr-title-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lpr-lead{margin:20px auto 0; max-width:560px; font-size:18px; line-height:1.6; color:var(--fg-2)}

/* ---------- 3. Grade ---------- */
.lpr__grid{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--lpr-gap)}
.lpr-card--audio{grid-column:4 / span 6; grid-row:1}
.lpr-card--planos{grid-column:1 / span 3; grid-row:1}
.lpr-card--reflexoes{grid-column:10 / span 3; grid-row:1}
.lpr-card--ofensiva{grid-column:1 / span 3; grid-row:2}
.lpr-card--panorama{grid-column:4 / span 3; grid-row:2}
.lpr-card--grupos{grid-column:7 / span 6; grid-row:2}

/* ---------- 4. Card claro ---------- */
.lpr-card{position:relative; display:flex; flex-direction:column; min-width:0; padding:var(--lpr-card-pad); background:var(--surface); border:1px solid var(--border); border-radius:var(--lpr-card-radius); box-shadow:var(--lpr-card-shadow); cursor:default}
.lpr-card__head{display:flex; flex-direction:column; gap:16px}
.lpr-card__icon{width:var(--lpr-icon); height:var(--lpr-icon); flex:none; border-radius:14px; background:var(--lpr-primary-soft); color:var(--primary-text); display:flex; align-items:center; justify-content:center}
.lpr-card__icon svg{width:24px; height:24px; stroke-width:1.75}
.lpr-card__icon--ember{background:var(--lpr-ember-soft); color:var(--ember-600)}
.lpr-card__t{margin:0; font-family:var(--font-display); font-size:22px; line-height:1.25; font-weight:700; letter-spacing:-.01em; color:var(--fg)}
.lpr-card__d{margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--fg-2)}
.lpr-ui{margin-top:auto; padding-top:24px}

.lpr-panel{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 1px 2px rgba(58,52,120,.04), 0 8px 22px rgba(98,102,214,.08); padding:16px}
.lpr-mini-label{display:block; font-size:12px; line-height:1.3; font-weight:600; color:var(--primary-text)}
.lpr-mini-t{display:block; font-size:15px; line-height:1.3; font-weight:700; color:var(--fg)}
.lpr-mini-d{display:block; font-size:12.5px; line-height:1.4; color:var(--fg-2)}
.lpr-cover{flex:none; display:block; border-radius:12px; object-fit:cover; background:var(--periwinkle-300); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lpr-bar{display:block; height:8px; border-radius:999px; background:var(--mark-subtle); overflow:hidden}
.lpr-bar > i{display:block; height:100%; border-radius:inherit; background:var(--grad-xp)}

/* 1 · Planos guiados */
.lpr-plan{display:flex; gap:14px; align-items:center}
.lpr-plan .lpr-cover{width:64px; height:80px}
.lpr-plan__txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.lpr-segs{display:grid; grid-template-columns:repeat(14, minmax(0,1fr)); gap:3px; margin-top:16px}
.lpr-segs i{height:6px; border-radius:3px; background:var(--mark-subtle)}
.lpr-segs i.on{background:var(--primary-text)}

/* 3 · Reflexões com fonte */
.lpr-quote__mark{display:block; font-family:var(--font-display); font-size:44px; line-height:.7; height:22px; color:var(--primary-text)}
.lpr-quote__txt{margin:10px 0 0; font-family:var(--font-read); font-style:italic; font-size:15px; line-height:1.55; color:var(--fg)}
.lpr-quote__by{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--lpr-divider)}
.lpr-mono{width:36px; height:36px; flex:none; border-radius:50%; background:var(--lpr-primary-soft); color:var(--primary-text); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; letter-spacing:.02em}
.lpr-quote__who{display:flex; flex-direction:column; gap:1px; min-width:0}
.lpr-quote__who b{font-size:13px; font-weight:700; color:var(--fg)}
.lpr-quote__who em{font-size:12px; color:var(--fg-2)}

/* 4 · Ofensiva e conquistas (cabe no card estreito: a semana desce para a linha de baixo) */
.lpr-streak{display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; row-gap:12px}
.lpr-streak__flame{width:44px; height:44px; flex:none; border-radius:50%; background:var(--lpr-ember-soft); color:var(--ember-600); display:flex; align-items:center; justify-content:center}
.lpr-streak__flame svg{width:24px; height:24px; stroke-width:1.75; fill:rgba(255,112,67,.25); transform-origin:50% 90%}
.lpr-streak__n{display:flex; flex-direction:column; line-height:1}
.lpr-streak__n b{font-family:var(--font-display); font-size:32px; font-weight:700; color:var(--fg)}
.lpr-streak__n span{margin-top:4px; font-size:12px; color:var(--fg-2)}
.lpr-week{display:flex; gap:5px; margin-left:auto}
.lpr-week i{width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--mark-subtle)}
.lpr-week i.on{background:var(--grad-ember); box-shadow:none}
.lpr-medal{display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--lpr-divider)}
.lpr-medal__badge{width:40px; height:40px; flex:none; border-radius:12px; transform:rotate(45deg); background:linear-gradient(135deg, var(--periwinkle-500), var(--periwinkle-700)); box-shadow:0 0 0 3px var(--lpr-primary-soft), 0 6px 14px rgba(98,102,214,.30); display:flex; align-items:center; justify-content:center; margin:0 4px}
.lpr-medal__badge svg{width:19px; height:19px; color:#FFFFFF; stroke-width:2; transform:rotate(-45deg)}
.lpr-medal__txt{display:flex; flex-direction:column; gap:2px; min-width:0}

/* 5 · Panorama da Bíblia */
.lpr-pano__n{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; margin-top:4px}
.lpr-pano__n b{font-size:22px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums}
.lpr-pano__n span{font-size:14px; color:var(--fg-2)}
.lpr-pano__bar{display:flex; align-items:center; gap:10px; margin-top:12px}
.lpr-pano__bar .lpr-bar{flex:1}
.lpr-pano__bar em{font-style:normal; font-size:13px; font-weight:700; color:var(--primary-text); font-variant-numeric:tabular-nums}
.lpr-dots{position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:16px}
.lpr-dots::before{content:""; position:absolute; left:4px; right:4px; top:50%; height:2px; background:var(--mark-subtle); transform:translateY(-50%)}
.lpr-dots i{position:relative; width:8px; height:8px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 2px var(--periwinkle-200)}
.lpr-dots i.on{background:var(--primary-text); box-shadow:none}
.lpr-dots__cap{display:flex; justify-content:space-between; margin-top:6px; font-size:11.5px; color:var(--fg-2)}

/* ---------- 5. Cards de cena (Leitura e áudio · Grupos de leitura) ----------
   Vídeo de fundo + véu navy (--ink-950 #06080F) + texto claro + cartão de vidro.
   Cada cena tem o próprio véu e o próprio enquadramento (--lpr-pos). */
.lpr-scene{padding:0; overflow:hidden; border:0; background:var(--ink-950); color:#FFFFFF; min-height:440px; box-shadow:0 2px 6px rgba(6,8,15,.12), 0 22px 48px rgba(58,52,120,.22)}
.lpr-card--audio{--lpr-pos:80% 50%; --lpr-veil: linear-gradient(180deg, rgba(6,8,15,.5) 0%, rgba(6,8,15,0) 42%), linear-gradient(0deg, rgba(6,8,15,.55) 0%, rgba(6,8,15,0) 45%), linear-gradient(90deg, rgba(6,8,15,.9) 0%, rgba(6,8,15,.78) 38%, rgba(6,8,15,0) 60%)}
/* Grupos: o céu à esquerda é claro → véu lateral forte + véu de topo e de base, sem tocar nos pássaros.
   O enquadramento empurra a cena para a direita: num card de ~1,26:1 a cena 16:9 perde ~35% da
   largura, e o 62% das pranchas cortava o pássaro verde. */
.lpr-card--grupos .lpr-scene__veil{-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0) 80%); mask-image:linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0) 80%)}
.lpr-card--grupos{--lpr-pos:100% 50%; --lpr-veil: linear-gradient(180deg, rgba(6,8,15,.62) 0%, rgba(6,8,15,0) 36%), linear-gradient(0deg, rgba(6,8,15,.5) 0%, rgba(6,8,15,0) 30%), linear-gradient(90deg, rgba(6,8,15,.92) 0%, rgba(6,8,15,.85) 28%, rgba(6,8,15,.4) 42%, rgba(6,8,15,0) 52%)}
.lpr-scene__media{position:absolute; inset:0; z-index:0}
.lpr-scene__media picture{display:block; position:absolute; inset:0}
.lpr-scene__media img, .lpr-scene__media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--lpr-pos)}
/* O vídeo é criado por JS e só aparece quando começa a tocar (.is-playing): sem piscar sobre o poster. */
.lpr-scene__media video{opacity:0; transition:opacity 200ms var(--ease-out)}
.lpr-scene__media video.is-playing{opacity:1}
.lpr-scene__veil{position:absolute; inset:0; z-index:1; background:var(--lpr-veil); pointer-events:none}
.lpr-scene__body{position:relative; z-index:2; display:flex; flex-direction:column; flex:1; padding:var(--lpr-card-pad); max-width:300px}
.lpr-card--grupos .lpr-scene__body{max-width:none; padding-top:22px; padding-bottom:14px; padding-left:16px}
.lpr-card--grupos .lpr-card__head{padding-left:12px}
/* O título fica numa linha só (economiza altura); a DESCRIÇÃO é que se limita a ~40% do card —
   o card tem metade da grade: (min(100vw,1280px) − 96px) / 2 − 12px de largura, menos 28px de
   recuo à esquerda. Abaixo disso, ela desce sobre a cabeça do pássaro azul. */
.lpr-card--grupos .lpr-card__t{white-space:nowrap}
.lpr-scene.lpr-card--grupos .lpr-card__d{line-height:1.5; max-width:calc((min(100vw, 1280px) - 96px) * .2 - 33px)}
.lpr-scene .lpr-card__icon{background:rgba(192,196,255,.16); color:var(--periwinkle-200); box-shadow:inset 0 0 0 1px rgba(192,196,255,.22)}
.lpr-scene .lpr-card__t{color:#FFFFFF}
.lpr-scene .lpr-card__d{color:var(--lpr-on-dark); max-width:250px}

/* ≥ 1200: a cena 16:9 cobre o card pela ALTURA. Com o card a 500px a cabeça do pássaro azul desce o
   bastante para a descrição (4 linhas) terminar antes dela, e os 4 rostos continuam dentro do card. */
@media (min-width: 1200px){
  .lpr-card--grupos{min-height:500px}
  .lpr-card--grupos .lpr-card__head{gap:12px}
}

/* Vidro escuro dos cards de cena */
.lpr-glass{max-width:100%; border-radius:18px; background:rgba(21,26,49,.62); border:1px solid rgba(192,196,255,.20); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 10px 30px rgba(4,6,14,.35)}
.lpr-glass__label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--periwinkle-200)}

/* 2 · Leitura e áudio — "Ouvindo agora" */
.lpr-now{width:280px; padding:14px 16px}
.lpr-now__row{display:flex; align-items:center; gap:12px; margin-top:10px}
.lpr-now .lpr-cover{width:44px; height:44px; border-radius:10px}
.lpr-now__t{font-size:15px; font-weight:700; color:#FFFFFF}
.lpr-now__t span{font-weight:500; color:var(--periwinkle-200)}
.lpr-wave{display:flex; align-items:center; gap:3px; height:28px; margin-top:12px}
.lpr-wave i{flex:1; height:100%; border-radius:2px; background:var(--periwinkle-200); transform-origin:50% 50%; transform:scaleY(.45)}
.lpr-wave i:nth-child(3n){opacity:.7}
/* Parado (sem movimento): alturas variadas, para a onda continuar parecendo uma onda. */
.lpr-wave i:nth-child(4n+1){transform:scaleY(.4)}
.lpr-wave i:nth-child(4n+2){transform:scaleY(.8)}
.lpr-wave i:nth-child(4n+3){transform:scaleY(.55)}
.lpr-wave i:nth-child(4n){transform:scaleY(.95)}
.lpr-now__bar{height:3px; margin-top:12px; border-radius:2px; background:rgba(192,196,255,.22); overflow:hidden}
.lpr-now__bar i{display:block; width:34%; height:100%; background:var(--periwinkle-200)}

/* 6 · Grupos de leitura — "Plano do grupo" (canto inferior esquerdo, fora dos pássaros) */
.lpr-gplan{width:216px; max-width:none; padding:12px 12px 11px}
.lpr-people{display:flex; align-items:center}
/* Círculo de 30px e sobreposição de 3px (+2px do anel): a próxima bolinha só cobre a margem
   além das iniciais, que ocupam ~16px do centro. */
.lpr-av{width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; letter-spacing:0; box-shadow:0 0 0 2px rgba(21,26,49,.9)}
.lpr-av + .lpr-av{margin-left:-3px}
.lpr-av--1{background:var(--periwinkle-200); color:var(--periwinkle-800)}
.lpr-av--2{background:var(--success-bg); color:#1E6B4A}
.lpr-av--3{background:var(--warning-bg); color:var(--warning-fg)}
.lpr-av--more{background:var(--ink-700); color:var(--periwinkle-200)}
.lpr-gplan__row{display:flex; align-items:center; gap:9px; margin-top:8px}
.lpr-gplan .lpr-cover{width:28px; height:28px; border-radius:8px}
.lpr-gplan__txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.lpr-gplan__t{font-size:13px; line-height:1.25; font-weight:700; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lpr-gplan__d{font-size:11.5px; line-height:1.3; color:var(--periwinkle-200)}
.lpr-gplan__bar{height:4px; margin-top:8px; border-radius:2px; background:rgba(192,196,255,.22); overflow:hidden}
.lpr-gplan__bar i{display:block; width:50%; height:100%; background:var(--periwinkle-200)}

/* Hover só com mouse: a sombra aprofunda um pouco. Nada é clicável. */
@media (hover: hover) and (pointer: fine){
  .lpr-card{transition:box-shadow 200ms var(--ease-out)}
  .lpr-card:hover{box-shadow:0 2px 8px rgba(58,52,120,.07), 0 18px 40px rgba(98,102,214,.16)}
  .lpr-scene:hover{box-shadow:0 2px 6px rgba(6,8,15,.14), 0 26px 54px rgba(58,52,120,.28)}
}

/* ---------- 6. Intermediário (900–1199) ---------- */
@media (min-width: 900px) and (max-width: 1199.98px){
  .lpr{--lpr-card-pad:24px; --lpr-gap:20px}
  .lpr__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lpr-card--audio, .lpr-card--planos, .lpr-card--reflexoes, .lpr-card--ofensiva, .lpr-card--panorama, .lpr-card--grupos{grid-column:auto; grid-row:auto}
  .lpr-card--audio, .lpr-card--grupos{grid-column:1 / -1; min-height:400px}
  .lpr-card--audio{--lpr-pos:70% 42%}
  .lpr-card--grupos{--lpr-pos:60% 50%; --lpr-veil: linear-gradient(180deg, rgba(6,8,15,.62) 0%, rgba(6,8,15,0) 36%), linear-gradient(90deg, rgba(6,8,15,.92) 0%, rgba(6,8,15,.88) 36%, rgba(6,8,15,.5) 46%, rgba(6,8,15,0) 60%)}
  .lpr-scene__body{max-width:340px}
  .lpr-card--grupos .lpr-scene__body{padding-bottom:20px; padding-left:24px}
  .lpr-card--grupos .lpr-card__head{padding-left:0}
  .lpr-scene.lpr-card--grupos .lpr-card__d{max-width:340px}
  .lpr-gplan{width:236px}
}

/* ---------- 7. Celular (< 900) ---------- */
@media (max-width: 899.98px){
  .lpr{--lpr-pad-y:72px; --lpr-gutter:16px; --lpr-fade-h:64px; --lpr-card-pad:20px; --lpr-card-radius:24px; --lpr-gap:14px; --lpr-icon:44px; --lpr-h2-size:32px; --lpr-h2-lh:1.1}
  .lpr-lead{font-size:16px; margin-top:14px}
  .lpr__grid{grid-template-columns:minmax(0,1fr); margin-top:32px}
  .lpr-card--audio, .lpr-card--planos, .lpr-card--reflexoes, .lpr-card--ofensiva, .lpr-card--panorama, .lpr-card--grupos{grid-column:auto; grid-row:auto}
  .lpr-card__t{font-size:20px}
  .lpr-ui{padding-top:20px}
  /* cards de cena: cena em cima (áudio 1:1, grupos 4:3), corpo navy embaixo */
  .lpr-scene{min-height:0; background:var(--ink-900)}
  .lpr-scene__media{position:relative; inset:auto; aspect-ratio:1 / 1; overflow:hidden}
  .lpr-card--grupos .lpr-scene__media{aspect-ratio:4 / 3}
  .lpr-card--audio, .lpr-card--grupos{--lpr-pos:50% 50%}
  .lpr-scene__media::after{content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(180deg, rgba(11,15,30,0) 0%, var(--ink-900) 100%)}
  .lpr-scene__veil{display:none}
  .lpr-scene__body, .lpr-card--grupos .lpr-scene__body{flex:none; max-width:none; padding:4px var(--lpr-card-pad) var(--lpr-card-pad); margin-top:-28px}
  .lpr-card--grupos .lpr-card__head{padding-left:0}
  .lpr-card--grupos .lpr-card__t{white-space:normal}
  .lpr-scene .lpr-card__d, .lpr-scene.lpr-card--grupos .lpr-card__d{max-width:none}
  .lpr-now, .lpr-gplan{width:100%}
  .lpr-gplan{padding:14px 16px}
  .lpr-av{width:34px; height:34px; font-size:11px}
  .lpr-segs{grid-template-columns:repeat(14, minmax(0,1fr))}
}

/* ---------- 8. Movimento ----------
   Só transform/opacity. Sem JS tudo aparece: os cards só ficam escondidos depois que
   o JS põe .lpr--js; "reduzir movimento" ignora tudo isto (parado e visível). */
@media (prefers-reduced-motion: no-preference){
  .lpr--js .lpr-card{opacity:0; transform:translate3d(0,12px,0); transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out), box-shadow 200ms var(--ease-out)}
  .lpr--js.is-in .lpr-card{opacity:1; transform:none}
  .lpr--js.is-in .lpr-card:nth-child(2){transition-delay:calc(1 * var(--lpr-step)), calc(1 * var(--lpr-step)), 0s}
  .lpr--js.is-in .lpr-card:nth-child(3){transition-delay:calc(2 * var(--lpr-step)), calc(2 * var(--lpr-step)), 0s}
  .lpr--js.is-in .lpr-card:nth-child(4){transition-delay:calc(3 * var(--lpr-step)), calc(3 * var(--lpr-step)), 0s}
  .lpr--js.is-in .lpr-card:nth-child(5){transition-delay:calc(4 * var(--lpr-step)), calc(4 * var(--lpr-step)), 0s}
  .lpr--js.is-in .lpr-card:nth-child(6){transition-delay:calc(5 * var(--lpr-step)), calc(5 * var(--lpr-step)), 0s}

  .lpr-wave i{animation:lpr-wave 1.6s ease-in-out infinite}
  .lpr-wave i:nth-child(4n+1){animation-duration:1.3s}
  .lpr-wave i:nth-child(4n+2){animation-duration:1.9s; animation-delay:-.4s}
  .lpr-wave i:nth-child(4n+3){animation-duration:1.5s; animation-delay:-.9s}
  .lpr-wave i:nth-child(4n){animation-duration:2.2s; animation-delay:-1.3s}
  .lpr-streak__flame svg{animation:lpr-flame 2.6s ease-in-out infinite}
  /* Seção fora da tela: nada se move. */
  .lpr--fora .lpr-wave i, .lpr--fora .lpr-streak__flame svg{animation-play-state:paused}
}
@keyframes lpr-wave{0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)}}
@keyframes lpr-flame{0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2px) scale(1.06)}}

/* Navegadores sem overflow-x: clip: corta no miolo. */
@supports not (overflow-x: clip){
  .lpr__in{overflow:hidden}
}