/* ===== Tokens (paleta Satlock del login actual) ===== */
:root {
  --naranja: #FF5E34;
  --naranja-2: #ef4f27;
  --text: #F2F6FC;
  --muted: #C3D0E2;
  --dim: #8397b2;
  --panel: rgba(8, 14, 24, .84);
  --line: rgba(255, 255, 255, .1);
  --field: rgba(255, 255, 255, .08);
  --field-bd: rgba(255, 255, 255, .2);
  --ring: rgba(255, 94, 52, .35);
  --error-bg: rgba(220, 53, 34, .16);
  --error-bd: rgba(255, 110, 90, .55);
  --ok-bg: rgba(46, 160, 98, .16);
  --ok-bd: rgba(90, 210, 140, .5);
  --ok: #3ddc84;
  --head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(.65, 0, .25, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  background: #08101c url('../imagenes/login_fondo.jpg') center / cover no-repeat;
  display: grid;
  grid-template-columns: minmax(400px, 460px) 1fr;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8, 16, 28, .9) 0%, rgba(8, 16, 28, 0) 55%),
    linear-gradient(90deg, rgba(8, 16, 28, .55) 0%, rgba(8, 16, 28, .05) 50%, rgba(8, 16, 28, .45) 100%);
}

/* ===== Panel de acceso (izquierda) ===== */
.panel {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  gap: 24px;
  padding: 34px 44px 26px;
  background: var(--panel);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--line);
  box-shadow: 30px 0 80px -40px rgba(0, 0, 0, .8);
}

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; flex-direction: column; gap: 6px; }
.brandlogo { width: 172px; height: auto; display: block; }
.brandtag {
  font-family: var(--head); font-weight: 500; font-size: 9.5px; line-height: 1;
  letter-spacing: .04em; color: var(--muted); white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 6px 10px 6px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  white-space: nowrap;
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 10px var(--naranja); animation: parpadeo 1.2s steps(2, end) infinite; }
.status.ok .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: none; }

.bay {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 0;
}

/* ===== Bóveda: formulario detrás de las puertas del contenedor ===== */
.vault { position: relative; width: 100%; max-width: 360px; }

.stage { transition: opacity .9s var(--ease-out) .7s, filter .9s var(--ease-out) .7s; }
.vault:not(.open) .stage { opacity: 0; filter: blur(4px); pointer-events: none; user-select: none; }

.doors {
  position: absolute;
  inset: -18px -16px;
  z-index: 5;
  display: flex;
  perspective: 1500px;
  border-radius: 6px;
  cursor: pointer;
}
.vault.open .doors { pointer-events: none; visibility: hidden; transition: visibility 0s 2.4s; }

.door {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .10) 0 2px,
      rgba(255, 255, 255, 0) 2px 9px,
      rgba(0, 0, 0, .22) 9px 12px,
      rgba(0, 0, 0, 0) 12px 18px),
    linear-gradient(180deg, #e8603a 0%, #c94a28 55%, #a63a1c 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 14px 0 rgba(0, 0, 0, .18), inset 0 -14px 0 rgba(0, 0, 0, .22);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 1.1s var(--ease), opacity .3s ease;
  will-change: transform;
}
.door.l { transform-origin: 0 50%; border-radius: 6px 0 0 6px; }
.door.r { transform-origin: 100% 50%; border-radius: 0 6px 6px 0; }
.door.l::after, .door.r::after { /* sombreado del batiente */
  content: ""; position: absolute; top: 0; bottom: 0; width: 18px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
}
.door.l::after { right: 0; transform: scaleX(-1); }
.door.r::after { left: 0; }

.vault.open .door { transition: transform 1.7s var(--ease), opacity .6s ease 1.15s; opacity: 0; }
/* Sellado al enviar: aparece ya cerrado, sin animar el cierre */
.vault.sealing .door, .vault.sealing .cam, .vault.sealing .unit { transition: opacity .25s ease; }
.vault.sealing .stage { transition: opacity .25s ease, filter .25s ease; }
.vault.open .door.l { transform: rotateY(-104deg); }
.vault.open .door.r { transform: rotateY(104deg); }

/* Barras de cierre y manijas */
.rod {
  position: absolute; top: 5%; bottom: 5%; width: 7px; margin-left: -3.5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6f7a88, #e9eef4 45%, #8b96a5);
  box-shadow: 2px 0 4px rgba(0, 0, 0, .35);
}
.rod::before, .rod::after { /* abrazaderas superior e inferior */
  content: ""; position: absolute; left: -5px; right: -5px; height: 12px;
  border-radius: 3px; background: #2a2f37; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}
.rod::before { top: 8%; }
.rod::after { bottom: 8%; }
.door.l .rod:nth-of-type(1) { left: 26%; }
.door.l .rod:nth-of-type(2) { left: 62%; }
.door.r .rod:nth-of-type(1) { left: 38%; }
.door.r .rod:nth-of-type(2) { left: 74%; }

.cam {
  position: absolute; top: 56%; left: 1px;
  width: 34px; height: 8px; border-radius: 4px;
  background: linear-gradient(180deg, #e9eef4, #7d8896);
  transform-origin: 3px 50%;
  transform: rotate(0deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
  transition: transform .8s cubic-bezier(.3, 1.4, .5, 1);
}
.vault.released .cam { transform: rotate(-80deg); }

.stencil {
  position: absolute; top: 26px; right: 12px;
  font-family: var(--mono); font-weight: 700; font-size: 12px; line-height: 1.35;
  letter-spacing: .08em; color: rgba(255, 255, 255, .78); text-align: right;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.stencil small { display: block; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.plate {
  position: absolute; left: 14px; bottom: 26px;
  font-family: var(--mono); font-size: 9px; line-height: 1.4; color: rgba(255, 255, 255, .6);
  padding: 6px 8px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px;
  background: rgba(0, 0, 0, .12);
}

/* ===== Unidad USAT-I 4G sobre la junta de las puertas ===== */
.unit {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  width: 66px; height: 132px;
  margin: -66px 0 0 -33px;
  padding: 0; border: 0; background: transparent;
  cursor: grab; touch-action: none;
  transform: translateY(calc(var(--y, 0) * -1px));
  transition: transform 1.1s var(--ease), opacity .7s ease .35s;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.unit:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.unit svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); }
.vault.dragging .unit { transition: none; cursor: grabbing; }
.vault.released .unit { transform: translateY(-120px) rotate(-6deg); opacity: 0; pointer-events: none; }
.vault.manual:not(.released) .unit { animation: invitar 2.6s ease-in-out 1s infinite; }
@keyframes invitar {
  0%, 72%, 100% { transform: translateY(0); }
  82% { transform: translateY(-12px); }
  92% { transform: translateY(-2px); }
}

.led { fill: var(--naranja); animation: parpadeo 1.2s steps(2, end) infinite; }
.led.b { animation-delay: .6s; }
.vault.verified .led { fill: var(--ok); animation: none; }
@keyframes parpadeo { 50% { opacity: .25; } }

.scan { opacity: 0; }
.vault.verifying .scan { animation: escanear 1.4s var(--ease) forwards; }
.vault.sealing.verifying .scan { animation-iteration-count: infinite; }
@keyframes escanear {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(112px); }
}

/* ===== Controles de sello (bloquear / desbloquear) ===== */
.dock { width: 100%; max-width: 360px; }
.seal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 40px;
}
.seal-toggle, .open-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--naranja); border-radius: 999px;
  background: rgba(255, 94, 52, .16); color: #fff;
  font-family: var(--head); font-weight: 600; letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, opacity .2s, transform .12s;
  animation: halo 1.8s ease-out infinite;
}
.seal-toggle { height: 44px; padding: 0 16px 0 13px; font-size: 13px; }
.open-cta { height: 48px; padding: 0 22px 0 18px; font-size: 14px; background: linear-gradient(180deg, var(--naranja), var(--naranja-2)); }
.seal-toggle:hover { background: var(--naranja); }
.open-cta:hover { filter: brightness(1.08); }
.seal-toggle:active, .open-cta:active { transform: scale(.97); }
.seal-toggle:focus-visible, .open-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.seal-toggle:disabled { opacity: .45; cursor: progress; animation: none; }
/* Abierto: el halo avisa unas veces y se detiene para no distraer mientras se escribe */
.seal-toggle:not(.is-sealed) { animation-iteration-count: 4; }
.seal-toggle .ico-unlock { display: none; }
.seal-toggle.is-sealed .ico-unlock { display: inline; }
.seal-toggle.is-sealed .ico-lock { display: none; }
@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgba(255, 94, 52, .7); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(255, 94, 52, 0); }
}

.hint {
  position: absolute; left: 50%; bottom: -96px; z-index: 6;
  transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .4s, transform .4s var(--ease-out);
}
.vault.manual:not(.released) .hint { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.vault.manual:not(.released) { margin-bottom: 96px; }

/* ===== Tarjeta (mismos campos del login actual) ===== */
.card { width: 100%; }
.vault.open .card:not([hidden]) > * { animation: entrar .45s var(--ease-out) both; }
.card > *:nth-child(1) { animation-delay: 1.00s !important; }
.card > *:nth-child(2) { animation-delay: 1.07s !important; }
.card > *:nth-child(3) { animation-delay: 1.14s !important; }
.card > *:nth-child(4) { animation-delay: 1.21s !important; }
.card > *:nth-child(5) { animation-delay: 1.28s !important; }
.card > *:nth-child(6) { animation-delay: 1.35s !important; }
.card > *:nth-child(7) { animation-delay: 1.42s !important; }
.card > *:nth-child(8) { animation-delay: 1.49s !important; }
.card.swap > * { animation-delay: 0s !important; animation-duration: .3s !important; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }

.card.ingreso:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.card.ingreso .sub { margin: 0; }
.ingreso-ico {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%;
  color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-bd);
}

.hi { font-family: var(--head); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 0 0 6px; color: var(--text); }
.hi b { color: var(--naranja); font-weight: 700; }
.sub { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 24px; }

.alert {
  border-radius: 11px; padding: 11px 14px; margin: 0 0 18px;
  font-size: 13px; line-height: 1.5;
  background: var(--error-bg); border: 1px solid var(--error-bd); color: #ffe3dd;
}
.alert strong { display: block; font-family: var(--head); font-weight: 600; margin-bottom: 2px; color: #fff; }
.alert.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: #dcf7e6; }

.field { margin-bottom: 16px; }
label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.in { position: relative; }
.in input {
  width: 100%; height: 50px;
  background: var(--field); border: 1px solid var(--field-bd); border-radius: 11px;
  padding: 0 15px; color: var(--text); font-size: 16px; font-family: var(--body);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.in.with-eye input { padding-right: 50px; }
.in input::placeholder { color: var(--dim); }
.in input:focus { outline: none; border-color: var(--naranja); background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 4px var(--ring); }
.in input.invalid { border-color: var(--error-bd); animation: temblor .35s; }
@keyframes temblor { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.in input.otp { font-family: var(--head); font-size: 22px; letter-spacing: .4em; text-align: center; }
.field-error { margin: 6px 0 0; font-size: 12px; color: #ffb4a6; }

.in .eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); display: grid; place-items: center; border-radius: 9px;
}
.in .eye:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.in .eye:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.in .eye .ico-hide { display: none; }
.in .eye.on .ico-show { display: none; }
.in .eye.on .ico-hide { display: inline; }

.btns { display: flex; gap: 11px; margin: 22px 0 16px; }
.btn {
  flex: 1; height: 48px; border: 0; border-radius: 11px; cursor: pointer;
  font-family: var(--head); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: filter .16s, transform .12s, opacity .16s, background .16s, color .16s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn.primary { flex: 1.6; background: linear-gradient(180deg, var(--naranja), var(--naranja-2)); color: #fff; box-shadow: 0 12px 24px -10px rgba(255, 94, 52, .8); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: rgba(255, 255, 255, .06); border: 1px solid var(--field-bd); color: var(--muted); }
.btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: progress; opacity: .7; }
.btn .spin {
  width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff; border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.links { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.links a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.links a:focus-visible, .flags a:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }
.links a:hover { color: var(--naranja); }
.links a.d2d { font-weight: 600; color: var(--naranja); }

.msg-body { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 22px; }

/* ===== Pie del panel: apps ===== */
.panel-foot { border-top: 1px solid var(--line); padding-top: 16px; }
.foot-row { display: flex; flex-direction: column; gap: 10px; }
.foot-lbl { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.chips { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; }
.chip {
  font-family: var(--head); font-weight: 600; font-size: 10.5px; letter-spacing: .02em; white-space: nowrap;
  min-height: 36px; padding: 6px 4px; border-radius: 9px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--field-bd);
  color: #dfe8f5; cursor: pointer; transition: background .16s, border-color .16s;
}
.chip:hover { border-color: var(--naranja); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.chip.on { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.stores {
  margin-top: 12px; padding: 12px; border-radius: 11px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.stores p { margin: 0; font-family: var(--head); font-weight: 600; font-size: 13px; }
.stores .store-row { display: flex; gap: 6px; }
.stores a {
  display: block; width: 78px; height: 32px; border-radius: 6px;
  background-size: 78px 32px; background-repeat: no-repeat; transition: transform .16s;
}
.stores a:hover { transform: translateY(-2px); }
.stores .button_google { background-image: url('../ico/google-play-icon.png'); }
.stores .button_apple { background-image: url('../ico/apple-store.png'); }
.stores .button_huawei { background-image: url('../ico/huawei-store.png'); }
.copy { margin: 14px 0 0; font-size: 11px; color: var(--dim); display: flex; justify-content: space-between; gap: 10px; }
.copy a { color: var(--dim); text-decoration: none; }
.copy a:hover { color: var(--naranja); }

/* ===== Hero (derecha) ===== */
.hero {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px 56px 46px;
  min-width: 0;
}
.hero-top { display: flex; justify-content: flex-end; }
.live {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(8, 16, 28, .55); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.live b { color: var(--text); font-weight: 600; font-family: var(--head); }
.live .pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.live .pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); animation: pulso 2s ease-out infinite; }
@keyframes pulso { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }

.headline { max-width: 640px; }
.headline h2 { max-width: 15ch; }
.headline .eyebrow { max-width: none; font-size: 12px; line-height: 1.4; color: var(--naranja); text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .85); font-family: var(--head); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--naranja); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--naranja); }
.headline h2 {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(32px, 3.6vw, 54px); line-height: 1.05;
  margin: 0; text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .5);
}
.headline h2 b { color: var(--naranja); font-weight: 700; }
.headline p {
  font-size: 17px; line-height: 1.6; color: var(--muted);
  margin: 18px 0 0; max-width: 42ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.flags { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 640px; }
.flags .lbl { font-size: 12px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-right: 6px; font-weight: 600; }
.flags a { display: inline-flex; padding: 9px; margin: -9px; transition: transform .18s; }
.flags a:hover { transform: translateY(-2px); }
.flags img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); }


/* ===== Responsive ===== */
@media (max-width: 960px) {
  body { grid-template-columns: 1fr; }
  .panel { min-height: auto; border-right: 0; padding: 26px 24px 22px; }
  .bay { overflow-x: clip; }
  .hero { padding: 36px 24px 70px; gap: 24px; }
  .hero-top { display: none; }
  .headline { max-width: none; }
}
@media (max-width: 420px) {
  .panel { padding: 22px 16px 20px; }
  .hero { padding: 30px 16px 70px; }
  .brandlogo { width: 140px; }
  .brandtag { font-size: 8px; }
  .chips { gap: 4px; }
  .chip { font-size: 9.5px; padding: 6px 2px; }
  .status { font-size: 10px; letter-spacing: .1em; }
  .doors { inset: -14px -8px; }
  .btns { flex-wrap: wrap; }
}
/* Movimiento reducido: misma secuencia y tiempos, pero con fundidos en vez de giros y desplazamientos */
html.suave .vault.open .door.l, html.suave .vault.open .door.r { transform: none; }
html.suave .vault.open .door { transition: opacity 1.4s ease .2s; }
html.suave .vault.released .unit { transform: none; }
html.suave .vault.manual:not(.released) .unit { animation: none; }
html.suave .vault.verifying .scan { animation-name: escanearSuave; }
@keyframes escanearSuave { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }
html.suave .in input.invalid { animation: none; }
html.suave .card > * { animation-name: aparecer !important; }
@keyframes aparecer { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .chevrons, .live .pulse::after { animation: none; }
}