*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=EB+Garamond&display=swap');

html, body {
  font-family: 'EB Garamond', serif;
  overflow-x: hidden;
  background-color: #003057 !important;
  color: white;
  margin: 0;
  padding: 0;
  text-align: center;
}

.navbar {
  background-color : #00446a !important;
  border-bottom: 1.5px solid #f6cd4c;
  font-family: 'IM Fell English SC', serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
  font-size: 1.5rem;
  color: #f6cd4c;
  background-color: transparent;
  letter-spacing: 1px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.navbar .nav-link {
  color: #f6cd4c !important;
  background-color: #00446a;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  border-radius: 5px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #00446a !important;
  background-color: #f6cd4c !important;
  border-bottom: 1px solid #eedd99;
}


.header {
  text-align: center;
  background-color: rgba(220, 214, 198, 0.8);
  padding: 2rem 1rem;
  border: 2px solid #f6cd4c;
  border-radius: 10px;
  margin: 2rem auto;
  max-width: 800px;
}

.logo {
  width: 100px;
  height: auto;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1rem;
}

.header__title {
  font-family: 'EB Garamond', serif;
  font-size: 2.8rem;
  letter-spacing: 2px;
  margin: 1rem 0 0.5rem;
  color: #00446a;
  word-break: break-word;
  hyphens: auto;
}

.header__subtitle {
  font-style: italic;
  color: #003b54;
  margin-bottom: 1rem;
}

.header__call {
  font-weight: bold;
  font-size: 1.6rem;
  color: #003b54;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}


.header__text {
  font-size:0.95rem;
  padding: 0 1rem;
  color: #003b54;
  margin-top: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}

/* Controla el tamaño de la ilustración del footer */
.footer__img {
  display: block;
  margin: 0 auto 1rem;
  max-width: 280px;       /* ancho máximo */
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--gold);
  object-fit: contain;    /* mantiene proporción */
}


.footer p {
  margin: 0.3rem 0;
  font-size: 1rem;
}

.footer__img {
  max-width: 120px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}


.section {
  text-align: center;
  color: #00446a;
  background-color: rgba(255, 248, 230, 0.85);
  border: 1px solid #d8c89a;
  padding: 2rem 1.5rem;
  margin: 2rem auto;
  border-radius: 10px;
  max-width: 800px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}


.section__title {
  font-family: 'IM Fell English SC', serif;
  font-size: clamp(1.5rem, 6vw, 2rem);
  margin-bottom: 1rem;
  color: #0085ad;
}

/* Manteniendo el resto del código sin cambios */
.section__title,
.section__text {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.section__title,
.section__text,
.btn-cta {
  color : #00446a;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  max-width: 90%;
}
.section__text {
  color: #0085ad; /* un dorado visible */
  transition: color 0.3s ease;
}

.section__text:hover {
  color: #ffffff;
}


.prologue p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
  text-align: justify;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.prologue {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#datos-bancarios {
  background-color: #f1eddf;
  color: #003c5c;
  padding: 2rem;
  border-radius: 10px;
  margin-top: 2rem;
}
#datos-bancarios h2 {
  color: #003c5c;
}
#datos-bancarios p {
  color: #00446a;
}

#datos p {
  color: #00446a; /* Azul oscuro */
}

.bank-data {
  list-style: none;
  padding-left: 0;
  font-size: 1.1rem;
  color: #ffc107;
  margin-top: 1rem;
}
.bank-data li {
  color: #ffc107;
  margin-bottom: 0.4rem;
}

.capitulo p {
  margin-bottom: 1.8rem; /* más espacio entre párrafos */
}

.capitulo p {
  text-indent: 2em;
}


.section__title {
  color: #00446a;
}

.cta-button {
  margin-top: 2rem; /* espacio superior */
  margin-bottom: 2rem; /* opcional */
  background-color: #ffc107;
  color: #000;
  border: none;
  padding: 0.5rem 1.2rem;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
  background-color: #fff;
  color: #092665;
}

/* Corrección para eliminar el subrayado en los botones */
.cta-button,
.btn-cta {
  text-decoration: none; /* Elimina el subrayado */
}

/* Corrección para hover en botones */
.cta-button:hover,
.btn-cta:hover {
  text-decoration: none; /* Asegura que no aparezca subrayado al pasar el mouse */
}

/* 🔒 Corrige el subrayado no deseado en botones tipo <a> */
a.btn,
a.btn:hover,
.btn,
.btn:hover,
.btn-yellow,
.btn-yellow:hover,
.btn-lectura,
.btn-lectura:hover,
.cta-button,
.cta-button:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}

.btn-yellow {
  background-color: #ffc107;
  color: #000;
}
.btn-yellow:hover {
  background-color: #eece6e;
  color: #00446a;
}

p {
  margin: 0 auto;
  max-width: 100%;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin: 0.5rem 0;
  color: #333;
  border: 1px solid #d8c89a;
  border-radius: 5px;
  background-color: #fff;
}

.lista-proyectos {
  list-style: disc;
  list-style-position: inside;
  padding-left: 0;
  margin: 0 auto;
  text-align: left;
  display: inline-block;
  color: #00446a;
  font-size: 1.1rem;
  line-height: 1.6;
}

.lista-proyectos li {
  background: none;
  border: none;
  color: inherit;
  margin: 0.3rem 0;
}

.project-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.project-box {
  flex: 1 1 300px;
  max-width: 100%;
}


.form {
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.form label {
  display: block;
  margin: 1rem 0 0.3rem;
  color: #0075b3;
  ;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d8c89a;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.form input[type="submit"]:hover {
  background-color: #e0a800;
  color: #0075b3;
}
.form input[type="submit"] {
  font-weight: bold;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.fade-in {
  animation: fadeIn 2s ease-in-out;
}

.medusa-img {
  animation: flotar 5s ease-in-out infinite;
}

.capitulo h3 {
  color: #00446a; /* Azul oscuro bien legible */
}

.capitulo-texto {
  font-family: 'EB Garamond', serif;
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 700px;
  margin: 2rem auto;
  padding: 1rem;
  color: #f9f0da;
}

.capitulo-container {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  color: #092665;
  line-height: 1.7;
  max-width: 800px;
  width: 90%;
  text-align: justify;
}

.capitulo-titulo {
  color: #00446a;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #f6cd4c;
  padding-bottom: 0.5rem;
  text-align: left;
}

.capitulo-container h2 {
  color: #00446a;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #f6cd4c;
  padding-bottom: 0.5rem;
}

.btn-lectura {
  background-color: #f6cd4c;
  color: #00446a;
  font-weight: bold;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.btn-lectura:hover {
  background-color: #ffe88a;
  color: #002f4c;
}

.grimorio-bg {
  background-color: #f9f0da;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  margin-bottom: 3rem;
}

.ficha-nombre {
  font-family: 'Georgia', serif;
  color: #092665;
  font-size: 2rem;
}

.ficha-rol {
  color: #5a3e36;
  font-weight: 600;
}

.ficha-frase {
  font-style: italic;
  color: #444;
  margin: 1rem 0;
}

.ficha-detalle li {
  margin-bottom: 0.5rem;
}

.sombra-ficha {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border: 2px solid #f6cd4c;
  border-radius: 10px;
}

.btn-magico {
  background: linear-gradient(135deg, #f6cd4c, #f6cd4c);
  border: none;
  color: #00446a;
  font-weight: bold;
  padding: 12px 20px;
  font-size: 1.1rem;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(205, 135, 50, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-magico:hover {
  transform: scale(1.05);
  background-color: #f6cd4c;
  box-shadow: #f6cd4c;
  size-adjust: 1rem;
}

.mensaje-magico {
  font-family: 'Georgia', serif;
  color: #f6cd4c;
  font-size: 0.95rem;
}

.portal-secreto {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.glifo-secreto {
  font-size: 2rem;
  text-decoration: none;
  color: #f1e0b0;
  transition: transform 0.3s ease;
}

.glifo-secreto:hover {
  transform: scale(1.3);
  text-shadow: 0 0 8px gold;
}

.glifo-secreto {
  color: #00446a; /* azul oscuro por ejemplo */
}

.criaturas {
  background:linear-gradient(180deg,#1a3566,#112549);
}
/* antes: .thumb { ... } */
.cr-thumb{
  aspect-ratio: 3/4;           /* si Safari viejo, agrego min-height abajo */
  border-bottom:1px solid #d2bd90;
  border-radius:14px 14px 0 0;
  background:#e9dfc3 center/cover no-repeat;  /* fallback */
  min-height: 220px;            /* compat si aspect-ratio no aplica */
}

:root{
  --azul:#0E3A59;           /* fondo navbar */
  --azul-osc:#00446a;
  --amarillo:#f6cd4c;     /* botones */
  --texto-claro:#fff;
  --texto-osc:#00446a;
}

/* HEADER / NAV */
.site-header{background:var(--azul); color:var(--texto-claro); box-shadow:0 1px 0 rgba(255,255,255,.08) inset;}
.site-header .nav{max-width:1100px; margin:auto; padding:.8rem 1rem; display:flex; align-items:center; gap:1rem;}
.site-header .brand{font-weight:800; letter-spacing:.5px;}
.site-header nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center;}
.site-header nav a{color:var(--texto-claro); text-decoration:none; font-weight:600;}
.site-header nav a:hover{opacity:.9; text-decoration:underline;}
/* botón amarillo reutilizable */
.btn-amarillo{background:var(--amarillo); color:var(--texto-osc); padding:.4rem .8rem; border-radius:.5rem; font-weight:800; display:inline-block;}
.btn-amarillo:hover{filter:brightness(1.05);}

/* ocultar checkbox/hamburger “crudo” si lo hay */
.site-header input[type="checkbox"]{display:none;}

@media (max-width:768px){
  .site-header nav ul{flex-wrap:wrap; gap:.6rem;}
}

/* FOOTER */
.site-footer { background:#003057; color:#fff; padding:24px 0; }
.site-footer a { color:#ffd24a; text-decoration:none; }
.site-footer .footer-logo { max-width:160px; display:block; margin:0 auto 12px; }
.site-footer .footer-copy { opacity:.9; font-size:.95rem; }


 
.cr-thumb{
  aspect-ratio:3/4;
  border-bottom:1px solid #d2bd90;
  border-radius:14px 14px 0 0;
  background:#e9dfc3 center/cover no-repeat;
}

.page-criaturas .thumb{
  background:#e9dfc3 center/cover no-repeat !important;
}


@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}


.thumb {
  display: block;
  margin: 1rem auto;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.hero-img {
  max-width: 360px;
  width: 100%;
  height: auto;
  margin: 1.5rem auto;
  display: block;
  border-radius: 14px;
  border: 3px solid #eecb94; 
  box-shadow:
    0 0 15px rgba(255, 215, 0, 0.6),       
    0 0 8px rgba(255, 223, 100, 0.5),     
    inset 0 0 4px rgba(255, 255, 200, 0.3); 
  background-color: rgba(255, 255, 230, 0.05);
}

/* --- Grupo de checks --- */
.form__legend {
  margin: 0 0 8px 0;
  font-weight: 600;
}

/* Quita rarezas del fieldset por defecto */
.form__options {
  border: 0;
  margin: 0;
  padding: 0;

  /* grid fluido */
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 columnas en pantallas medianas+ */
  gap: 12px 24px;
}

/* Cada opción: checkbox + texto alineados y con buen área táctil */
.form__options > label {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  cursor: pointer;

  /* área táctil cómoda en móvil */
  padding: 8px 6px;
  border-radius: 6px;
}

.form__options input[type="checkbox"] {
  flex: 0 0 auto;     /* no se estira */
  width: 18px;
  height: 18px;
}

/* Mobile-first: 1 columna en celular */
@media (max-width: 600px) {
  .form__options {
    grid-template-columns: 1fr;
  }
}

/* Por si algún estilo heredado fija anchos */
.form__options, .form__options * {
  max-width: 100%;
}


@keyframes aura {
  0%, 100% {
    box-shadow:
      0 0 15px rgba(255, 215, 0, 0.6),
      0 0 8px rgba(255, 223, 100, 0.5),
      inset 0 0 4px rgba(255, 255, 200, 0.3);
  }
  50% {
    box-shadow:
      0 0 22px rgba(255, 230, 120, 0.8),
      0 0 12px rgba(255, 240, 160, 0.6),
      inset 0 0 6px rgba(255, 255, 200, 0.5);
  }
}

.hero-img {
  animation: aura 6s ease-in-out infinite;
}

@media (max-width: 768px) {
  .hero-img {
    max-width: 240px;
  }
}
@media (max-width: 768px) {
  .section__title, 
  .section__text {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .footer__img {
    display: block;          /* centra la imagen */
    margin: 0 auto 0.4rem;   /* espacio inferior para que respiren los textos */
    max-width: 90px;         /* límite de tamaño, ajustalo si querés más grande */
    height: auto;            /* mantiene proporción */
    border-radius: 8px;      /* opcional: esquinas suaves */
    object-fit: contain;     /* evita deformación */
  }
  
  .footer p {
    font-size: 0.9rem;
    margin: 0;               /* quita exceso de espacio entre párrafos */
    color: #e9f2ff;          /* mantiene la legibilidad en fondo oscuro */
  }
}

@media (max-width: 576px) {
  .project-box {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .lista-proyectos li {
    font-size: 1rem;
  }
}

.btn-cta {
  width: 100%;
  max-width: 280px;
}


.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


img {
  max-width: 100%;
  height: auto;
}

@keyframes flotar {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes colorchange {
  0% {
    background: radial-gradient(circle, rgba(0, 255, 255, 0.7) 0%, rgba(0, 100, 255, 0.3) 70%);
  }
  25% {
    background: radial-gradient(circle, rgba(0, 255, 150, 0.7) 0%, rgba(0, 100, 200, 0.3) 70%);
  }
  50% {
    background: radial-gradient(circle, rgba(255, 0, 255, 0.7) 0%, rgba(200, 0, 200, 0.3) 70%);
  }
  75% {
    background: radial-gradient(circle, rgba(255, 255, 0, 0.7) 0%, rgba(200, 200, 0, 0.3) 70%);
  }
  100% {
    background: radial-gradient(circle, rgba(0, 255, 255, 0.7) 0%, rgba(0, 100, 255, 0.3) 70%);
  }
}
@media (max-width: 768px) {
  .header {
    padding: 1.5rem 1rem;
    margin: 1rem;
  }

  .header__title {
    font-size: 2rem;
  }

  .header__subtitle {
    font-size: 1rem;
  }

  .header__call {
    font-size: 1.2rem;
  }

  .section {
    padding: 1.5rem 1rem;
    margin: 1rem;
  }

  .section__title {
    font-size: 1.5rem;
  }

  .cta-button,
  .btn-cta {
    width: 100%;
    font-size: 1rem;
    padding: 0.75rem;
  }

  input,
  textarea {
    font-size: 1rem;
    width: 100%;
    padding: 0.75rem;
  }

  p {
    font-size: 1rem;
    padding: 0.5rem;
  }

  .navbar .nav-link {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }

  .navbar-brand {
    font-size: 1.2rem;
  }

  .thumb {
    max-width: 100%;
  }

  form {
    padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .project-container {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1.5rem;
  }

  .project-box {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  .lista-proyectos {
    font-size: 1rem;
    text-align: center;
    padding: 0 1rem;
  }

  .lista-proyectos li {
    text-align: left;
    padding-left: 0.8rem;
  }

  .medusa-wrapper {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .medusa-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
  }  
}

.section__title,
.section__text {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
/* --- Animaciones base --- */
@keyframes flotar {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.02); }
}
@keyframes brillar {
  0%,100% { opacity: .15; filter: blur(14px); }
  50%     { opacity: .35; filter: blur(18px); }
}

/* --- Carta viva --- */
.card {
  position: relative;
  isolation: isolate;
  transform-origin: 50% 60%;
  animation: flotar 7s ease-in-out infinite;
  transition: transform .35s ease, box-shadow .35s ease;
}
.card::after{
  /* aura respirante suave */
  content:"";
  position:absolute; inset:12px 10px 18px;
  border-radius: 14px;
  z-index:-1;
  opacity:.2;
  animation: brillar 6.5s ease-in-out infinite;
}

/* Brillo al pasar el mouse (un poquito más intenso) */
.card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

/* --- Thumb con leve shimmer acuático --- */
.thumb {
  position: relative;
  overflow: hidden;
}
.thumb::before{
  /* reflejo que se mueve muy lento, como agua/luz */
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(120% 60% at 10% 10%, rgba(255,255,255,.18) 0%, transparent 60%)
              ,radial-gradient(90% 40% at 80% 0%, rgba(255,255,255,.12) 0%, transparent 60%);
  transform: translateX(-6%) translateY(-4%);
  animation: shimmer 18s linear infinite;
  pointer-events:none;
}
@keyframes shimmer {
  0%   { transform: translateX(-6%) translateY(-4%) rotate(0deg);   }
  50%  { transform: translateX(8%)  translateY(2%)  rotate(180deg); }
  100% { transform: translateX(-6%) translateY(-4%) rotate(360deg); }
}

/* --- Auras por elemento (el color del resplandor) --- */
.card.el-fuego::after    { background: radial-gradient(60% 60% at 50% 50%, rgba(255,120,40,.35), transparent 70%); }
.card.el-agua::after     { background: radial-gradient(60% 60% at 50% 50%, rgba(80,180,255,.35), transparent 70%); }
.card.el-madera::after   { background: radial-gradient(60% 60% at 50% 50%, rgba(90,200,140,.35), transparent 70%); }
.card.el-tierra::after   { background: radial-gradient(60% 60% at 50% 50%, rgba(200,160,80,.35), transparent 70%); }
.card.el-híbridos::after { background: radial-gradient(60% 60% at 50% 50%, rgba(180,120,220,.35), transparent 70%); }
.card.el-metal::after    { background: radial-gradient(60% 60% at 50% 50%, rgba(140,180,220,.35), transparent 70%); }

/* Accesibilidad: si el usuario prefiere menos movimiento, desactivamos animaciones */
@media (prefers-reduced-motion: reduce) {
  .card, .card::after, .thumb::before { animation: none !important; }
  .card:hover { transform: none; }
}

/* Animación de aparición */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Flote sutil para las tarjetas */
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.grid .card {
  opacity: 0;                       /* arranca oculta, la mostramos con JS */
  transform: translateY(10px) scale(.98);
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform, opacity;
}

/* se aplica al revelar */
.card.reveal {
  animation: fadeUp .45s ease forwards; /* forwards = mantiene el estado final */
}

/* flote permanente MUY sutil para el thumbnail (no marea) */
.thumb {
  animation: floatY 6s ease-in-out infinite;
}

/* hover agradable */
.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 6px 22px rgba(0,0,0,.25), 0 1px 0 #d2bd90 inset;
}

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .thumb { animation: none; }
  .grid .card { transition: none; }
  .card.reveal { animation: none; opacity: 1; transform: none; }
}