/* =============================================================================
   Del Plaza — the launch screen
   "The Lights Come On". The night before the first market opens: a dark field,
   one lamp breathing at the centre, the neighbours' windows dark and locked, and
   a count in thin gold figures until the first market opens.

   Two acts, one page. Before the opening the count reads down; from the opening
   the page takes the class is-open — the lamp flares, the sign stands, the count
   reads up, and the house is one nation open until the lights go out.

   The screen stands inside the house's frame: the header and the footer are the
   shared ones (_partials/header.html.twig, _partials/footer.html.twig), and this
   sheet paints only the field between them. Its ground is the house's own dark
   (Imperial Plum, the darkest surface on the list), the light is Golden Milk, and
   the neighbours' windows are the same light held down to a breath. Univers only,
   at its lightest cut — this is dusk in a lamplit shop, not a strobe.

   No letter spacing is set anywhere (docs/design.md). The lamp, the glow and the
   windows are drawn here in CSS: no picture, no request, nothing that can fail.

   One scene for every visitor, and no motion setting stills any of it: the lamp
   breathes, the lamp flares and the headline turns for all alike. The headline's box
   is fixed by its longest line, so the turning never moves the field above it.
   ============================================================================= */

/* =============================================================================
   1. Canvas
   The field, one column, standing between the header and the footer of the frame.
   Imperial Plum to its own edges, with a breath of Deep Navy at its crown — the
   last of the evening sky. No html or body rule is set here: the document's ground
   is the frame's, and the dark belongs to the screen.
   ============================================================================= */
.launch {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--spacing-xl) var(--spacing-sm);
  background-color: var(--imperial-plum);
  background-image: radial-gradient(115% 70% at 50% 6%, rgba(60, 71, 122, 0.6), rgba(46, 26, 71, 0) 60%);
  color: var(--golden-milk);
  font-weight: 300;
  text-align: center;
}

/* =============================================================================
   2. The field — the four windows and the lamp
   The neighbours' windows stand above the lamp, dark and locked; the lamp is the
   house that opens. All four are one plate of the house's own geometry and one
   size, and each carries the form of its city — drawn once, in the sprite at the
   head of the template, and worn here by name: the Haussmann window on Paris, the
   arcade on Milan, the casement on Madrid, the fanlight on the lit window (Lisbon,
   the house that opens).

   The count is a count to ONE opening, and the neighbours do not answer it. They
   are other nations' houses: they keep their dark until their own day comes round,
   and nothing on this field lights but the lamp.

   The city's name stands on a plate beneath every window, the lit one and the
   locked ones alike — one size, one weight, and the house's gold, held quiet on the
   locked ones and at full strength on the lit one — on the house's own dark, so it
   is read from across the room rather than guessed at.
   ============================================================================= */
.launch__field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.launch__windows {
  display: flex;
  gap: var(--spacing-sm);
}

.launch__window {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  transition: opacity 1600ms var(--ease-out);

  /* One material for every form: gold joinery, dark glass, a gold hairline for the
     bars. The form is the drawing; only these three inks tell a locked window from
     the lit one. */
  --window-frame: rgba(236, 217, 172, 0.85);
  --window-glass: #140c22;
  --window-line:  rgba(236, 217, 172, 0.62);
}

/* The form itself: drawn once, in the sprite at the head of the template, and
   placed here by name. It is inline — one document, no request — so nothing on the
   field can fail to load. */
.launch__window-art {
  display: block;
  width: 4.5rem;
  height: 5.5rem;
  overflow: visible;
}

/* The name-plate: the city beneath the window, on the house's own dark. It is the
   same plate on every window; its gold is not — a city still in the dark is named
   quietly, and the city the house is opening in is named in full (see
   .launch__window--lit). */
.launch__window-name {
  width: 4.5rem;
  margin-top: var(--spacing-quark);
  padding: 0.1875rem 0;
  background-color: rgba(20, 12, 32, 0.85);
  border-top: 1px solid rgba(236, 217, 172, 0.25);
  font-size: 0.5625rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: rgba(236, 217, 172, 0.7);
}

/* The lamp: the one light on the field, breathing slowly. The glow is the lamp's
   own halo, painted behind the lit window. */
.launch__lamp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The lit window stands above the lamp's own halo. */
.launch__lamp .launch__window {
  position: relative;
  z-index: 1;
}

.launch__lamp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18rem;
  height: 18rem;
  margin: -9rem 0 0 -9rem;
  border-radius: 50%;
  background-image: radial-gradient(closest-side, rgba(236, 217, 172, 0.3), rgba(236, 217, 172, 0.1) 46%, rgba(236, 217, 172, 0) 76%);
  animation: launch-breathe 7s var(--ease-in-out) infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes launch-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* The window that is lit. It is the house that opens: the same joinery as the
   neighbours', filled with the house's own gold where they hold a breath of it, and
   glowing. It is the same plate as theirs — one size, one name-plate — so it is the
   light, and the form around it, that tell the lit window from the locked ones. */
.launch__window--lit {
  --window-frame: var(--golden-milk);
  --window-glass: var(--golden-milk);
  --window-line:  rgba(46, 26, 71, 0.78);
}

.launch__window--lit .launch__window-art {
  filter: drop-shadow(0 0 0.7rem rgba(236, 217, 172, 0.6));
}

.launch__window--lit .launch__window-name {
  color: var(--golden-milk);
  border-top-color: rgba(236, 217, 172, 0.5);
}

/* =============================================================================
   3. The turn — is-open
   The lamp flares as the market opens (the halo widens and holds), the neighbours
   are left in the dark, and the page says what the house is.
   ============================================================================= */
.launch.is-open .launch__lamp::before {
  width: 26rem;
  height: 26rem;
  margin: -13rem 0 0 -13rem;
  opacity: 1;
  transition: width 900ms var(--ease-out), height 900ms var(--ease-out), margin 900ms var(--ease-out);
  animation: launch-breathe 9s var(--ease-in-out) infinite;
}

.launch.is-open .launch__field .launch__window:not(.launch__window--lit) {
  opacity: 0.5;
}

/* =============================================================================
   4. The type — the headline, the line beneath it, the sign and the promise
   Thin gold figures on the house's dark. The headline wears the family's lightest
   cut at the largest size the page can hold; the sign wears the same cut, set in
   the house's uppercase.
   ============================================================================= */
.launch__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 36rem;
}

/* The headline. EVERY LINE IS LAID IN ONE CELL, one standing over the others: the box is as
   tall as the longest line and keeps that height whichever line is showing, so the field above
   stands where it stands — a short line cannot pull the windows down, a long one cannot push
   them up. Only the standing line is inked, and it sits in the middle of the box, so the room
   the box holds is shared evenly above and below the words rather than left hanging beneath
   them. */
.launch__headline {
  display: grid;
  width: 100%;
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.625rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--golden-milk);
  transition: opacity 600ms var(--ease-out);
}

.launch__headline-line {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.launch__headline-line.is-standing {
  opacity: 1;
}

.launch__headline.is-fading {
  opacity: 0;
}

.launch__sub {
  margin: 0;
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  font-weight: 300;
  color: rgba(236, 217, 172, 0.8);
}

.launch__sign,
.launch__beat,
.launch__clock {
  display: none;
  margin: 0;
}

.launch__sign {
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--golden-milk);
}

.launch__beat {
  font-size: clamp(0.875rem, 2vw, 1.0625rem);
  font-weight: 300;
  color: rgba(236, 217, 172, 0.8);
}

/* The clock in the open state: the hours the market has had, as figures with their
   colons — the same reading the sign beneath it promises. */
.launch__clock {
  font-size: clamp(2.25rem, 9vw, 4.5rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--golden-milk);
}

.launch.is-open .launch__headline,
.launch.is-open .launch__sub,
.launch.is-open .launch__count {
  display: none;
}

.launch.is-open .launch__sign,
.launch.is-open .launch__beat,
.launch.is-open .launch__clock {
  display: block;
}

/* =============================================================================
   5. The count, reading down
   Days, hours, minutes and seconds, in the house's thin gold: the figures at the
   page's largest size, tabular so the digits never shift as the seconds turn, and
   their names small beneath. No motion setting stills the page, and none stills the count.
   ============================================================================= */
.launch__count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.launch__part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-quark);
  min-width: 3.5rem;
}

.launch__num {
  font-size: clamp(1.75rem, 7vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--golden-milk);
}

.launch__unit {
  font-size: 0.625rem;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(236, 217, 172, 0.6);
}

.launch__dot {
  align-self: center;
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(236, 217, 172, 0.32);
}

/* =============================================================================
   6. The merchant's door
   The one thing on this page that can be pressed. A seller needs their desk while
   the house is shut, and the launch screen is the only face the site has until the
   first market opens — so the door stands at the foot of the page, quiet: a
   rectangle of this house, square at the top and lit at the brim, in the house's
   own gold on its own dark.
   ============================================================================= */
.launch__base {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.launch__base-label {
  font-size: 0.75rem;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(236, 217, 172, 0.55);
}

.launch__door {
  display: inline-block;
  padding: var(--spacing-nano) var(--spacing-sm);
  border: 1px solid rgba(236, 217, 172, 0.4);
  border-radius: var(--border-radius-sticker);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--golden-milk);
  text-decoration: none;
  transition: border-color 300ms var(--ease-out), background-color 300ms var(--ease-out);
}

.launch__door:hover,
.launch__door:focus-visible {
  border-color: var(--golden-milk);
  background-color: rgba(236, 217, 172, 0.1);
}

.launch__door:focus-visible {
  outline: 2px solid var(--golden-milk);
  outline-offset: 2px;
}

/* =============================================================================
   7. Responsive & motion
   Legible at phone size: the headline and the figures are set in the viewport's
   own units above, and the field tightens rather than shrinks out of the frame.
   ============================================================================= */
@media (max-width: 575.98px) {
  .launch {
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xs);
  }

  .launch__windows {
    gap: var(--spacing-xs);
  }

  .launch__window-art {
    width: 3.75rem;
    height: 4.5rem;
  }

  .launch__window-name {
    width: 3.75rem;
  }

  .launch__lamp::before {
    width: 13rem;
    height: 13rem;
    margin: -6.5rem 0 0 -6.5rem;
  }

  .launch.is-open .launch__lamp::before {
    width: 18rem;
    height: 18rem;
    margin: -9rem 0 0 -9rem;
  }

  .launch__count {
    gap: var(--spacing-xs);
  }

  .launch__part {
    min-width: 2.5rem;
  }

  .launch__dot {
    font-size: 1rem;
  }
}

/* A short viewport (a phone with heavy chrome, a landscape phone) scrolls rather
   than cuts the count. */
@media (max-height: 640px) {
  .launch {
    justify-content: flex-start;
    padding-top: var(--spacing-xl);
  }
}