/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0d0d0d;
  --accent:   #4DA0FF;
  --gap:      0px;
  --cols:     6;
  --rows:     4;
  --brand-h:  2.2rem;
  --cell-h:   calc((100vh - var(--brand-h) - (var(--rows) + 1) * var(--gap)) / var(--rows));
}

html, body {
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  cursor: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   IDLE / WELCOME SCREEN
   ══════════════════════════════════════════════════════════════════════════ */
#idle {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 10;
  transition: opacity 0.8s ease;
}
#idle.hiding {
  opacity: 0;
  pointer-events: none;
}

.idle-inner { text-align: center; user-select: none; }

.idle-logo {
  width: clamp(280px, 50vw, 700px);
  height: auto;
  opacity: 0.9;
  animation: logo-glow 4s ease-in-out infinite;
}

.idle-divider {
  width: 80px;
  height: 2px;
  background: var(--accent);
  margin: 2.5rem auto;
  opacity: 0.4;
}

.idle-tagline {
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.45em;
  color: var(--accent);
  text-transform: uppercase;
}

.idle-sub {
  font-size: clamp(0.5rem, 1.2vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  margin-top: 1.2rem;
}

@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.05)); }
  50%       { filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTRAIT GRID
   ══════════════════════════════════════════════════════════════════════════ */
#gallery-grid {
  width:  100vw;
  height: calc(100vh - var(--brand-h));
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows:    repeat(var(--rows), 1fr);
  gap:     var(--gap);
  padding: var(--gap);
  align-content: start;
}

/* ── Grid cell — fixed slot in the 6×4 grid ────────────────────────────── */
.grid-cell {
  overflow: hidden;
  background: #0d0d0d;
  position: relative;
}
.grid-cell.filled {
  background: #111;
}

.grid-cell img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Subtle inner vignette on each filled cell */
.grid-cell.filled::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   PIXEL DISSOLVE — tile overlay
   ══════════════════════════════════════════════════════════════════════════ */
.tile-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows:    repeat(8, 1fr);
  z-index: 2;
  pointer-events: none;
}

.tile {
  /* For dissolve-out: tiles start with the image visible behind them
     via background: transparent, and are set to opacity 0 to reveal black.
     For reveal-in: tiles start black and fade to transparent. */
  background: inherit;
  opacity: 1;
}

/* During dissolve-out, the image is behind the tiles.
   Tiles are screenshots of the image (via inherit bg or just overlaid).
   We actually just overlay black tiles that fade IN on dissolve-out,
   or start black and fade OUT on reveal-in. */

/* ══════════════════════════════════════════════════════════════════════════
   BRAND BAR — bottom strip
   ══════════════════════════════════════════════════════════════════════════ */
#brand-bug {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--brand-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  border-top: 1px solid rgba(77, 160, 255, 0.15);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  gap: 0.5rem;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
.bug-logo {
  height: 16px;
  width: auto;
  opacity: 0.35;
}
.bug-sep { opacity: 0.3; }
#brand-bug strong { color: rgba(77, 160, 255, 0.5); }