/* ==========================================================================
   Phone polish, 2026-10-06 (Ruben: "smoothly blend the top into the black",
   "more space from the top of the header", "faster and smoother").
   Loaded on every page, after the page's own sheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The top blends into the black.

   At the top of the page iOS Safari paints the strip behind the clock in the
   page colour, #090909 (measured on Ruben's iPhone screenshot). The hero began
   right under it with a 66% blue-black shade, so there was a hard line. This
   fade starts at exactly #090909 and melts into the photo.

   It belongs to the phone header, which on phones is position: absolute (not
   pinned), so it scrolls away with the hero and never touches Safari's
   pinned-element rules that broke the 2026-09-29 attempts.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Every page: over a photo it is the blend, over plain black it is
     invisible (#090909 on #090909). */
  .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 170px;
    z-index: -1;
    pointer-events: none;
    /* Eased stops, so the fade has no visible band. */
    background: linear-gradient(to bottom,
      rgb(9, 9, 9) 0%,
      rgba(9, 9, 9, 0.96) 10%,
      rgba(9, 9, 9, 0.86) 22%,
      rgba(9, 9, 9, 0.7) 35%,
      rgba(9, 9, 9, 0.5) 49%,
      rgba(9, 9, 9, 0.31) 63%,
      rgba(9, 9, 9, 0.16) 76%,
      rgba(9, 9, 9, 0.06) 88%,
      rgba(9, 9, 9, 0) 100%);
  }

  body.menu-open .site-header::before {
    display: none;
  }

  /* --------------------------------------------------------------------------
     2. More room above the logo and menu button (was 0px).
     -------------------------------------------------------------------------- */
  .site-header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  }

  /* --------------------------------------------------------------------------
     3. Smoother scrolling on phones.

     The film grain is a full-screen layer stacked over every pixel (at 4.5%,
     invisible on a phone screen) that the phone has to blend on every frame
     of scrolling. Blur in the scroll-in animations is the most expensive
     effect a phone can animate; fade and slide stay.
     -------------------------------------------------------------------------- */
  body::after {
    display: none;
  }

  .reveal,
  html.js .reveal,
  .logo-slide {
    filter: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. The home headline no longer waits for the last script on the page.

   It was hidden until main.js (the last file the page loads) added
   .page-loaded, so on a slow connection the hero sat without words. Same
   rise and timing, run by the browser from the first paint.
   -------------------------------------------------------------------------- */
@keyframes bzHeroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

body.home-2026 .hz-hero__title,
body.home-2026 .hz-hero__sub,
body.home-2026 .hz-hero .hz-actions {
  opacity: 1;
  transform: none;
  transition: none;
  animation: bzHeroIn 800ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
body.home-2026 .hz-hero__title { animation-delay: 100ms; }
body.home-2026 .hz-hero__sub { animation-delay: 220ms; }
body.home-2026 .hz-hero .hz-actions { animation-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  body.home-2026 .hz-hero__title,
  body.home-2026 .hz-hero__sub,
  body.home-2026 .hz-hero .hz-actions {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   5. Restaurant logos sized by shape (2026-10-06, Ruben: every dinner has
   its logo). The page sets --logo-ar (width / height) on each logo; height
   = base / sqrt(ratio), so a square seal and a long wordmark cover about the
   same area instead of the square one shrinking to a speck.
   -------------------------------------------------------------------------- */
.page-dining .vt__media .vt__logo.dn-logo {
  height: clamp(20px, calc(56px / sqrt(var(--logo-ar, 4))), 60px);
  width: auto;
  max-width: min(62%, 190px);
  max-height: none;
}

.page-dining .vt--nophoto .vt__logo.dn-logo {
  height: clamp(26px, calc(70px / sqrt(var(--logo-ar, 4))), 76px);
}

.page-restaurant .vd-hero__logo {
  height: clamp(30px, calc(92px / sqrt(var(--logo-ar, 4))), 88px);
  width: auto;
  max-height: none;
  max-width: min(78%, 280px);
}