/* ==========================================================================
   The Mall Group — "Something new is coming soon" holding page
   --------------------------------------------------------------------------
   Layout goal: show the whole artwork on every screen, never crop the
   headline or the call to action.

   The artwork's top half is flat cream, so the page background is a cream
   gradient sampled from the image itself. The poster is pinned to the bottom
   of the viewport, which means any leftover space sits above the image where
   the cream blends seamlessly into the artwork.

   Two artworks are swapped by orientation (see <picture> in index.html):
     landscape (desktop + phone held sideways) -> desktop.png        1920x1080
     portrait  (phone held upright)            -> mobile-verical.png  720x1280
   ========================================================================== */

:root {
  /* Sampled from the artwork: cream at the top, warm sand near the bottom. */
  --cream: #f9f2e8;
  --sand: #f9e7cc;
  --brand: #bc7d41;

  /* Aspect ratio of the artwork in use: desktop.png is 1920x1080. */
  --ar: calc(1920 / 1080);

  /* Hotspot over the "News & Updates" button, as a percentage of the
     artwork. Measured from desktop.png: x 727-1192, y 468-547 of 1920x1080. */
  --cta-left: 37.86%;
  --cta-top: 43.33%;
  --cta-width: 24.27%;
  --cta-height: 7.41%;
}

/* Portrait artwork puts the button elsewhere.
   Measured from mobile-verical.png: x 157-562, y 637-706 of 720x1280. */
@media (orientation: portrait) {
  :root {
    --ar: calc(720 / 1280);
    --cta-left: 21.81%;
    --cta-top: 49.77%;
    --cta-width: 56.39%;
    --cta-height: 5.47%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: var(--cream);
}

body {
  /* Stand-in for the artwork's own cream-to-sand wash, visible for the
     moment before the image paints. */
  background-image: linear-gradient(to bottom, var(--cream) 55%, var(--sand));
  background-repeat: no-repeat;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #2b2118;
  /* Prevent the rubber-band scroll on iOS revealing a blank strip. */
  overscroll-behavior: none;
}

/* The stage fills the viewport and pins the poster to the bottom centre.
   100svh keeps the artwork fully visible on mobile browsers whose toolbars
   shrink and grow while scrolling. */
.stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* Leftover space above the poster needs no treatment: the artwork's top edge
   is the same cream as the page, so the join is invisible.

   Space at the *sides* does show a join, because the artwork's left and right
   edges are buildings. Only on those viewports, a blurred bottom-anchored
   copy of the same artwork (already cached, no extra request) fills the
   bands so the skyline fades out instead of meeting a hard cream edge. */
.stage::before {
  content: "";
  position: absolute;
  /* Oversized by at least the blur radius so the blur does not fade out
     and expose a hard edge at the viewport boundary. */
  inset: calc(-1 * max(6%, 60px));
  background-color: var(--cream);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(42px);
  transform: scale(1.04);
}

/* Wider than desktop.png's 16:9 -> bands at the sides. */
@media (orientation: landscape) and (min-aspect-ratio: 16 / 9) {
  .stage::before {
    background-image: url("desktop.png");
  }
}

/* Wider than mobile-verical.png's 9:16 -> bands at the sides. */
@media (orientation: portrait) and (min-aspect-ratio: 9 / 16) {
  .stage::before {
    background-image: url("mobile-verical.png");
  }
}

.poster {
  position: relative;
  margin: 0;
  /* Kills the baseline gap under the image. */
  line-height: 0;
}

/* "Contain", computed rather than clipped: take the full viewport width,
   unless the viewport is proportionally wider than the artwork, in which case
   height is the tighter axis and the width that exactly fills it is
   100svh x the artwork's aspect ratio.

   Height follows from the artwork's own ratio, so the image is never
   distorted and never cropped. Driving the width this way (instead of just
   capping it with max-width) also lets the artwork scale up past its native
   1920px and stay full-bleed on large displays. The figure shrink-wraps the
   result, which keeps the hotspot percentages relative to the artwork. */
.poster__img {
  display: block;
  width: min(100vw, calc(100vh * var(--ar)));
  width: min(100vw, calc(100svh * var(--ar)));
  height: auto;
}

/* --------------------------------------------------------------------------
   Clickable hotspot aligned to the button drawn into the artwork.
   -------------------------------------------------------------------------- */
.poster__cta {
  position: absolute;
  left: var(--cta-left);
  top: var(--cta-top);
  width: var(--cta-width);
  height: var(--cta-height);
  border-radius: 999px;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease;
}

/* A few pixels of invisible slop around the pill so the target stays easy to
   hit on small screens, without shifting the visible alignment. */
.poster__cta::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
}

.poster__cta:hover,
.poster__cta:focus-visible {
  /* Lightens the painted button underneath instead of drawing a new one. */
  background-color: rgb(255 255 255 / 18%);
}

.poster__cta:active {
  background-color: rgb(0 0 0 / 8%);
}

.poster__cta:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .poster__cta {
    transition: none;
  }
}

/* Coarse pointers get no hover state, so skip the highlight there. */
@media (hover: none) {
  .poster__cta:hover {
    background-color: transparent;
  }
}

/* Visible to screen readers and keyboard users, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}