:root {
  --ink: #2d2a5a;
  --night: #1f1745;
  --night-l: #33266b;
  --cream: #fff6e5;
  --yellow: #ffc83d;
  --yellow-d: #d9962b;
  --green: #4cd964;
  --green-d: #2e9e47;
  --pink: #ff6fb5;
  --blue: #3fa9f5;
  --purple: #a46bff;
  --mint: #5be3a8;
  --bounce: cubic-bezier(.3, 1.6, .5, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--night);
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.title { font-family: "Lilita One", "Fredoka", sans-serif; font-weight: 400; letter-spacing: 0.5px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ── Botões "rebuçado" iguais aos do jogo ─────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px 12px; border-radius: 22px;
  font: 600 1.15rem "Fredoka", sans-serif; text-decoration: none; text-align: left;
  border: 3px solid var(--yellow-d); border-bottom-width: 10px;
  background: var(--yellow); color: var(--ink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  transition: transform .2s var(--bounce), border-bottom-width .12s;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:active { transform: translateY(5px); border-bottom-width: 5px; }
.btn.green { background: var(--green); border-color: var(--green-d); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn small { display: block; font-size: .72rem; font-weight: 600; opacity: .85; line-height: 1; letter-spacing: .5px; }
.btn .play { flex: none; width: 0; height: 0; border-left: 16px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.btn .ico { flex: none; width: 28px; height: 28px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.btn.shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-130%); animation: shine 3.6s ease-in-out 1.8s infinite;
}
@keyframes shine { 0% { transform: translateX(-130%); } 35%, 100% { transform: translateX(130%); } }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  padding: 72px 0 calc(min(1400px, 140vw) * .214 + 24px);
  text-align: center; color: #fff; isolation: isolate; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: url("img/bg_soup.jpg") center 70% / cover;
  filter: saturate(1.2);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 40% at 50% 38%, rgba(164,107,255,.35), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, rgba(31,23,69,.88) 24%, rgba(51,38,107,.45) 55%, rgba(31,23,69,.55) 80%, var(--night) 100%);
}
.hero-inner { position: relative; z-index: 1; }
.sky, .bubbles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.star {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.7); opacity: .75;
  animation: twinkle var(--t) ease-in-out var(--dl) infinite;
}
.star.spark {
  border-radius: 0; background: var(--yellow); box-shadow: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
@keyframes twinkle { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: 1; scale: 1.15; } }

.bubble {
  position: absolute; bottom: -60px; left: var(--x); width: var(--s); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.85) 0 12%, rgba(91,227,168,.18) 40%, rgba(91,227,168,.05) 70%);
  opacity: 0; animation: rise var(--t) linear var(--dl) infinite;
}
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(var(--w), -55vh); }
  90% { opacity: .7; }
  100% { transform: translate(0, -110vh); opacity: 0; }
}

.logo { position: relative; width: min(860px, 100%); margin: 0 auto; animation: logoIn 1.1s var(--bounce) both, bob 6s ease-in-out 1.2s infinite; }
.logo img { width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); }
@keyframes logoIn {
  0% { opacity: 0; transform: translateY(-50px) scale(.55) rotate(-8deg); }
  60% { opacity: 1; transform: translateY(6px) scale(1.06) rotate(1.5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes bob { 50% { translate: 0 -10px; } }
/* brilho sobre a estrela do logótipo (≈54% x 27% da imagem) */
.glint {
  position: absolute; left: 54%; top: 26.5%; width: 7%; aspect-ratio: 1; translate: -50% -50%;
  background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: glint 3.4s ease-in-out 1.4s infinite; scale: 0;
}
@keyframes glint { 0%, 70%, 100% { scale: 0; rotate: 0deg; } 80% { scale: 1; rotate: 45deg; } 90% { scale: .2; rotate: 90deg; } }

.tagline {
  font-size: clamp(1.15rem, 3.5vw, 1.6rem); margin: 10px auto 30px; max-width: 34ch;
  text-shadow: 0 2px 10px rgba(0,0,0,.7); animation: fadeUp .8s ease-out .55s both;
}
.ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero .ctas { animation: fadeUp .8s ease-out .75s both; }
@media (max-width: 480px) { .ctas .btn { width: min(100%, 300px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } }

.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 30px;
  font-weight: 600; text-decoration: none; opacity: .85; text-shadow: 0 2px 8px rgba(0,0,0,.6);
  animation: fadeUp .8s ease-out 1s both;
}
.scroll-cue span {
  width: 14px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; rotate: 45deg;
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 50% { translate: 0 6px; } }

.drifter {
  position: absolute; z-index: 0; width: clamp(72px, 12vw, 170px); height: auto; pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.4));
  animation: drift 7s ease-in-out infinite, breathe 2.8s ease-in-out infinite;
}
.hero .d1 { left: 5%; top: 24%; }
.hero .d2 { right: 5%; top: 34%; animation-delay: -3s, -1s; }
@keyframes drift { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 10px -24px; rotate: 5deg; } }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.06 .95; } }

.lineup {
  position: absolute; left: 50%; bottom: 8px; width: min(1400px, 140vw); max-width: none; height: auto;
  transform: translateX(-50%); animation: bob 4s ease-in-out infinite; pointer-events: none;
}

/* ── Secções ──────────────────────────────────────────────────────── */
section { position: relative; padding: 96px 0; }
.light { background: var(--cream); }
.dark {
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(164,107,255,.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(63,169,245,.16), transparent 70%),
    var(--night);
}
/* ondas de transição entre secções claras e escuras */
.light::before, .light::after {
  content: ""; position: absolute; left: 0; right: 0; height: 36px; background: var(--night);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cpath d='M0 0H120V14Q90 36 60 14T0 14Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 36px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cpath d='M0 0H120V14Q90 36 60 14T0 14Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 36px;
}
.light::before { top: -1px; }
.light::after { bottom: -1px; transform: scaleY(-1); }

.light h2 { color: var(--ink); }
h2 { font-size: clamp(2rem, 6vw, 3.2rem); text-align: center; color: #fff; margin-bottom: 12px; line-height: 1.1; }
.lead { text-align: center; max-width: 60ch; margin: 0 auto 44px; font-size: 1.15rem; opacity: .85; }
.dark .lead { color: #fff; }

/* aparecer ao fazer scroll (só com JS; sem JS fica tudo visível) */
html.js .reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity .7s ease-out, transform .8s cubic-bezier(.2, .9, .3, 1.25);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .reveal.pop { transform: scale(.7); }
html.js .reveal.in { opacity: 1; transform: none; }

/* contadores */
.stats {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 860px; margin: 0 auto 64px;
}
.stats li {
  background: #fff; border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 7px 0 var(--ink);
  padding: 14px 10px 12px; text-align: center;
}
.stats b {
  display: block; font: 400 clamp(2.4rem, 7vw, 3.4rem)/1 "Lilita One", sans-serif;
  color: var(--c, var(--green)); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink); font-variant-numeric: tabular-nums;
}
.stats li:nth-child(1) { --c: var(--green); }
.stats li:nth-child(2) { --c: var(--blue); }
.stats li:nth-child(3) { --c: var(--yellow); }
.stats li:nth-child(4) { --c: var(--pink); }
.stats span { display: block; margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .9rem; opacity: .75; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 52px; } }

/* cartões de funcionalidades */
.features { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: #fff; border: 4px solid var(--ink); border-radius: 28px; padding: 26px 22px 24px;
  box-shadow: 0 8px 0 var(--ink); text-align: center;
  transition: transform .3s var(--bounce), box-shadow .3s;
}
.card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 16px 0 var(--ink); }
.card:nth-child(2):hover { transform: translateY(-8px) rotate(1deg); }
.card img { width: 110px; height: 110px; margin: -4px auto 10px; object-fit: contain; animation: breathe 3s ease-in-out infinite; }
.card:hover img { animation: wiggle .5s ease-in-out infinite alternate, breathe 3s ease-in-out infinite; }
.card h3 { font-size: 1.6rem; margin-bottom: 6px; }
@keyframes wiggle { from { rotate: -8deg; } to { rotate: 8deg; } }

/* grelha sem scroll: 4 colunas no desktop, 2 no telemóvel, os 8 cartões sempre inteiros */
.eras { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) { .eras { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .eras { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.era {
  --c: var(--yellow);
  position: relative; border-radius: 26px; overflow: hidden; border: 4px solid #fff3; aspect-ratio: 9 / 15;
  transition: transform .35s var(--bounce), border-color .3s, box-shadow .3s;
}
.era:hover { transform: translateY(-10px) rotate(-1.5deg) scale(1.03); border-color: var(--c); box-shadow: 0 20px 40px -12px var(--c), 0 0 0 3px var(--c); z-index: 1; }
.era:nth-child(even):hover { transform: translateY(-10px) rotate(1.5deg) scale(1.03); }
.era .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s ease-out; }
.era:hover .bg { scale: 1.12; }
.era em {
  position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 10px; border-radius: 99px;
  font: 400 .85rem/1.4 "Lilita One", sans-serif; letter-spacing: .5px; font-style: normal;
  background: var(--c); color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
.era span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; color: #fff;
  font-size: clamp(1rem, 3.6vw, 1.35rem); line-height: 1.15;
  background: linear-gradient(transparent, rgba(31,23,69,.92));
}
.era .sp {
  position: absolute; width: 90%; height: auto; aspect-ratio: 1; object-fit: contain; left: 5%; top: 18%;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
  animation: float 3.2s ease-in-out infinite, breathe 2.6s ease-in-out infinite;
}
.era:nth-child(odd) .sp { animation-delay: -1.6s, -.8s; }
.era:hover .sp { animation: hop .42s ease-in-out infinite alternate, breathe .84s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -12px; rotate: -3deg; } }
@keyframes hop { from { translate: 0 0; } to { translate: 0 -24px; } }

/* ramos da Árvore da Vida */
.branches { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
@media (max-width: 860px) { .branches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .branches { grid-template-columns: minmax(0, 1fr); } }
.branch {
  --c: var(--yellow);
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 22px; padding: 12px 16px;
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  transition: transform .3s var(--bounce), box-shadow .3s, background-color .3s;
}
.branch:hover { transform: translateY(-5px); box-shadow: 0 10px 0 var(--ink), 0 0 0 4px var(--c) inset; }
.branch img { flex: none; width: 58px; height: 58px; transition: rotate .4s var(--bounce), scale .4s var(--bounce); }
.branch:hover img { rotate: -12deg; scale: 1.15; }
.branch b { display: block; font-size: 1.15rem; }
.branch small { opacity: .7; font-size: .88rem; line-height: 1.2; display: block; }

/* mockup de telemóvel com as capturas */
.showcase { display: grid; grid-template-columns: auto minmax(0, 460px); gap: 56px; justify-content: center; align-items: center; }
@media (max-width: 820px) { .showcase { grid-template-columns: minmax(0, 1fr); gap: 36px; justify-items: center; } .tabs { width: 100%; max-width: 520px; } }
.phone {
  position: relative; width: min(300px, 76vw); aspect-ratio: 9 / 16; border-radius: 42px;
  border: 11px solid #0d0a20; background: #0d0a20; overflow: hidden;
  box-shadow: 0 0 0 3px #4a3c8f, 0 30px 60px rgba(0,0,0,.55), 0 0 80px rgba(164,107,255,.35);
  animation: bob 5s ease-in-out infinite; touch-action: pan-y;
}
.phone::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 50%; width: 30%; height: 16px; translate: -50% 0; border-radius: 99px; background: #0d0a20; }
.screen { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; }
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity .55s ease, transform .9s cubic-bezier(.2, .9, .3, 1);
}
.slide.on { opacity: 1; transform: none; }

.tabs { display: grid; gap: 12px; }
.tab {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 16px 14px; border-radius: 22px; border: 3px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: transform .3s var(--bounce), background-color .3s, border-color .3s, color .3s, box-shadow .3s;
}
.tab:hover { background: rgba(255,255,255,.12); transform: translateX(4px); }
.tab.on { background: var(--cream); color: var(--ink); border-color: var(--yellow); box-shadow: 0 6px 0 var(--yellow-d); transform: translateX(8px); }
.tab img { flex: none; width: 52px; height: 52px; transition: scale .4s var(--bounce); }
.tab.on img { scale: 1.12; animation: breathe 2.4s ease-in-out infinite; }
.tab b { display: block; font: 400 1.25rem/1.2 "Lilita One", sans-serif; letter-spacing: .5px; }
.tab small { display: block; font-size: .92rem; line-height: 1.3; opacity: .8; }
.tab .bar { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 4px; border-radius: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.tab.on .bar { animation: fill 4.5s linear forwards; }
.tabs.paused .tab.on .bar { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
@media (max-width: 820px) { .tab.on, .tab:hover { transform: none; } }

/* chamada final */
.cta-final { text-align: center; color: #fff; overflow: hidden; isolation: isolate; padding: 110px 0 90px; }
.cta-final::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(91,227,168,.18), transparent 70%);
}
.cta-final h2 { margin-bottom: 26px; }
.cta-icon { width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 28px; box-shadow: 0 12px 30px rgba(0,0,0,.45); animation: bob 4s ease-in-out infinite; }
.cta-final .d3 { left: 4%; top: 14%; }
.cta-final .d4 { right: 4%; bottom: 10%; animation-delay: -2s, -1.2s; }
@media (max-width: 640px) {
  .drifter { width: 64px; opacity: .9; }
  .hero .d1 { left: 2%; top: 12%; }
  .hero .d2 { right: 2%; top: 16%; }
  .cta-final .d3 { top: 6%; }
  .cta-final .d4 { bottom: 4%; }
}

footer { padding: 30px 0 40px; color: #fff9; text-align: center; font-size: .95rem; border-top: 2px solid rgba(255,255,255,.06); }
footer img { width: 200px; height: auto; margin: 0 auto 10px; opacity: .9; }
footer a { margin: 0 10px; }

/* ── Política de privacidade ──────────────────────────────────────── */
.doc-head { position: relative; padding: 28px 0 70px; text-align: center; overflow: hidden; isolation: isolate; }
.doc-head .sky { z-index: -1; }
.doc-head .home { display: inline-block; width: min(360px, 80%); transition: transform .3s var(--bounce); }
.doc-head .home:hover { transform: scale(1.04) rotate(-1deg); }
.doc-head .home img { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.doc { position: relative; z-index: 1; padding: 0 0 70px; }
.doc .wrap { max-width: 800px; }
.doc-card {
  margin-top: -40px; background: var(--cream); border: 4px solid var(--ink); border-radius: 30px;
  box-shadow: 0 10px 0 var(--ink), 0 30px 60px rgba(0,0,0,.4); padding: clamp(22px, 5vw, 48px);
}
.doc h1 { font-size: clamp(2.2rem, 7vw, 3rem); margin-bottom: 6px; line-height: 1.1; }
.doc h2 { color: var(--ink); text-align: left; font-size: 1.6rem; margin: 30px 0 8px; }
.doc p, .doc li { margin-bottom: 10px; }
.doc ul { padding-left: 22px; }
.doc a { color: #5b3cc4; overflow-wrap: anywhere; }
.doc .back { display: inline-block; margin: 26px 0 0; color: #fff; font-weight: 600; }
.lang-pick { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 0 14px; color: #fff; font-weight: 600; }
.lang-pick select { font: inherit; font-weight: 500; color: var(--ink); background: #fff6e5; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; cursor: pointer; }
.doc-card[hidden] { display: none; }

/* Barra de progresso do scroll */
.progress { position: fixed; inset: 0 0 auto 0; height: 5px; z-index: 50; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #5be3a8, #3fa9f5, #a46bff, #ff6fb5, var(--yellow)); }

/* Toques no hero: "+DNA" e partículas, como no jogo */
.hero { cursor: pointer; }
.hero a, .hero .btn { cursor: pointer; }
.pop-txt {
  position: absolute; z-index: 30; pointer-events: none; white-space: nowrap; translate: -50% -50%;
  font: 700 26px "Fredoka", sans-serif; color: var(--c, var(--yellow)); -webkit-text-stroke: 5px #1f1745; paint-order: stroke fill;
  animation: popUp .9s ease-out forwards;
}
@keyframes popUp { 0% { opacity: 0; scale: .5; } 18% { opacity: 1; scale: 1.2; } 100% { opacity: 0; scale: 1; transform: translateY(-80px); } }
.spark-p {
  position: absolute; z-index: 29; width: var(--s, 9px); height: var(--s, 9px); border-radius: 50%; pointer-events: none;
  background: var(--c); box-shadow: 0 0 10px var(--c); translate: -50% -50%;
  animation: burst .75s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* Meteorito dourado que atravessa o céu; tocar-lhe dá Genes */
.meteor-fly {
  position: absolute; z-index: 3; width: 74px; height: 74px; cursor: pointer; border: 0; padding: 0; background: none;
  left: 0; top: var(--y); animation: meteorFly var(--t) linear forwards;
  filter: drop-shadow(0 0 14px rgba(255, 200, 61, .8));
}
.meteor-fly img { width: 100%; height: 100%; animation: spin 1.6s linear infinite; }
@keyframes meteorFly { from { transform: translate(110vw, -40px); } to { transform: translate(-140px, 160px); } }
@keyframes spin { to { rotate: -360deg; } }

/* Paralaxe dos bonecos do hero (o drift usa translate/rotate; a paralaxe usa transform) */
.hero .drifter { transform: translate(calc(var(--px, 0) * var(--k, 18px)), calc(var(--py, 0) * var(--k, 18px))); transition: transform .4s ease-out; }
.hero .d2 { --k: -26px; }

/* Cartões das eras inclinam-se para o rato */
.era.tilt, .era.tilt:nth-child(even) { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px) scale(1.04); transition: transform .12s ease-out, border-color .3s, box-shadow .3s; }

/* Letras dos títulos a saltar em onda quando aparecem */
.title .ch { display: inline-block; animation: chWave .7s var(--bounce) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes chWave { 0% { transform: translateY(.5em) scale(.6); opacity: 0; } 60% { transform: translateY(-.15em) scale(1.1); opacity: 1; } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .progress, .pop-txt, .spark-p, .meteor-fly { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .glint, .bubbles { display: none; }
}