:root {
  --noite: #0f0d0d;
  --noite-2: #1b1817;
  --papel: #f4eee1;
  --tinta: #1d1a1a;
  --tinta-2: #5b534c;
  --caneta: #23204a;
  --luta: #c8141c;
  --luta-escuro: #8f0c12;
  --ouro: #ffc72c;
  --ouro-2: #e9a514;
  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-texto: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-mao: "Caveat", "Segoe Print", cursive;
  --f-serifa: "Playfair Display", Georgia, serif;
  --f-bic: "Kalam", "Segoe Print", cursive;
  --bic: #1c308c;
  --mola: cubic-bezier(.2, .9, .25, 1.15);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100svh;
  color: var(--papel);
  font-family: var(--f-texto);
  -webkit-font-smoothing: antialiased;
  background: #b98a52;
  overflow-x: hidden;
}
/* carteira escolar: fica parada enquanto a página rola (fixed no ::before funciona também no iPhone) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: url("assets/mesa.jpg") center / cover no-repeat, #b98a52;
}
body.travado { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 4px; }

#confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ============ CENA 1 · ENVELOPE ============ */
.cena1 {
  position: fixed; inset: 0; z-index: 20;
  background: url("assets/rabiscos.webp") center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 5vh, 46px); padding: 24px 16px;
}
/* bilhete em fita crepe, escrito de caneta Bic */
.bilhete {
  position: relative; width: min(88vw, 430px); aspect-ratio: 760 / 150;
  display: grid; place-items: center; transform: rotate(-3deg);
  filter: drop-shadow(0 2px 2px rgba(60, 35, 10, .35));
}
.bilhete .fita { position: absolute; inset: 0; width: 100%; height: 100%; }
.bilhete h1 {
  position: relative; margin: 0; padding: 0 9%; text-align: center;
  font-family: var(--f-bic); font-weight: 700; font-size: clamp(19px, 5.4vw, 25px); line-height: 1.12;
  color: var(--bic); text-wrap: balance;
}

.mesa { position: relative; perspective: 1100px; }
.env {
  position: relative; width: min(88vw, 470px); aspect-ratio: 1000 / 640;
  transform-style: flat; will-change: transform;
}
.env > * { position: absolute; }
.e-fundo, .e-frente { inset: 0; width: 100%; height: 100%; }
.e-fundo { z-index: 0; border-radius: 6px; }
.e-carta { left: 9%; right: 9%; top: 5%; height: 88%; z-index: 2; will-change: transform, opacity; }
.e-frente { z-index: 3; }
.e-para {
  z-index: 4; left: 7%; bottom: 13%; margin: 0; color: var(--caneta);
  font-family: var(--f-mao); font-weight: 700; font-size: clamp(24px, 7.4vw, 36px); line-height: 1;
  transform: rotate(-4deg); max-width: 46%; overflow-wrap: anywhere;
}
.e-para small {
  display: block; font-family: var(--f-texto); font-weight: 800; font-size: 9px;
  letter-spacing: .28em; text-transform: uppercase; color: #8a8174; margin: 0 0 4px 2px;
}
.e-aba {
  z-index: 5; left: 0; top: 0; width: 100%; height: 60%;
  transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform;
}
.e-aba .face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.e-aba .dentro { transform: rotateX(180deg); }

.lacre, .meia {
  z-index: 7; left: 50%; top: 60%; width: 23%; aspect-ratio: 1;
  translate: -50% -50%;
}
.lacre {
  border: 0; padding: 0; background: none; border-radius: 50%;
  filter: drop-shadow(0 6px 6px rgba(40, 0, 0, .45)) drop-shadow(0 2px 1px rgba(0, 0, 0, .3));
  -webkit-tap-highlight-color: transparent;
}
.lacre img { width: 100%; height: 100%; position: relative; z-index: 1; }
.lacre .anel {
  position: absolute; inset: -8%; border-radius: 50%; border: 2px solid var(--ouro);
  animation: anel 2s ease-out infinite;
}
.lacre .anel::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--ouro);
  animation: anel 2s ease-out .6s infinite;
}
@keyframes anel { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.meia { opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* sombra do envelope sobre a madeira (luz vem de cima, à esquerda) */
.sombra-env {
  position: absolute; left: 5%; right: -3%; top: 6%; bottom: -7%; border-radius: 8px;
  background: rgba(55, 30, 8, .5); filter: blur(16px); z-index: -1;
}
.dica {
  margin: 0; display: flex; align-items: flex-end; gap: 6px; color: var(--bic);
  font-family: var(--f-bic); font-weight: 700; font-size: 21px; transform: rotate(-2deg);
}
.dica svg { width: 58px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; animation: aponta 1.6s ease-in-out infinite; }
@keyframes aponta { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -5px); } }

/* capa da carta dobrada (dentro do envelope e no verso da dobra de cima) */
.capa-carta {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4%; padding: 6%; text-align: center; color: var(--tinta);
  background: url("assets/papel.jpg") center / 320px, var(--papel);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 -18px 30px -20px rgba(80, 60, 30, .35);
  border-radius: 2px;
}
.capa-carta img { width: 22%; max-width: 92px; }
.cc-tag { margin: 0; font-weight: 800; font-size: clamp(10px, 3vw, 13px); letter-spacing: .4em; text-transform: uppercase; color: var(--luta); }
.cc-para { margin: 0; font-family: var(--f-mao); font-weight: 700; font-size: clamp(22px, 7vw, 34px); color: var(--caneta); line-height: 1; }
.cc-para small { font-size: .6em; color: var(--tinta-2); }

/* ============ CENA 2 · CARTA ============ */
.cena2 {
  position: relative; z-index: 10; visibility: hidden;
  padding: max(24px, env(safe-area-inset-top)) 16px 80px;
  display: flex; flex-direction: column; align-items: center;
}
.cena2.viva { visibility: visible; }
.palco { position: relative; width: min(100%, 440px); perspective: 1800px; }
.carta {
  position: relative; color: var(--tinta);
  background: url("assets/papel.jpg") center / 320px, var(--papel);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .5) inset, 0 40px 80px rgba(0, 0, 0, .55), 0 10px 24px rgba(0, 0, 0, .35);
  border-radius: 3px;
}
.carta.escondida { visibility: hidden; }
.vinco { position: absolute; left: 0; right: 0; height: 26px; pointer-events: none; }
.vinco.v1 { top: calc(33.333% - 13px); }
.vinco.v2 { top: calc(66.666% - 13px); }
.vinco::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(80, 60, 30, .22) 12%, rgba(80, 60, 30, .22) 88%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.vinco::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(80, 60, 30, .05) 50%, transparent 51%, rgba(255, 255, 255, .25) 70%, transparent);
}

.conteudo { padding: 30px 26px 26px; text-align: center; }
.c-topo img { width: 86px; margin: 0 auto 12px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.c-mov { margin: 0; font-weight: 800; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.c-escolas { margin: 6px 0 0; font-size: 12px; letter-spacing: .14em; color: var(--tinta-2); text-transform: uppercase; }
.c-tag {
  margin: 26px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 800; font-size: 12px; letter-spacing: .44em; text-transform: uppercase; color: var(--luta);
}
.c-tag i {
  flex: 1; max-width: 70px; height: 1px; background: currentColor; position: relative;
}
.c-tag i::after {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px; translate: 0 -50%; background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.c-tag i:first-child::after { right: -4px; }
.c-tag i:last-child::after { left: -4px; }
.c-nome {
  margin: 14px 0 0; font-family: var(--f-mao); font-weight: 700; color: var(--caneta);
  font-size: clamp(46px, 14vw, 64px); line-height: .95; transform: rotate(-3deg); overflow-wrap: anywhere;
}
.c-lead { margin: 10px auto 0; max-width: 26ch; text-wrap: balance; font-family: var(--f-serifa); font-style: italic; font-size: 19px; line-height: 1.35; color: var(--tinta-2); }

.c-titulo { margin: 26px 0 0; font-weight: 400; line-height: 1; text-transform: uppercase; }
.c-titulo .t1 { display: block; font-family: var(--f-display); font-size: clamp(50px, 15vw, 72px); letter-spacing: .01em; line-height: .95; }
.c-titulo .t2 {
  display: inline-block; margin-top: 10px; padding: 10px 16px 6px; background: var(--luta);
  transform: rotate(-2deg); box-shadow: 0 8px 18px rgba(140, 10, 18, .35);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%), linear-gradient(0deg, rgba(0, 0, 0, .12), transparent 50%);
  background-color: var(--luta);
}
.ouro {
  display: block; font-family: var(--f-display); font-size: clamp(30px, 9.4vw, 50px); line-height: 1; white-space: nowrap;
  background: linear-gradient(100deg, #e9a514 0%, #ffd866 18%, #fff4c4 26%, #ffc72c 34%, #e39b0d 52%, #ffd866 70%, #fff4c4 78%, #ffc72c 86%, #e9a514 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-position: 120% 0;
}
.carta.pronta .ouro { animation: brilho 1.8s ease-in-out .3s 1 both; }
@keyframes brilho { from { background-position: 120% 0; } to { background-position: -130% 0; } }

.c-info { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); }
.c-info div { padding: 12px 4px 10px; }
.c-info div + div { border-left: 1px solid rgba(29, 26, 26, .25); }
.c-info strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1; text-transform: uppercase; }
.c-info span { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.c-local { margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.c-local svg { width: 18px; height: 18px; fill: none; stroke: var(--luta); stroke-width: 2.4; }

/* relógio de virar */
.c-relogio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 26px; }
.unid small { display: block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }
.flip {
  --h: clamp(52px, 15vw, 66px);
  position: relative; height: var(--h); border-radius: 7px; perspective: 300px;
  font-family: var(--f-display); font-size: calc(var(--h) * .66); color: var(--ouro);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
}
.flip .meio {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #1f1c1b;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip .meio span { display: block; height: var(--h); line-height: var(--h); text-align: center; font-variant-numeric: tabular-nums; }
.flip .cima { top: 0; border-radius: 7px 7px 0 0; background: linear-gradient(#292524, #1f1c1b); }
.flip .baixo { bottom: 0; border-radius: 0 0 7px 7px; }
.flip .baixo span { transform: translateY(-50%); }
.flip .cima-vira { transform-origin: 50% 100%; z-index: 2; }
.flip .baixo-vira { transform-origin: 50% 0; z-index: 2; transform: rotateX(90deg); }
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .7); z-index: 3; }
.flip.virando .cima-vira { animation: viraCima .3s ease-in forwards; }
.flip.virando .baixo-vira { animation: viraBaixo .3s ease-out .3s forwards; }
@keyframes viraCima { to { transform: rotateX(-90deg); } }
@keyframes viraBaixo { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

.c-recado { margin: 28px 0 0; font-family: var(--f-mao); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--caneta); transform: rotate(-1.5deg); }

.c-vou {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 76px; margin-top: 28px; border: 0; border-radius: 4px;
  background: var(--tinta); color: var(--ouro);
  font-family: var(--f-display); font-size: 38px; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 6px 0 #000, 0 16px 30px rgba(0, 0, 0, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.c-vou b { font-size: 30px; display: inline-block; animation: punho 2.4s ease-in-out infinite; }
@keyframes punho { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-6px) rotate(-12deg); } 86% { transform: translateY(0) rotate(6deg); } }
.c-vou::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; transform: translateX(-150%);
  background: linear-gradient(100deg, transparent, rgba(255, 216, 102, .35), transparent);
  animation: varre 3.2s ease-in-out infinite 1s;
}
@keyframes varre { 0% { transform: translateX(-150%); } 40%, 100% { transform: translateX(330%); } }
.c-vou:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #000, 0 20px 34px rgba(0, 0, 0, .4); }
.c-vou:active { transform: translateY(5px); box-shadow: 0 1px 0 #000, 0 6px 12px rgba(0, 0, 0, .3); }
.c-vou[disabled] { background: var(--luta); color: #fff; cursor: default; }
.c-vou[disabled]::after { display: none; }
.c-assina { margin: 22px 0 0; text-align: right; font-family: var(--f-mao); font-weight: 700; font-size: 28px; color: var(--caneta); transform: rotate(-2deg); }
.c-rodape { margin: 24px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a8174; }

/* dobras (animação) */
.dobras {
  position: absolute; left: 0; top: 0; width: 100%; transform-style: preserve-3d;
  transform-origin: 50% 0; pointer-events: none; z-index: 5;
}
.dobras .painel { position: absolute; left: 0; width: 100%; transform-style: preserve-3d; }
.dobras .p-meio { top: 33.333%; height: 33.334%; }
.dobras .p-base { top: 66.666%; height: 33.334%; transform-origin: 50% 0; }
.dobras .p-topo { top: 0; height: 33.334%; transform-origin: 50% 100%; }
.dobras .face {
  position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: url("assets/papel.jpg") center / 320px, var(--papel); color: var(--tinta);
}
.dobras .verso { transform: rotateX(180deg); }
.dobras .face .conteudo { position: absolute; left: 0; width: 100%; }
.dobras *, .dobras *::before, .dobras *::after { animation: none !important; transition: none !important; }
.dobras .p-topo, .dobras .p-base, .dobras { will-change: transform; }
.dobras .luz { position: absolute; inset: 0; background: rgb(30, 20, 10); opacity: 0; pointer-events: none; will-change: opacity; }
.dobras .p-meio .face { box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }

/* ============ CENA 3 · DISCO ============ */
.cena3 { width: min(100%, 440px); margin-top: 70px; text-align: center; color: var(--tinta); }
.ok { margin: 0; }
.ok span {
  display: inline-block; padding: 12px 18px 8px; border: 4px double var(--luta); color: var(--luta);
  font-family: var(--f-display); font-size: clamp(26px, 8vw, 36px); letter-spacing: .03em; text-transform: uppercase;
  transform: rotate(-5deg);
}
.ate { text-wrap: balance; margin: 16px 0 0; font-family: var(--f-bic); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--bic); transform: rotate(-2deg); }

.vitrola { position: relative; width: 100%; aspect-ratio: 1 / .78; margin: 34px auto 0; }
.v-capa {
  position: absolute; left: 0; top: 6%; width: 62%; z-index: 3;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3); border-radius: 2px;
}
.v-disco {
  position: absolute; left: 2%; top: 7.5%; width: 60%; aspect-ratio: 1; z-index: 2;
  padding: 0; border: 0; background: none; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.v-disco::before { /* sombra fixa (o filtro no disco girando obrigava redesenhar a cada quadro) */
  content: ""; position: absolute; inset: 4% -2% -8% 4%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(20, 10, 4, .55), rgba(20, 10, 4, .25) 70%, transparent);
}
.v-gira { will-change: transform; }
.v-gira { width: 100%; height: 100%; }
.v-brilho {
  position: absolute; inset: 1%; border-radius: 50%; pointer-events: none; opacity: .55;
  background:
    conic-gradient(from 30deg, transparent 0 5%, rgba(255, 255, 255, .18) 10%, transparent 16% 50%, rgba(255, 255, 255, .13) 60%, transparent 66%),
    radial-gradient(circle, transparent 17%, rgba(255, 255, 255, .03) 18%, transparent 60%);
  -webkit-mask: radial-gradient(circle, transparent 17.5%, #000 18%); mask: radial-gradient(circle, transparent 17.5%, #000 18%);
}
.v-braco {
  position: absolute; z-index: 4; height: 66%; width: auto; left: 76%; top: -4%;
  transform-origin: 57.2% 16.6%; transform: rotate(-30deg);
}

.faixa {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 10px 12px 10px 16px;
  border-radius: 999px; background: rgba(22, 16, 12, .86); color: var(--papel); box-shadow: 0 8px 18px rgba(50, 28, 8, .35);
}
.eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.eq i { width: 4px; height: 20px; background: var(--ouro); border-radius: 1px; transform-origin: 50% 100%; transform: scaleY(.2); animation: eq .7s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: .15s; } .eq i:nth-child(3) { animation-delay: .35s; }
.eq i:nth-child(4) { animation-delay: .05s; } .eq i:nth-child(5) { animation-delay: .25s; }
@keyframes eq { to { transform: scaleY(1); } }
.pausado .eq i { animation-play-state: paused; }
.faixa-txt { text-align: left; font-weight: 700; font-size: 15px; }
.faixa-txt small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.btn-som { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--papel); color: var(--noite); display: grid; place-items: center; }
.btn-som svg { width: 14px; height: 14px; fill: currentColor; }

.acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.btn {
  display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 14px; border-radius: 4px;
  text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border: 2px solid transparent;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-ouro { background: var(--ouro); color: var(--noite); }
.btn-linha { border-color: var(--tinta); color: var(--tinta); background: rgba(244, 238, 225, .35); }
.btn-vermelho { background: var(--luta); color: #fff; }

.convocar {
  margin-top: 56px; padding: 30px 22px 24px; text-align: left; color: var(--tinta); border-radius: 3px;
  background: url("assets/papel.jpg") center / 320px, var(--papel); box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  position: relative;
}
.convocar::before { /* fita adesiva */
  content: ""; position: absolute; top: -12px; left: 50%; width: 120px; height: 26px; translate: -50% 0; rotate: -3deg;
  background: rgba(255, 199, 44, .8); box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.cv-tag { margin: 0; font-weight: 800; font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--luta); }
.convocar h3 { margin: 8px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1; text-transform: uppercase; }
.convocar h3 em { font-style: normal; color: var(--luta); }
.cv-txt { margin: 10px 0 18px; font-family: var(--f-serifa); font-style: italic; font-size: 17px; color: var(--tinta-2); }
.convocar label { display: block; margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.convocar input {
  width: 100%; min-height: 52px; padding: 8px 2px; border: 0; border-bottom: 2px solid var(--tinta); background: transparent;
  font-family: var(--f-mao); font-weight: 700; font-size: 30px; color: var(--caneta); outline: none; border-radius: 0;
}
.convocar input::placeholder { color: #b3a996; font-size: 24px; }
.convocar input:focus { border-bottom-color: var(--luta); }
.convocar .acoes { margin-top: 22px; }
.convocar .btn-linha { color: var(--tinta); border-color: var(--tinta); }

.rodape { margin: 46px 0 0; display: grid; gap: 6px; font-family: var(--f-bic); font-size: 18px; color: var(--bic); }
.rodape a { color: var(--luta); font-family: var(--f-texto); font-size: 14px; font-weight: 800; text-decoration: none; }

@media (max-width: 360px) {
  .acoes { grid-template-columns: 1fr; }
  .conteudo { padding: 26px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}