/* ─── FILM — HORIZONTAL SNAP GALLERY ─────────────────────────────────────── */

/*
  MATEMÁTICA DE ASPECT RATIO:
  Grid: 12 cols × 3 rows iguales, viewport ~16:9

  4-col item (33%):  100vw/3 / (100vh-76px)/3  ≈ 2:1   ✓
  3-col item (25%):  100vw/4 / (100vh-76px)/3  ≈ 1.4:1 ✓

  Screen 1 — 10 items:
    Row 1: [4col][4col][4col]             → 3 items ≈ 2:1
    Row 2: [3col][3col][3col][3col]       → 4 items ≈ 1.4:1
    Row 3: [4col][4col][4col]             → 3 items ≈ 2:1

  Screen 2 — 10 items:
    Row 1: [3col][3col][3col][3col]       → 4 items ≈ 1.4:1
    Row 2: [4col][4col][4col]             → 3 items ≈ 2:1
    Row 3: [4col][4col][4col]             → 3 items ≈ 2:1
*/

body { overflow: hidden; }


/* ─── GALLERY WRAPPER ────────────────────────────────────────────────────── */

.gallery-wrap {
  position: fixed;
  top: 76px; left: 0; right: 0; bottom: 0;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery-wrap::-webkit-scrollbar { display: none; }


/* ─── SCREENS ────────────────────────────────────────────────────────────── */

.film-screen {
  width: 100vw;
  flex-shrink: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* ─── SCREEN — 2×2 (4 partes iguales) ──────────────────────────────────── */

.film-screen--1 .gallery-item:nth-child(1) { grid-column: 1 / 7;  grid-row: 1; }
.film-screen--1 .gallery-item:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
.film-screen--1 .gallery-item:nth-child(3) { grid-column: 1 / 7;  grid-row: 2; }
.film-screen--1 .gallery-item:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }


/* ─── ITEMS ──────────────────────────────────────────────────────────────── */

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item .work-item {
  position: absolute;
  inset: 0;
}

.gallery-item .work-item video,
.gallery-item .work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Override home.css — imágenes visibles sin JS */
.gallery-item .work-item img { opacity: 1; }


/* ─── ENTRANCE ANIMATION ─────────────────────────────────────────────────── */

@keyframes galleryIn {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

.gallery-item { animation: galleryIn 0.7s var(--ease-out) both; }

.film-screen--1 .gallery-item:nth-child(1) { animation-delay: 0.00s; }
.film-screen--1 .gallery-item:nth-child(2) { animation-delay: 0.05s; }
.film-screen--1 .gallery-item:nth-child(3) { animation-delay: 0.10s; }
.film-screen--1 .gallery-item:nth-child(4) { animation-delay: 0.15s; }


/* ─── GALLERY ARROWS ─────────────────────────────────────────────────────── */

.gallery-arrow {
  position: fixed;
  top: calc(76px + (100vh - 76px) / 2);
  transform: translateY(-50%);
  z-index: 20;
  background: none;
  border: none;
  cursor: none;
  padding: 20px;
  color: rgba(255,255,255,0.28);
  transition: color 0.4s var(--ease-out), opacity 0.5s var(--ease-out);
  user-select: none;
  -webkit-user-select: none;
}

.gallery-arrow:hover { color: rgba(255,255,255,0.85); }

.gallery-arrow-left  { left: 16px; }
.gallery-arrow-right { right: 16px; }

.gallery-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ─── SCROLL PROGRESS ────────────────────────────────────────────────────── */

.scroll-progress {
  position: fixed;
  bottom: 0; left: 0;
  height: 1px;
  width: 0%;
  background: rgba(255,255,255,0.3);
  z-index: 50;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ─── RESPONSIVE — MOBILE (≤ 767px) ─────────────────────────────────────── */

@media (max-width: 767px) {
  body { overflow-y: auto; overflow-x: hidden; }

  .gallery-wrap {
    position: static;
    display: block;
    overflow: visible;
    scroll-snap-type: none;
  }

  .film-screen {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    scroll-snap-align: none;
    margin-bottom: 3px;
  }

  .film-screen--1 { grid-template-columns: 1fr; grid-template-rows: auto; }

  .film-screen .gallery-item:nth-child(n) {
    grid-column: unset;
    grid-row: unset;
    height: 56.25vw;
    animation-delay: 0s !important;
  }

  .gallery-arrow   { display: none; }
  .scroll-progress { display: none; }
}