/* ==========================================================================
   mosaic.css — Section 1 hero: a scattered, overlapping wall of whole tweet /
   Truth Social screenshots. Posts show at natural aspect (never cropped) and
   may bleed past the canvas edge (clipped here). Tiles fly in + fade one at a
   time. Owned by mosaic.js. Colors only from --ef-* tokens.
   ========================================================================== */

/* Full-bleed hero; height driven by viewport width, capped on wide screens. */
.ef-mosaic {
  width: 100%;
  height: 50vw;
  max-height: 500px;
  min-height: 240px;
  background: var(--ef-panel);
}

/* Positioning context; clips the parts of tiles that bleed off the edge. */
.ef-mosaic-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* One post tile. Absolutely positioned; width set inline, height follows the
   image (whole post). Starts hidden until its reveal class lands. */
.ef-mosaic-tile {
  position: absolute;
  opacity: 0;
  transform-origin: center;
  background: var(--ef-paper);
  border-radius: var(--ef-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  will-change: transform, opacity;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Whole post, natural aspect — no cropping. */
.ef-mosaic-tile img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fly-in + fade: travel in from the tile's own random vector (--fly-x/y).
   animation-delay is set inline per tile for the one-at-a-time cascade. */
.ef-mosaic-tile.is-in {
  animation: ef-mosaic-fly 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes ef-mosaic-fly {
  from { opacity: 0; transform: translate(var(--fly-x, 0), var(--fly-y, 0)) scale(0.9); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Reduced-motion reveal: a quick fade, no travel. */
.ef-mosaic-tile.is-in-fade { animation: ef-mosaic-fade 0.25s ease-out both; }
@keyframes ef-mosaic-fade { from { opacity: 0; } to { opacity: 1; } }

/* Hover: raise above neighbors, deepen shadow, social-blue ring, gentle zoom.
   A tiny transition-delay on ENTER (0 on leave) absorbs quick passes so the
   wall doesn't stutter as the pointer crosses overlapping tiles. */
.ef-mosaic-tile a { display: block; cursor: pointer; }
.ef-mosaic-tile:hover,
.ef-mosaic-tile:focus-within {
  z-index: 99;
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 0 0 2px var(--ef-social);
  transition-delay: 90ms;
}

/* Click-to-expand: centre the whole post, animate geometry, sit on top. */
.ef-mosaic-tile--zoom {
  transition: left 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              top 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 500;
}
.ef-mosaic-tile.is-expanded {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.ef-mosaic-tile.is-expanded img { height: 100%; }
/* Don't let the hover scale fight the expanded geometry. */
.ef-mosaic-tile.is-expanded:hover,
.ef-mosaic-tile.is-expanded:focus-within { transform: none; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .ef-mosaic-tile:hover,
  .ef-mosaic-tile:focus-within { transform: none; }
  .ef-mosaic-tile--zoom { transition: none; }
}

/* Broken-screenshot fallback: keep a populated tile with the handle. */
.ef-mosaic-tile--fallback {
  background: linear-gradient(135deg, var(--ef-social-tint), var(--ef-panel));
  min-height: 90px;
}
.ef-mosaic-tile--fallback a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  min-height: 90px;
}
.ef-mosaic-fallback-label {
  font-family: var(--ef-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ef-social-ink);
  text-align: center;
  word-break: break-word;
}