/*
 * Lunako — Home: preloader, hero y rejilla de destacados
 * La rejilla y la tarjeta vienen de proyectos.css: es el mismo componente.
 */

/* ============================== preloader ============================== */

.lk-preloader[hidden] { display: none; }

/* Visita repetida: el velo no llega a verse. Lo decide el script en línea del
   partial, que corre antes del primer pintado; sin esta regla habría un
   parpadeo de crema hasta que el JS del pie marcase el elemento. */
.lk-intro-done .lk-preloader { display: none; }

.lk-preloader {
  position: fixed; inset: var(--lk-admin) 0 0 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--lk-bg);
  opacity: 1;
  transition: opacity .55s var(--lk-ease);
}
.lk-preloader.is-out { opacity: 0; }

.lk-preloader__word { display: flex; align-items: center; transition: opacity .45s var(--lk-ease); }
.lk-preloader__word.is-out { opacity: 0; transition: opacity 1.1s cubic-bezier(.33, 1, .68, 1); }

/* Cada letra aparece por su cuenta, solo con un fundido, sin moverse. El
   logotipo trae un trazo por letra, de izquierda a derecha (l·u·n·a·k·o):
   home.js les va poniendo .is-in de una en una, y como cada fundido dura más
   que el paso entre letras, se solapan y la palabra entra sin saltos. */
.lk-preloader__clip .lk-marca path {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.33, 1, .68, 1);
}
.lk-preloader__clip .lk-marca path.is-in { opacity: 1; }
/* Ya con el SVG, la palabra puede ir a los 159 px que pedía el diseño. Con el
   bitmap de 130 × 34 estaba limitada a 68 para que no pixelase. */
.lk-preloader__clip { color: var(--lk-ink); }
.lk-preloader__clip .lk-marca {
  height: clamp(46px, 11vw, 159px); width: auto; max-width: none;
}

/* Durante la secuencia no se hace scroll. */
.lk-intro-lock { overflow: hidden; }

/* ================================ hero ================================ */

/* El hero compensa por su cuenta la cabecera fija, con su propio padding.
   Sin esto se suman las dos compensaciones: el hero mide 100vh pero empieza
   64 px más abajo, y la flecha del final queda fuera de la ventana. */
.lk-home .lk-main { padding-top: 0; }

.lk-home-hero {
  position: relative; min-height: calc(100vh - var(--lk-admin));
  display: flex; align-items: flex-end;
  padding: var(--lk-header) var(--lk-gutter) 60px;
  overflow: hidden;
}

.lk-home-hero__stage { position: absolute; inset: 0; pointer-events: none; }
.lk-home-hero__canvas-box {
  position: absolute; right: -2%; top: 0; bottom: 0;
  width: clamp(320px, 54vw, 1120px);
  will-change: transform;
}
.lk-home-hero__canvas-box canvas { width: 100%; height: 100%; }

.lk-home-hero__copy {
  position: relative; width: 100%; max-width: var(--lk-max); margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(28px, 3vw, 52px);

  /* Estado de partida de la secuencia. Entra con .is-in. */
  opacity: 0; transform: translateY(38px); filter: blur(5px);
  transition: opacity 2.2s var(--lk-ease-soft),
              transform 2.6s var(--lk-ease-soft),
              filter 2.2s var(--lk-ease-soft);
}
.lk-home-hero__copy.is-in { opacity: 1; transform: none; filter: blur(0); }

/*
 * La otra opción del hero: el sello en vez del axonométrico. Terracota
 * apagada y grande, cubriendo la esquina de arriba a la derecha: sangra por
 * los dos bordes de la ventana y pasa por debajo de la cabecera, que en esta
 * portada es transparente.
 *
 * Lo que sobresale va en proporción al tamaño: un 14 % por arriba y un 16 %
 * por la derecha. Por abajo no se corta nunca: el tamaño es el menor entre el
 * 68 % del ancho y lo que cabe en el alto del hero —descontada la parte que
 * sale por arriba y 40 px de aire—. En pantallas bajas encoge en vez de
 * cortarse.
 */
.lk-home-hero__sello {
  --lk-sello-arriba: .14;
  --lk-sello: min(68vw, calc((100svh - var(--lk-admin) - 40px) / (1 - var(--lk-sello-arriba))));
  position: absolute;
  top: calc(var(--lk-sello) * var(--lk-sello-arriba) * -1);
  right: calc(var(--lk-sello) * -.16);
  width: var(--lk-sello);
  color: var(--lk-accent); opacity: .3;
}
.lk-home-hero__sello .lk-sello { width: 100%; height: auto; }

/* Entrada del sello: escondido bajo el velo, aparece despacio cuando el velo
   se funde, con un crecimiento muy leve desde su esquina. Va en el svg y no en
   la caja, porque en la caja escribe el parallax su transform. */
.lk-home-hero__sello .lk-sello {
  transform-origin: 100% 0;
  /* Curva que arranca despacio, y un poco de retraso: así no se adelanta al
     velo y va apareciendo cuando la crema ya se ha ido. */
  transition: opacity 2.4s cubic-bezier(.45, 0, .25, 1) .3s,
              transform 3s cubic-bezier(.45, 0, .25, 1) .3s;
}
.lk-intro-lock .lk-home-hero__sello:not(.is-in) .lk-sello { opacity: 0; transform: scale(.96); }

/* El titular no invade la columna del axonométrico. */
.lk-home-hero__title {
  max-width: min(921px, max(100% - 52vw, 340px));
  color: var(--lk-ink); text-wrap: pretty;
}

/* La cabecera funde a la vez que el titular, no antes.
   Se esconde solo mientras la secuencia corre —que es exactamente lo que marca
   lk-intro-lock— y vuelve con .is-in, que pone la misma llamada que hace entrar
   el titular. Al terminar se retira lk-intro-lock y la regla deja de aplicar,
   sin salto porque para entonces ya está a 1. */
.lk-intro-lock .lk-header { opacity: 0; }
.lk-intro-lock .lk-header.is-in { opacity: 1; transition: opacity 1.1s var(--lk-ease); }

/*
 * En móvil el hero se apila: la animación arriba y centrada, y debajo el
 * titular a la izquierda con la flecha a su derecha.
 *
 * El escenario deja de estar superpuesto y pasa a ser el primer bloque de la
 * columna. El axonométrico se centra solo dentro de su caja —se dibuja
 * ajustándose al lienzo—, así que basta con darle todo el ancho: no se toca su
 * transform, que es donde el parallax escribe.
 */
@media (max-width: 900px) {
  .lk-home-hero {
    /* svh, no vh.
       En el móvil 100vh es la ventana GRANDE —la que queda cuando la barra del
       navegador se repliega—, así que con la barra a la vista el hero mide más
       que lo que se ve y la flecha se queda fuera. svh mide la ventana pequeña:
       cabe siempre, y no da el salto de dvh al hacer scroll. */
    min-height: calc(100svh - var(--lk-admin));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(24px, 5vw, 40px);
    padding-bottom: 48px;
  }

  .lk-home-hero__stage {
    position: relative; inset: auto;
    /* Cede altura antes que el texto: si la ventana es corta, encoge el dibujo
       en vez de empujar la flecha fuera de la pantalla. */
    flex: 1 1 auto; min-height: 150px;
  }
  .lk-home-hero__canvas-box {
    inset: 0; right: 0; width: auto;
  }

  /* El sello deja de sangrar: entero y centrado en su bloque, como el
     axonométrico. */
  .lk-home-hero__sello {
    inset: 0; width: auto;
    display: flex; align-items: center; justify-content: center;
  }
  .lk-home-hero__sello .lk-sello { width: auto; height: 100%; max-height: 260px; max-width: 100%; }

  .lk-home-hero__copy {
    flex: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(14px, 4vw, 28px);
  }

  /* Sin la columna del axonométrico al lado, el titular ya no tiene que
     esquivarla: ocupa lo que le dejan la flecha y el margen. */
  .lk-home-hero__title {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* La flecha se pega al margen derecho y a la última línea del titular. */
  .lk-arrow { flex: none; justify-content: flex-end; }
}

/* ------------------------------- flecha ------------------------------- */

@keyframes lkArrowBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.lk-arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: flex-start;
  opacity: .45; transition: opacity var(--lk-dur-veil) var(--lk-ease);
}
.lk-arrow:hover, .lk-arrow:focus-visible { opacity: 1; }
.lk-arrow svg {
  width: clamp(24px, 2vw, 35px); height: auto; overflow: visible;
  animation: lkArrowBob 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@media (prefers-reduced-motion: reduce) { .lk-arrow svg { animation: none; } }

/* ========================= rejilla de destacados ========================= */

.lk-home-work { background: var(--lk-dark); padding: 60px var(--lk-gutter) 80px; }