/* Barrido · Moxen — los estilos del efecto y de la demostración. */
:root {
  --ba-fondo: #0a0a0a;
  --ba-texto: #f4f4f4;
  --ba-suave: rgba(255, 255, 255, .5);
  --ba-tenue: rgba(255, 255, 255, .26);
  --ba-trazo: rgba(255, 255, 255, .62);
  /* las tres franjas, de abajo arriba; la última es la del rótulo */
  --ba-franja-1: #1f1f1f;
  --ba-franja-2: #6a6a6a;
  --ba-franja-3: #f4f4f4;
  --ba-rotulo: #0a0a0a;
  --ba-inclina: 14deg;          /* la diagonal de las franjas */
}
:root[data-tema="claro"] {
  --ba-fondo: #eeeeee;
  --ba-texto: #0a0a0a;
  --ba-suave: rgba(0, 0, 0, .5);
  --ba-tenue: rgba(0, 0, 0, .28);
  --ba-trazo: rgba(0, 0, 0, .66);
  --ba-franja-1: #d2d2d2;
  --ba-franja-2: #8c8c8c;
  --ba-franja-3: #0a0a0a;
  --ba-rotulo: #f4f4f4;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ba-fondo); color: var(--ba-texto); overflow: hidden; }
body { font-family: "General Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── el efecto ─────────────────────────────────────────────────────── */
/* Cada franja es más ancha que la pantalla y está inclinada: así sus
   bordes son diagonales y, puesta en su sitio, la cubre entera aunque
   se incline. Se inclina y se mueve desde la esquina de arriba a la
   izquierda de la pantalla (que en la franja está a 30vh y 10vh). */
.ba-barrido { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.ba-barrido.ba-pasando { pointer-events: auto; }
.ba-franja {
  position: absolute; top: -10vh; left: -30vh; width: calc(100vw + 60vh); height: 120vh;
  transform-origin: 30vh 10vh; transform: translateX(calc(-100vw - 60vh)); overflow: hidden;
  will-change: transform;
}
.ba-franja:nth-child(1) { background: var(--ba-franja-1); }
.ba-franja:nth-child(2) { background: var(--ba-franja-2); }
.ba-franja:nth-child(3) { background: var(--ba-franja-3); color: var(--ba-rotulo); }
/* El rótulo ocupa la pantalla y deshace el movimiento de su franja
   (barrido.js le da la animación contraria): se queda quieto y la franja
   lo destapa y lo tapa al pasar, como una máscara. */
.ba-rotulo {
  position: absolute; left: 30vh; top: 10vh; width: 100vw; height: 100vh; transform-origin: 0 0;
  display: grid; place-items: center; will-change: transform;
}
.ba-rotulo span {
  display: flex; overflow: hidden; padding: 0 .04em .08em;
  font-size: clamp(4rem, 15vw, 13rem); font-weight: 600; letter-spacing: -.06em; line-height: 1;
}
.ba-rotulo i { display: block; font-style: normal; will-change: transform; }

/* ── el sitio ──────────────────────────────────────────────────────── */
.ba-sitio { position: relative; height: 100%; }
.ba-cabeza {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: clamp(1.1rem, 3.5vw, 2.4rem) clamp(1rem, 5vw, 4rem);
}
.ba-marca { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-suave); }
.ba-menu { display: flex; gap: clamp(.2rem, 1.2vw, 1rem); }
.ba-menu button {
  position: relative; padding: .45rem .7rem; border: 0; border-radius: 99px; background: none; cursor: pointer;
  color: var(--ba-suave); font: inherit; font-size: .92rem; transition: color .3s;
}
.ba-menu button:hover, .ba-menu [aria-current] { color: var(--ba-texto); }
.ba-menu [aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: .05rem; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.ba-menu button:focus-visible { outline: 2px solid var(--ba-suave); outline-offset: 2px; }

/* una vista: el número arriba, la palabra enorme abajo y la lámina a la derecha */
.ba-vista {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto auto;
  column-gap: 4vw; padding: clamp(5rem, 14vh, 8rem) clamp(1rem, 5vw, 4rem) clamp(2rem, 7vh, 4rem);
}
.ba-vista[hidden] { display: none; }
.ba-num { grid-column: 1; grid-row: 1; align-self: start; font-size: .85rem; color: var(--ba-suave); font-variant-numeric: tabular-nums; }
.ba-palabra { grid-column: 1; grid-row: 2; margin: 0; overflow: hidden; font-size: clamp(4.4rem, 17vw, 15rem); font-weight: 500; letter-spacing: -.065em; line-height: .92; padding-bottom: .16em; margin-bottom: -.1em; }
.ba-palabra span { display: block; }
.ba-frase { grid-column: 1; grid-row: 3; margin: 1.2rem 0 0; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--ba-suave); }
.ba-lamina { grid-column: 2; grid-row: 1 / 4; align-self: center; width: min(40vw, 62vh); height: auto; overflow: visible; }
.ba-lamina * { fill: none; stroke: var(--ba-trazo); stroke-width: 1.2; }
/* los triángulos se escalan: el trazo se compensa para que todos midan igual */
.ba-fuego use { stroke-width: calc(1.2px / var(--s)); }
.ba-aro { stroke: var(--ba-tenue); }

/* Las láminas viven despacio: el agua corre, el aire gira, el fuego
   respira y la tierra se asienta. Solo transform, nada que repinte. */
.ba-agua use, .ba-fuego use, .ba-aire circle { transform-box: view-box; }
.ba-agua { clip-path: circle(178px at 200px 200px) view-box; }
.ba-agua use { animation: ba-corre 6s linear infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes ba-corre { to { transform: translateX(100px); } }
.ba-aire { transform-box: view-box; transform-origin: 200px 200px; animation: ba-gira 30s linear infinite; }
@keyframes ba-gira { to { transform: rotate(360deg); } }
.ba-fuego use { transform-origin: 200px 350px; transform: scale(var(--s)); animation: ba-arde 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.33s); }
@keyframes ba-arde { from { transform: scale(var(--s)); } to { transform: scale(calc(var(--s) * 1.06)); } }
.ba-tierra path { animation: ba-asienta 7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.8s); }
@keyframes ba-asienta { to { transform: translateY(5px); } }

/* La entrada de la vista nueva, cuando la destapan las franjas: la
   palabra sube desde su máscara, la frase la sigue y las líneas de la
   lámina se dibujan una tras otra. El dibujo es una transición del trazo
   discontinuo (y no una animación) para no pisar el movimiento propio de
   cada línea, que sí es una animación. */
.ba-entra .ba-palabra span { animation: ba-sube 1.1s cubic-bezier(.22, 1, .36, 1) both var(--ba-espera, 0s); }
.ba-entra .ba-num, .ba-entra .ba-frase { animation: ba-asoma .9s cubic-bezier(.22, 1, .36, 1) both calc(var(--ba-espera, 0s) + .12s); }
.ba-entra .ba-frase { animation-delay: calc(var(--ba-espera, 0s) + .22s); }
@keyframes ba-sube { from { transform: translateY(105%); } }
@keyframes ba-asoma { from { opacity: 0; transform: translateY(14px); } }
.ba-lamina :is(path, circle, rect, use) {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--ba-espera, 0s) + .1s + var(--i, 0) * 50ms);
}
.ba-prepara .ba-lamina :is(path, circle, rect, use) { stroke-dashoffset: 1; transition: none; }

/* ── en el teléfono ────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .ba-cabeza { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .ba-menu { margin-left: -.7rem; }
  .ba-vista { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; padding-top: 8.5rem; }
  .ba-num { grid-row: 1; }
  .ba-lamina { grid-column: 1; grid-row: 2; justify-self: center; width: min(72vw, 40vh); }
  .ba-palabra { grid-row: 3; font-size: 23vw; }
  .ba-frase { grid-row: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-lamina * { animation: none !important; }
  .ba-entra .ba-palabra span, .ba-entra .ba-num, .ba-entra .ba-frase { animation: ba-funde .3s ease both; }
  .ba-lamina :is(path, circle, rect, use) { transition: none; }
  @keyframes ba-funde { from { opacity: 0; } }
}