/* ============================================================
   BITS · WELCOME — Elección de vertical  (v2)
   ------------------------------------------------------------
   Regla estructural que conviene no romper: los dos mundos
   coexisten en la misma página, así que sus temas NO pueden
   vivir en [data-theme] global. Cada mundo declara sus propios
   tokens en su clase.

   El recorte de los mundos y la posición de la placa los
   escribe el JS en cada fotograma. Por eso aquí no hay
   transition sobre clip-path ni sobre transform de la placa:
   competirían con el bucle de animación.
   ============================================================ */

:root {
    --bw-h: 266;            /* #430098 = hsl(266 100% 30%) */
    --bw-s: 100%;
    --bw-l: 30%;

    --bw-brand: hsl(var(--bw-h) var(--bw-s) var(--bw-l));

    /* Tensión de la membrana: 0 en reposo, 1 al máximo. La escribe el JS. */
    --tension: 0;

    --bw-font-display: "Archivo", "Helvetica Neue", sans-serif;
    --bw-font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --bw-font-mono: "IBM Plex Mono", "Courier New", monospace;

    --bw-ease: 620ms cubic-bezier(.22, .78, .3, 1);
}

* { box-sizing: border-box; }

body { margin: 0; }

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.welcome {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #1a1822;
    font-family: var(--bw-font-body);
    isolation: isolate;
}

.mundo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--m-bg);
    color: var(--m-text);
    transition: filter var(--bw-ease);
    will-change: clip-path;
}

/* Recorte inicial, antes de que el JS tome el control */
.mundo--dev { clip-path: inset(0 50% 0 0); justify-content: flex-start; }
.mundo--sec { clip-path: inset(0 0 0 50%); justify-content: flex-end; }

/* ---------- Tema: DESARROLLO (claro atenuado, no blanco) ---------- */
.mundo--dev {
    --m-bg: #eceaf1;
    --m-surface: #f5f4f8;
    --m-text: #191823;
    --m-muted: #56525f;
    --m-dim: #8b8794;
    --m-line: hsl(var(--bw-h) 14% 42% / .2);
    --m-accent: var(--bw-brand);
    --m-accent-on: #ffffff;
}

/* ---------- Tema: SEGURIDAD (oscuro atenuado, no negro) ---------- */
.mundo--sec {
    --m-bg: #14131b;
    --m-surface: #1d1b26;
    --m-text: #e7e5ee;
    --m-muted: #a09bad;
    --m-dim: #6d6879;
    --m-line: hsl(var(--bw-h) 30% 62% / .2);
    --m-accent: hsl(var(--bw-h) 88% 68%);
    --m-accent-on: #14131b;
}

/* El mundo que va perdiendo se apaga */
.welcome[data-hover="dev"] .mundo--sec,
.welcome[data-hover="sec"] .mundo--dev {
    filter: saturate(.55) brightness(.86);
}

/* ============================================================
   CONTENIDO
   Anclado al borde exterior: la frontera recorre entre 38% y 62%
   y el texto vive fuera de ese rango, así que nunca se recorta
   a media palabra durante el movimiento.
   ============================================================ */
.mundo__inner {
    position: relative;
    z-index: 3;
    width: 50vw;
    max-width: 33rem;
    padding: 0 clamp(1.75rem, 5vw, 5rem);
    transition: transform var(--bw-ease), opacity 380ms ease;
}

.mundo--sec .mundo__inner { text-align: right; margin-left: auto; }

.mundo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--bw-font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--m-accent);
}

.mundo--sec .mundo__eyebrow { flex-direction: row-reverse; }

.mundo__eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
}

.mundo__title {
    font-family: var(--bw-font-display);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.03em;
    margin: 1.1rem 0 0;
    text-wrap: balance;
}

.mundo__title em { display: block; font-style: normal; color: var(--m-accent); }

.mundo__desc {
    margin-top: 1.15rem;
    font-size: clamp(.95rem, 1.05vw, 1.06rem);
    line-height: 1.65;
    color: var(--m-muted);
    max-width: 30ch;
}

.mundo--sec .mundo__desc { margin-left: auto; }

.mundo__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1.6rem 0 0;
    list-style: none;
    padding: 0;
}

.mundo--sec .mundo__tags { justify-content: flex-end; }

.mundo__tags li {
    font-family: var(--bw-font-mono);
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--m-dim);
    border: 1px solid var(--m-line);
    border-radius: 2px;
    padding: .28rem .6rem;
    white-space: nowrap;
}

.mundo__cta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: 2.2rem;
    padding: .9rem 1.5rem;
    border: 1px solid var(--m-accent);
    border-radius: 3px;
    background: transparent;
    color: var(--m-accent);
    font-family: var(--bw-font-mono);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 260ms ease, color 260ms ease, gap 260ms ease;
}

.mundo__cta svg { width: 15px; height: 15px; flex-shrink: 0; }
.mundo--sec .mundo__cta { flex-direction: row-reverse; }

.mundo__cta:hover,
.mundo__cta:focus-visible {
    background: var(--m-accent);
    color: var(--m-accent-on);
    gap: 1.1rem;
}

.mundo__cta:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 3px; }

/* ============================================================
   AMBIENTE DE CADA MUNDO
   ============================================================ */
.mundo__amb { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.mundo--sec .mundo__amb {
    background: radial-gradient(120% 90% at 88% 8%,
            hsl(var(--bw-h) 90% 50% / .16), transparent 58%);
}

.mundo__graph { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .85; }

.mundo--dev .mundo__amb {
    background-image:
        linear-gradient(hsl(var(--bw-h) 20% 40% / .07) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--bw-h) 20% 40% / .07) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(80% 70% at 18% 40%, #000 10%, transparent 78%);
    mask-image: radial-gradient(80% 70% at 18% 40%, #000 10%, transparent 78%);
}

.mundo__watermark {
    position: absolute;
    z-index: 2;
    font-family: var(--bw-font-mono);
    font-size: .74rem;
    line-height: 2.3;
    letter-spacing: .04em;
    color: var(--m-dim);
    opacity: .38;
    pointer-events: none;
    user-select: none;
}

.mundo--dev .mundo__watermark { left: clamp(1.75rem, 5vw, 5rem); bottom: 2.5rem; }
.mundo--sec .mundo__watermark { right: clamp(1.75rem, 5vw, 5rem); bottom: 2.5rem; text-align: right; }
.mundo__watermark b { color: var(--m-accent); font-weight: 500; }

.mundo__caret::after {
    content: "▍";
    color: var(--m-accent);
    animation: bw-blink 1.15s steps(2, start) infinite;
}

@keyframes bw-blink { 50% { opacity: 0; } }

/* ============================================================
   LA FRONTERA — elemento firma
   La curva, las marcas, los pulsos y las chispas se dibujan en
   el canvas. Aquí solo queda el lienzo y lo que va montado
   encima de él.
   ============================================================ */
#seam-canvas {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

/* ---------- Placa de marca ---------- */
.seam__plate {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 1.05rem 1.6rem;
    background: #f5f4f8;
    border: 1px solid hsl(var(--bw-h) 30% 50% / calc(.22 + var(--tension) * .5));
    border-radius: 20px;
    pointer-events: none;
    overflow: hidden;
    transform-style: preserve-3d;

    /* La sombra y el resplandor crecen con la tensión de la membrana */
    box-shadow:
        0 20px 50px -18px rgba(0, 0, 0, .55),
        0 0 calc(18px + var(--tension) * 46px)
          hsl(var(--bw-h) 95% 58% / calc(var(--tension) * .55));
    transition: box-shadow 240ms ease, border-color 240ms ease;
}

.seam__plate img {
    display: block;
    width: clamp(112px, 13vw, 168px);
    height: auto;
    position: relative;
    z-index: 2;
}

/* Destello que barre el logo: rápido, y luego una pausa larga.
   El truco está en el keyframe: el 82% del ciclo es reposo. */
.seam__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(105deg,
            transparent 38%,
            hsl(var(--bw-h) 90% 82% / .55) 47%,
            hsl(var(--bw-h) 60% 96% / .8) 50%,
            hsl(var(--bw-h) 90% 82% / .55) 53%,
            transparent 62%);
    transform: translateX(-140%);
    animation: bw-destello 7s cubic-bezier(.5, 0, .35, 1) infinite;
    mix-blend-mode: overlay;
    pointer-events: none;
}

@keyframes bw-destello {
    0%   { transform: translateX(-140%); }
    18%  { transform: translateX(140%); }
    100% { transform: translateX(140%); }
}

/* Pulso violeta detrás del logo, sincronizado con el destello */
.seam__plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(60% 120% at 50% 50%,
            hsl(var(--bw-h) 95% 60% / .14), transparent 70%);
    opacity: 0;
    animation: bw-latido 7s ease-in-out infinite;
}

@keyframes bw-latido {
    0%, 100% { opacity: 0; }
    14%      { opacity: 1; }
    30%      { opacity: 0; }
}

.seam__hint {
    position: absolute;
    top: calc(50% + 4.6rem);
    left: 0;
    z-index: 10;
    font-family: var(--bw-font-mono);
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: hsl(var(--bw-h) 25% 70% / .75);
    white-space: nowrap;
    pointer-events: none;
    animation: bw-respirar 3.4s ease-in-out infinite;
}

@keyframes bw-respirar {
    0%, 100% { opacity: .45; }
    50%      { opacity: .95; }
}

/* La pista sobra en cuanto el visitante ya está apuntando un lado */
.welcome[data-hover] .seam__hint { opacity: 0; animation: none; transition: opacity 300ms ease; }

/* ============================================================
   SECUENCIA DE ENTRADA
   ============================================================ */
.welcome[data-estado="entrando"] #seam-canvas {
    animation: bw-seam-in 1s cubic-bezier(.16, .84, .44, 1) both;
}

@keyframes bw-seam-in {
    from { clip-path: inset(50% 0 50% 0); opacity: 0; }
    40%  { opacity: 1; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.welcome[data-estado="entrando"] .mundo__inner,
.welcome[data-estado="entrando"] .seam__hint {
    animation: bw-fade-up 760ms cubic-bezier(.16, .84, .44, 1) both;
}

.welcome[data-estado="entrando"] .mundo--dev .mundo__inner { animation-delay: 480ms; }
.welcome[data-estado="entrando"] .mundo--sec .mundo__inner { animation-delay: 600ms; }
.welcome[data-estado="entrando"] .seam__hint { animation-delay: 1100ms; }

/* La placa aterriza girando: entra de canto y se endereza */
.welcome[data-estado="entrando"] .seam__plate img {
    animation: bw-placa-in 860ms cubic-bezier(.2, .9, .3, 1) 280ms both;
}

@keyframes bw-placa-in {
    from { opacity: 0; transform: perspective(600px) rotateY(58deg) scale(.86); }
    to   { opacity: 1; transform: perspective(600px) rotateY(0) scale(1); }
}

@keyframes bw-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   SALIDA
   ============================================================ */
.welcome[data-saliendo] .seam__hint { opacity: 0; }

.welcome[data-saliendo] .mundo--dev,
.welcome[data-saliendo] .mundo--sec { filter: none; }

.welcome[data-saliendo] .seam__plate {
    opacity: 0;
    transform-origin: center;
    transition: opacity 320ms ease 260ms;
}

.welcome[data-saliendo="dev"] .mundo--sec .mundo__inner,
.welcome[data-saliendo="sec"] .mundo--dev .mundo__inner { opacity: 0; }

.welcome[data-saliendo="dev"] .mundo--dev .mundo__inner,
.welcome[data-saliendo="sec"] .mundo--sec .mundo__inner {
    transform: scale(1.04);
    opacity: 0;
    transition: transform 880ms cubic-bezier(.4, 0, .2, 1),
                opacity 420ms ease 440ms;
}

/* ============================================================
   RESPONSIVE — la frontera se vuelve horizontal
   ============================================================ */
@media (max-width: 860px) {
    .mundo--dev { clip-path: inset(0 0 50% 0); align-items: flex-start; }
    .mundo--sec { clip-path: inset(50% 0 0 0); align-items: flex-end; }

    .mundo__inner {
        width: 100%;
        max-width: none;
        padding: clamp(3.5rem, 11vh, 6rem) 1.75rem;
    }

    .mundo--sec .mundo__inner { text-align: left; }
    .mundo--sec .mundo__eyebrow { flex-direction: row; }
    .mundo--sec .mundo__desc { margin-left: 0; }
    .mundo--sec .mundo__tags { justify-content: flex-start; }
    .mundo--sec .mundo__cta { flex-direction: row; }

    .mundo__title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
    .mundo__desc { max-width: 38ch; }
    .mundo__watermark { display: none; }

    .seam__plate { top: 0; left: 50%; padding: .8rem 1.15rem; }
    .seam__plate img { width: 104px; }
    .seam__hint { display: none; }

    @keyframes bw-seam-in {
        from { clip-path: inset(0 50% 0 50%); opacity: 0; }
        40%  { opacity: 1; }
        to   { clip-path: inset(0 0 0 0); opacity: 1; }
    }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .welcome *,
    .welcome *::before,
    .welcome *::after {
        animation: none !important;
        transition: none !important;
    }
}