/* =====================================================================
   Berolink — Hero LQIP blur-up reveal, LAYERED on the ORIGINAL hero.
   ---------------------------------------------------------------------
   Imported AFTER berolink-home.css so it wins where intended. The hero is
   Louis's ORIGINAL .hero-collage > .tile > img markup, so ALL of his
   verbatim CSS — base grade, hover-brighten, transitions, transforms,
   object-position, focus, touch fallback, mobile grid — attaches unchanged.

   This file is ADDITIVE only. It introduces TWO new layers per tile:
     .lqip    — a <div> (background-image) blurred placeholder underlay
     .hi-wrap — a <div> wrapping the real photo <img>; the blur-up
                (opacity + blur) animates on THIS wrapper, NOT on the img,
                so Louis's `.tile img` filter/hover rules are never touched
                or overridden.
   No z-index is set on these layers: DOM order (.lqip before .hi-wrap)
   stacks the photo over the placeholder, and — crucially — the tiles are
   NOT trapped in a stacking context, so Louis's `.tile:hover{z-index:4}`
   still lifts a hovered tile ABOVE the .hero-veil (the original
   hover-brighten-pop). The ONLY original rules touched are background-COLOUR
   (the confirmed #221A15 umber ground) — never any hover/transition/filter.

   Locked params: per-cell resolve 1400ms, easing cubic-bezier(.16,1,.3,1),
   hi-res blur 16px->0, center-out 90ms step (JS), umber ground #221A15,
   original .hero-veil gradient kept, title + eyebrow + scrollcue resolve
   together (last, invisible until JS adds .show to .hero-inner).
   ===================================================================== */

/* Warm umber ground — background-colour only (overrides Louis's #0a0908). */
.hero {
  background: #221A15;
}
/* Umber shows in the 4px collage gaps. Background-colour only. */
.hero .hero-collage {
  background-color: #221A15;
}

/* LQIP placeholder underlay. A <div> (not an <img>) so `.tile img` never
   matches it. Matches Louis's base grade so there's no brightness pop when
   the hi-res fades in over it; heavy blur hides the tiny source. */
.hero .tile .lqip {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 36%;
  background-repeat: no-repeat;
  filter: brightness(0.46) saturate(0.85) contrast(1.04) blur(14px);
  transform: scale(1.06);
}

/* Blur-up carrier for the real photo. The reveal animates HERE; the <img>
   inside keeps Louis's verbatim `.tile img` filter/transform/hover intact.
   No z-index: it follows .lqip in the DOM, so it paints above it, while the
   whole tile remains free to pop above the veil on hover. */
.hero .tile .hi-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(16px);
  transition:
    opacity 1400ms cubic-bezier(.16, 1, .3, 1),
    filter 1400ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, filter;
}
.hero .tile .hi-wrap.in {
  opacity: 1;
  filter: blur(0);
}

/* ---- Title (Louis's confirmed NEW sizing spec) ----
   .hero .hero__title (0,2,0) beats Louis's .hero h1 (0,1,1). Hidden until
   JS adds .show on .hero-inner => no fallback-font flash (FOUT killer). */
.hero .hero__title {
  font-family: var(--title);
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 auto;
  color: #F4EEE4;
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
}
.hero .hero__title em {
  font-style: normal;
  color: var(--peri);
}

/* Eyebrow + scrollcue are original content (original classes + verbatim
   styling); only their APPEARANCE is gated to the title's resolve so nothing
   pops in raw mid-load. All three reveal together on .hero-inner.show. */
.hero .hero-inner .eyebrow,
.hero .hero-inner .scrollcue {
  opacity: 0;
}
.hero .hero-inner.show .hero__title {
  opacity: 1;
  animation: heroTitleIn 700ms cubic-bezier(.16, 1, .3, 1) both;
}
.hero .hero-inner.show .eyebrow,
.hero .hero-inner.show .scrollcue {
  opacity: 1;
  transition: opacity 700ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes heroTitleIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

/* Reduced motion: gate still applies (so still no FOUT) but no animation —
   instant LQIP->hi swap and the content appears at once. */
@media (prefers-reduced-motion: reduce) {
  .hero .tile .hi-wrap {
    transition: none;
  }
  .hero .tile .hi-wrap.in {
    opacity: 1;
    filter: blur(0);
  }
  .hero .hero-inner.show .hero__title {
    animation: none;
    opacity: 1;
  }
  .hero .hero-inner.show .eyebrow,
  .hero .hero-inner.show .scrollcue {
    transition: none;
    opacity: 1;
  }
}