/* mattfolio — inicio: manifiesto + mosaico de tres carruseles verticales (fuente y degradé: site.css) */

.inicio{
  --g:12px;          /* separación entre fotos (también la usa js/inicio.js para medir cada serie) */
  --radio:14px;
  position:relative;
  display:grid;grid-template-columns:minmax(0, 39%) minmax(0, 1fr);
  /* un único bloque de apertura: la ventana de las columnas ocupa la pantalla debajo de la navegación */
  height:100vh;height:100svh;min-height:600px;
  padding-top:84px;
  overflow:hidden;overflow:clip;
  background:var(--bg);
}

/* ---------- manifiesto (quieto) ---------- */
.inicio-head{
  position:relative;z-index:2;align-self:center;
  padding:0 clamp(24px, 3vw, 56px) clamp(24px, 5vh, 56px) 4vw;
  display:flex;flex-direction:column;gap:clamp(22px, 3.6vh, 38px);
}
.inicio-manifiesto{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px, 3.85vw, 66px);line-height:1.08;letter-spacing:-.024em;
  color:var(--ink);max-width:7.6em;
}
.inicio-manifiesto .grad{font-weight:600}
.inicio-sub{
  display:flex;align-items:flex-start;gap:14px;max-width:calc(40px + 13em);
  font-size:clamp(14px, 1.15vw, 18px);line-height:1.4;font-weight:400;letter-spacing:.01em;color:var(--ink-dim);
}
.inicio-sub::before{content:'';flex:none;width:26px;height:1px;margin-top:.7em;background:var(--grad)}

/* ---------- mosaico: columnas con ventana acotada; la pista se mueve dentro y se recorta en los bordes ---------- */
.inicio-galeria{position:relative;min-height:0;padding-right:clamp(10px, 1vw, 20px)}
.mosaico{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--g);height:100%}
.mosaico-col{position:relative;overflow:hidden;height:100%}
.mosaico-pista{will-change:transform}
/* cada serie termina con su propio espacio: así una serie mide exactamente lo que se desplaza en una vuelta */
.mosaico-serie{display:flex;flex-direction:column;gap:var(--g);padding-bottom:var(--g)}
.mosaico-foto{
  position:relative;margin:0;border-radius:var(--radio);overflow:hidden;background:#101016;
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
}
.mosaico-foto picture{display:contents}
.mosaico-foto img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}


/* ---------- entrada al salir de la intro: corta y con poco desplazamiento ---------- */
.inicio--js [data-entra]{transition:opacity .75s cubic-bezier(.2,.6,.2,1), transform .75s cubic-bezier(.2,.6,.2,1)}
.inicio--js:not(.is-in) [data-entra]{opacity:0;transform:translateY(14px)}
.inicio--js [data-entra="2"]{transition-delay:.07s}
.inicio--js [data-entra="3"]{transition-delay:.14s}
.inicio.sin-transicion [data-entra]{transition:none}

/* ---------- tablet y escritorio angosto: manifiesto arriba, tres columnas debajo ---------- */
@media (max-width:1023px){
  .inicio{grid-template-columns:minmax(0, 1fr);height:auto;min-height:0;padding:104px 0 0}
  .inicio-head{align-self:start;padding:0 4vw;gap:20px}
  .inicio-manifiesto{font-size:clamp(30px, 5.4vw, 48px);max-width:13em}
  .inicio-galeria{height:clamp(420px, 58svh, 660px);margin-top:40px;padding:0 4vw}
}

/* ---------- móvil: selección corta de seis en dos columnas, después directo a Proyectos ---------- */
@media (max-width:767px){
  .inicio{--g:10px;--radio:12px;padding-top:96px}
  .inicio-head{padding:0 20px;gap:18px}
  .inicio-manifiesto{font-size:clamp(29px, 8.4vw, 38px);line-height:1.06;max-width:none}
  .inicio-sub{font-size:15px}
  .inicio-galeria{height:min(122vw, 560px);margin-top:30px;padding:0 20px}
  .mosaico{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* ---------- movimiento reducido: composición quieta ---------- */
@media (prefers-reduced-motion: reduce){
  .inicio--js [data-entra]{transition:none}
  .inicio--js:not(.is-in) [data-entra]{opacity:1;transform:none}
}