/* MOA Dashboard — capa de marca y animaciones (v2.3).
   Se carga después de simple.css. Colores del manual de marca MOA Education:
   teal #178391 · teal oscuro #036870 · morado #4F1A48 · morado claro #82647F · gris #EDEDED
   naranja #F9B03B · amarillo #F9D05D · carmín #C40847 · rosa #E62962. */
:root {
  --rosa-l: #FDE7EE;
  --ama-l: #FFF6D9;
  --ease: cubic-bezier(.22, .9, .32, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sh-1: 0 1px 2px rgba(79, 26, 72, .05), 0 6px 18px rgba(79, 26, 72, .06);
  --sh-2: 0 2px 4px rgba(79, 26, 72, .06), 0 16px 36px rgba(79, 26, 72, .12);
  --sh-teal: 0 8px 22px rgba(23, 131, 145, .32);
  --sh-rosa: 0 8px 22px rgba(230, 41, 98, .32);
  --line: #E6E1E5;
}

/* ─── Fondo de la app ───────────────────────────────────────────────── */
body {
  background:
    radial-gradient(900px 520px at 100% -10%, rgba(23, 131, 145, .10), transparent 60%),
    radial-gradient(700px 480px at 30% 110%, rgba(230, 41, 98, .06), transparent 60%),
    radial-gradient(600px 400px at 85% 75%, rgba(249, 208, 93, .10), transparent 60%),
    #F5F7F7;
  background-attachment: fixed;
}

/* ─── Menú lateral teal ─────────────────────────────────────────────── */
.side {
  background: linear-gradient(180deg, #036870 0%, #0B6F7A 45%, #178391 100%);
  border-right: 0;
  color: #fff;
  box-shadow: 6px 0 30px rgba(3, 104, 112, .18);
  isolation: isolate;
}
.side::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 220px; height: 236px; right: -90px; bottom: 90px; opacity: .08;
  background: url("brand/burbuja-blanco.png") center / contain no-repeat;
}
.side__logo { transition: transform .4s var(--spring); }
.side__logo:hover { transform: scale(1.04) rotate(-1.5deg); }
.nav { color: rgba(255, 255, 255, .92); position: relative; transition: background .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s; }
.nav svg { transition: transform .35s var(--spring); }
.nav:hover { background: rgba(255, 255, 255, .13); color: #fff; transform: translateX(4px); }
.nav:hover svg { transform: scale(1.15) rotate(-6deg); }
.nav.is-on { background: #fff; color: var(--teal-d); box-shadow: 0 10px 24px rgba(2, 60, 66, .28); transform: none; }
.nav.is-on::before { content: ""; position: absolute; left: -16px; top: 22%; bottom: 22%; width: 5px; border-radius: 0 6px 6px 0; background: var(--ama); }
.nav.is-on svg { color: var(--teal); }
.nav__count { background: var(--rosa); box-shadow: 0 0 0 0 rgba(230, 41, 98, .6); animation: count-pulse 2.6s ease-out infinite; }
.nav.is-on .nav__count { background: var(--rosa); color: #fff; }
.side__more { border-top-color: rgba(255, 255, 255, .18); }
.side__more .kick, .side .kick { color: var(--ama); }
.more summary { color: var(--ama); }
.more summary:hover, .more a:hover { background: rgba(255, 255, 255, .12); }
.more a { color: #fff; }
.help-btn { background: var(--ama); border-color: var(--ama); color: var(--mor); box-shadow: 0 8px 20px rgba(249, 208, 93, .25); transition: transform .25s var(--spring), box-shadow .25s; }
.help-btn:hover { border-color: #fff; transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 26px rgba(249, 208, 93, .4); }
.help-btn svg { color: var(--mor); }
.me { border-top-color: rgba(255, 255, 255, .18); }
.me b { color: #fff; }
.me span, .me__out { color: rgba(255, 255, 255, .75); }
.me__out:hover { color: var(--ama); }
.me .av { background: var(--ama) !important; color: var(--mor) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.side .sk { background: rgba(255, 255, 255, .14); }
.sk-side .sk-me { border-top-color: rgba(255, 255, 255, .18); }

/* ─── Encabezado de cada pantalla: banner de marca ───────────────────── */
.topbar {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, #036870 0%, #178391 58%, #1d97a6 100%);
  color: #fff; border-radius: 28px; padding: 30px 34px; align-items: center;
  box-shadow: 0 18px 40px rgba(3, 104, 112, .22);
}
.topbar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 300px; height: 300px; right: -60px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%);
  animation: float-a 9s ease-in-out infinite;
}
.topbar::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 150px; height: 160px; right: 120px; bottom: -70px; opacity: .14;
  background: url("brand/burbuja-blanco.png") center / contain no-repeat;
  animation: float-b 11s ease-in-out infinite;
}
.topbar h1.title { color: #fff; }
.topbar h1.title em { color: var(--ama); }
.topbar .lead { color: rgba(255, 255, 255, .92); }
.topbar .lead b { color: var(--ama); }
.topbar .kick { color: var(--ama); }
.topbar .link { color: #fff; }
.topbar .link:hover { color: var(--ama); }
.topbar .mute { color: rgba(255, 255, 255, .8); }
.topbar .tag { background: rgba(255, 255, 255, .18); color: #fff; }
.topbar .btn { background: var(--rosa); border-color: var(--rosa); box-shadow: var(--sh-rosa); }
.topbar .btn:hover { background: var(--car); border-color: var(--car); }
.topbar .btn--out, .topbar .btn--ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; box-shadow: none; }
.topbar .btn--out:hover, .topbar .btn--ghost:hover { background: #fff; color: var(--teal-d); border-color: #fff; }
.topbar .weeknav { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.topbar .weeknav button { background: #fff; color: var(--teal-d); }
.topbar .select, .topbar .input { border-color: transparent; }
.topbar .av { box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); }
.topbar .bell { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.topbar .bell:hover { background: #fff; color: var(--teal-d); }
.topbar .bell__count { border-color: var(--teal); }
.bell { transition: transform .25s var(--spring), background .2s, color .2s; }
.bell:hover { transform: translateY(-2px); }
.bell:hover svg { animation: ring .7s ease-in-out; transform-origin: 50% 10%; }
.bell__count { background: var(--rosa); animation: pop-in .5s var(--spring) both, count-pulse 2.6s 1s ease-out infinite; }

/* ─── Tarjetas ──────────────────────────────────────────────────────── */
.card, .kpi, .stat, .dec, .person, .task, .type, .sk-card, .sk-item, .weeknav, .cal__d { border-color: var(--line); box-shadow: var(--sh-1); }
.card { position: relative; }
.card .kick { color: var(--car); }
.card h2.h2 { color: var(--teal); }
.card h2.h2 em { color: var(--teal); }
.card--soft { background: linear-gradient(135deg, var(--teal-l), #fff 140%); border-color: transparent; box-shadow: none; }
.task, .person, .dec, button.stat, .type, .choice, .radio-list button, .cal__d, .notif, .doc, .kpi {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s, background .2s;
}
.task:hover, .person:hover, .dec:hover, button.stat:hover, .type:hover, .kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.task:active, .person:active, button.stat:active, .type:active { transform: translateY(-1px) scale(.995); }
.task { border-left-width: 6px; }
.task:hover { border-left-width: 10px; }
.doc:hover { transform: translateX(4px); color: var(--teal); }

/* Tarjeta principal de «Hoy» */
.first { box-shadow: 0 14px 34px rgba(196, 8, 71, .14); position: relative; overflow: hidden; animation: glow-car 2.8s ease-in-out infinite; }
.first::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(230, 41, 98, .10), transparent 70%); pointer-events: none; }
.first--calm { animation: none; box-shadow: 0 14px 34px rgba(23, 131, 145, .14); }
.first--calm::after { background: radial-gradient(circle, rgba(23, 131, 145, .12), transparent 70%); }
.first__num { background: linear-gradient(135deg, var(--rosa), var(--car)); box-shadow: 0 8px 18px rgba(196, 8, 71, .3); animation: pop-in .6s var(--spring) both; }
.first--calm .first__num { background: linear-gradient(135deg, #1d97a6, var(--teal-d)); box-shadow: var(--sh-teal); }
.todo__num { background: linear-gradient(135deg, var(--teal-l), #fff); box-shadow: inset 0 0 0 2px rgba(23, 131, 145, .2); }
.now { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, #036870, #178391, #1d97a6, #036870); background-size: 300% 300%; animation: bg-pan 12s ease infinite; box-shadow: 0 18px 40px rgba(3, 104, 112, .25); }
.now::after { content: ""; position: absolute; z-index: -1; right: -30px; bottom: -40px; width: 140px; height: 150px; opacity: .12; background: url("brand/burbuja-blanco.png") center / contain no-repeat; }
.now .kick { color: var(--ama); }
.now__btn { transition: transform .25s var(--spring), box-shadow .25s; }
.now__btn:hover { transform: scale(1.06); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.now--off { animation: none; background: #fff; }
.now--off::after { display: none; }
.done-today { background: linear-gradient(120deg, var(--ama-l), #fff 80%); border: 1px solid #F6E3A6; }
.done-today svg { color: #fff; background: var(--teal); border-radius: 50%; padding: 5px; animation: pop-in .6s .2s var(--spring) both; }

/* Números del equipo con color */
.stats .stat { position: relative; overflow: hidden; }
.stats .stat::after { content: ""; position: absolute; right: -24px; bottom: -24px; width: 80px; height: 80px; border-radius: 50%; opacity: .5; }
.stats .stat:nth-child(1) { background: linear-gradient(135deg, var(--teal-l), #fff); }
.stats .stat:nth-child(1) b { color: var(--teal-d); }
.stats .stat:nth-child(1)::after { background: rgba(23, 131, 145, .12); }
.stats .stat:nth-child(2) { background: linear-gradient(135deg, var(--nar-l), #fff); }
.stats .stat:nth-child(2) b { color: var(--nar-d); }
.stats .stat:nth-child(2)::after { background: rgba(249, 176, 59, .16); }
.stats .stat:nth-child(3) { background: linear-gradient(135deg, var(--rosa-l), #fff); }
.stats .stat:nth-child(3) b { color: var(--car); }
.stats .stat:nth-child(3)::after { background: rgba(230, 41, 98, .12); }
.stats .stat:nth-child(4) { background: linear-gradient(135deg, var(--mor-ll), #fff); }
.stats .stat:nth-child(4) b { color: var(--mor); }
.stats .stat:nth-child(4)::after { background: rgba(79, 26, 72, .08); }

.person { border-top-width: 6px; }
.person .doing { background: linear-gradient(135deg, var(--teal-ll), #fff); border: 1px solid var(--teal-l); }
.person .doing--bad { background: linear-gradient(135deg, var(--rosa-l), #fff); border-color: #F8CBD8; }
.online { animation: online 2.4s ease-out infinite; }
.online--away { animation: none; }
.av { background: linear-gradient(135deg, #1d97a6, var(--teal-d)); }

/* Decisiones */
.dec__ic { transition: transform .35s var(--spring); }
.dec:hover .dec__ic { transform: rotate(-8deg) scale(1.08); }

/* KPIs */
.big { animation: pop-in .7s var(--spring) both; box-shadow: 0 10px 22px rgba(79, 26, 72, .08); }
.big--ok { background: radial-gradient(circle at 30% 25%, #fff, var(--teal-l) 70%); }
.big--warn { background: radial-gradient(circle at 30% 25%, #fff, var(--nar-l) 70%); }
.big--bad { background: radial-gradient(circle at 30% 25%, #fff, var(--car-l) 70%); }
.kpi h4 { color: var(--mor); }
.bar { background: #EEF0F0; }
.bar b { background: linear-gradient(90deg, var(--teal), #26A9B8); transform-origin: left; animation: bar-grow 1s var(--ease) both; }
.wk div { transform-origin: bottom; animation: col-grow .9s var(--ease) both; }
.wk:nth-child(2) div { animation-delay: .06s; } .wk:nth-child(3) div { animation-delay: .12s; } .wk:nth-child(4) div { animation-delay: .18s; }
.wk:nth-child(5) div { animation-delay: .24s; } .wk:nth-child(6) div { animation-delay: .30s; } .wk:nth-child(7) div { animation-delay: .36s; }
.wk:nth-child(8) div { animation-delay: .42s; } .wk:nth-child(n+9) div { animation-delay: .48s; }

/* Pasos de la ficha */
.st.is-done .st__c { background: linear-gradient(135deg, #1d97a6, var(--teal-d)); box-shadow: var(--sh-teal); }
.st.is-here .st__c { animation: here-ring 1.8s ease-out infinite; }
.wz div.is-on span { background: linear-gradient(135deg, #1d97a6, var(--teal-d)); box-shadow: var(--sh-teal); }

/* ─── Botones ───────────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #1d97a6 0%, var(--teal) 45%, var(--teal-d) 100%);
  border-color: transparent; box-shadow: var(--sh-teal);
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background .25s, color .2s, border-color .2s;
}
.btn::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn:hover { background: linear-gradient(135deg, #1d97a6 0%, var(--teal) 35%, var(--teal-d) 100%); border-color: transparent; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(23, 131, 145, .38); }
.btn:hover::before { left: 120%; }
.btn:active { transform: translateY(0) scale(.97); box-shadow: 0 4px 12px rgba(23, 131, 145, .3); transition-duration: .08s; }
.btn svg { transition: transform .3s var(--spring); }
.btn:hover svg { transform: translateX(3px) scale(1.1); }
.btn--red { background: linear-gradient(135deg, var(--rosa) 0%, var(--car) 100%); box-shadow: var(--sh-rosa); }
.btn--red:hover { background: linear-gradient(135deg, #ef3c72 0%, var(--car) 100%); box-shadow: 0 14px 28px rgba(230, 41, 98, .4); }
.btn--ghost { background: #fff; color: var(--teal); border-color: var(--teal-l); box-shadow: var(--sh-1); }
.btn--ghost:hover { background: var(--teal-ll); color: var(--teal-d); border-color: var(--teal); box-shadow: var(--sh-2); }
.btn--out { background: #fff; color: var(--mor); border-color: var(--line); box-shadow: var(--sh-1); }
.btn--out:hover { background: #fff; border-color: var(--teal); color: var(--teal-d); box-shadow: var(--sh-2); }
.btn--ghost::before, .btn--out::before { background: linear-gradient(100deg, rgba(23, 131, 145, 0), rgba(23, 131, 145, .10), rgba(23, 131, 145, 0)); }
.btn[disabled] { transform: none !important; box-shadow: none; }
.btn[disabled]::before { display: none; }
.link { position: relative; transition: color .2s; }
.link:hover { text-decoration: none; color: var(--teal-d); }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.link:hover::after { transform: scaleX(1); }

/* Efecto de onda al tocar (lo agrega main.js) */
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .6s ease-out forwards; z-index: 0; }
.btn--ghost .ripple, .btn--out .ripple, .chip .ripple, .pick .ripple, .scale .ripple, .pct .ripple { background: rgba(23, 131, 145, .22); }

/* Píldoras de selección */
.chip, .pick button, .scale button, .pct, .choice, .radio-list button, .weeknav button {
  position: relative; overflow: hidden;
  transition: transform .25s var(--spring), background .2s, border-color .2s, color .2s, box-shadow .25s;
}
.chip:hover, .pick button:hover, .scale button:hover, .pct:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--sh-1); }
.chip:active, .pick button:active, .scale button:active, .pct:active { transform: scale(.95); }
.chip.is-on { background: linear-gradient(135deg, var(--mor), #6b2a62); border-color: var(--mor); box-shadow: 0 8px 18px rgba(79, 26, 72, .25); animation: pop-in .35s var(--spring); }
.pick button.is-on, .scale button.is-on, .pct.is-on { background: linear-gradient(135deg, #1d97a6, var(--teal-d)); border-color: var(--teal); box-shadow: var(--sh-teal); animation: pop-in .35s var(--spring); }
.choice:hover, .radio-list button:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--sh-1); }
.choice.is-on, .radio-list button.is-on { box-shadow: 0 0 0 4px rgba(23, 131, 145, .12); }
.type.is-on { box-shadow: 0 0 0 5px rgba(23, 131, 145, .14), var(--sh-2); }
.type__ic { transition: transform .35s var(--spring); }
.type:hover .type__ic { transform: rotate(-8deg) scale(1.08); }
.sub__box { transition: background .2s, border-color .2s, transform .3s var(--spring); }
.sub__box.is-done { animation: pop-in .4s var(--spring); }

/* Campos */
.input, .textarea, .select, .search { transition: border-color .2s, box-shadow .2s; }
.input:focus, .textarea:focus, .select:focus, .search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(23, 131, 145, .14); }

/* Píldoras de estado */
.pill--bad i { animation: dot-blink 1.6s ease-in-out infinite; }
.pill--warn { background: #FFF1D6; }
.tag { background: var(--mor-ll); color: var(--mor); }

/* ─── Ventanas, avisos y panel de campana ───────────────────────────── */
.dlg { animation: fade-in .25s ease both; backdrop-filter: blur(3px); }
.dlg__card { animation: dlg-in .45s var(--spring) both; border-top: 6px solid var(--teal); }
.dlg__x { transition: transform .3s var(--spring), background .2s; }
.dlg__x:hover { transform: rotate(90deg); background: var(--rosa-l); color: var(--car); }
.toast { animation: toast-in .5s var(--spring) both; display: flex; align-items: center; gap: 10px; }
.toast--ok { background: linear-gradient(135deg, var(--teal), var(--teal-d)); }
.toast--bad { background: linear-gradient(135deg, var(--rosa), var(--car)); }
.notif-panel { animation: drop-in .35s var(--spring) both; transform-origin: top right; border-top: 5px solid var(--teal); }
.notif:hover { transform: translateX(4px); }
.notice { box-shadow: inset 0 0 0 1px rgba(249, 176, 59, .35); }
.notice--info { box-shadow: inset 0 0 0 1px rgba(23, 131, 145, .2); }
.empty svg { animation: float-b 4s ease-in-out infinite; }

/* ─── Entrada de pantalla (se activa al cambiar de pantalla) ─────────── */
.main.enter > * { animation: rise .55s var(--ease) both; }
.main.enter > *:nth-child(2) { animation-delay: .06s; }
.main.enter > *:nth-child(3) { animation-delay: .12s; }
.main.enter > *:nth-child(4) { animation-delay: .18s; }
.main.enter > *:nth-child(5) { animation-delay: .24s; }
.main.enter > *:nth-child(6) { animation-delay: .30s; }
.main.enter > *:nth-child(n+7) { animation-delay: .36s; }
.main.enter .grid > *, .main.enter .stats > *, .main.enter .kpis > * { animation: rise .5s var(--ease) both; }
.main.enter .grid > *:nth-child(2), .main.enter .stats > *:nth-child(2), .main.enter .kpis > *:nth-child(2) { animation-delay: .08s; }
.main.enter .grid > *:nth-child(3), .main.enter .stats > *:nth-child(3), .main.enter .kpis > *:nth-child(3) { animation-delay: .14s; }
.main.enter .grid > *:nth-child(4), .main.enter .stats > *:nth-child(4), .main.enter .kpis > *:nth-child(4) { animation-delay: .20s; }
.main.enter .grid > *:nth-child(n+5), .main.enter .kpis > *:nth-child(n+5) { animation-delay: .26s; }

/* Esqueleto con tono de marca */
.sk { background: #E3EDEE; }
.sk-hero { background: linear-gradient(120deg, #CFE3E5, #DDEBEC); }
.main .sk-wrap > .sk-row:first-child { background: linear-gradient(120deg, #CFE3E5, #E1EEEF); border-radius: 28px; padding: 30px 34px; }
.main .sk-wrap > .sk-row:first-child .sk { background: rgba(255, 255, 255, .55); }

/* ─── Móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .side { background: linear-gradient(90deg, #036870, #178391); box-shadow: 0 -8px 24px rgba(3, 104, 112, .25); border-top: 0; }
  .side::before { display: none; }
  .nav:hover { transform: none; }
  .nav.is-on::before { display: none; }
  .nav.is-on { background: #fff; color: var(--teal-d); }
  .topbar { padding: 22px 20px; border-radius: 22px; }
  .topbar__grow { flex: 1 1 calc(100% - 72px); }
  .topbar > .btn { flex: 1 1 auto; }
  .topbar::after { right: 10px; width: 100px; }
  .task:hover { border-left-width: 6px; }
}

/* ─── Animaciones ───────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pop-in { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(9deg); } 80% { transform: rotate(-5deg); } }
@keyframes count-pulse { 0% { box-shadow: 0 0 0 0 rgba(230, 41, 98, .55); } 70% { box-shadow: 0 0 0 9px rgba(230, 41, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 41, 98, 0); } }
@keyframes online { 0% { box-shadow: 0 0 0 0 rgba(43, 182, 115, .55); } 70% { box-shadow: 0 0 0 7px rgba(43, 182, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); } }
@keyframes here-ring { 0% { box-shadow: 0 0 0 0 rgba(196, 8, 71, .45); } 70% { box-shadow: 0 0 0 12px rgba(196, 8, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 8, 71, 0); } }
@keyframes glow-car { 0%, 100% { box-shadow: 0 14px 34px rgba(196, 8, 71, .12); } 50% { box-shadow: 0 14px 40px rgba(196, 8, 71, .26); } }
@keyframes dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes col-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bg-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 14px); } }
@keyframes float-b { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-4deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}