/* A fairground poster after dark: sunburst rays, a string of bunting and three
   fat pills. The page is a signpost, not a brochure — everything here is in
   service of getting someone to one of three doors without reading. */

:root {
  --purple: #2d1147;
  --purple-lift: #3a1a5c;
  --cream: #f7f0e3;
  --pink: #ec4a86;
  --pink-deep: #96204c;
  --yellow: #ffd23f;
  --teal: #4ec9a8;
  --teal-deep: #2a8d70;
  --orange: #e8873a;
  --orange-deep: #a85311;
  --green: #a8d33f;

  /* Web-safe only: no downloads, no FOUT, and the same shapes on every
     browser. Arial Black ships on Windows and macOS; where it doesn't, the
     stack lands on Helvetica or Arial at weight 900, which is close enough
     that the poster still reads as a poster. */
  --display: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--purple);
  color: var(--cream);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* --- The set -------------------------------------------------------------- */

/* Rays fan out from a point just above the page, so they spread as they come
   down rather than converging on the title. Fixed, so scrolling moves the
   content across the backdrop instead of dragging it along. */
.rays {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: repeating-conic-gradient(
    from 178deg at 50% -6%,
    var(--purple-lift) 0deg 6deg,
    var(--purple) 6deg 12deg
  );
}

/* Corners knocked back so the middle of the page reads as lit. */
.rays::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    125% 85% at 50% 2%,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* One tile of five flags, repeated — it fills any width, however wide the
   screen, without a hundred elements in the markup. */
.bunting {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 62px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='62' viewBox='0 0 250 62'%3E%3Cpath d='M0 6 H250' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='2' fill='none'/%3E%3Cpolygon points='3,6 45,6 24,50' fill='%23e8873a'/%3E%3Cpolygon points='53,6 95,6 74,54' fill='%23a8d33f'/%3E%3Cpolygon points='103,6 145,6 124,50' fill='%23ec4a86'/%3E%3Cpolygon points='153,6 195,6 174,54' fill='%23ffd23f'/%3E%3Cpolygon points='203,6 245,6 224,50' fill='%234ec9a8'/%3E%3C/svg%3E")
    repeat-x;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Clear of the bunting, which hangs over the top of the page at a fixed
     height — so the floor of this has to clear it on the narrowest screen,
     not scale down with the viewport. */
  padding: clamp(104px, 12vw, 132px) clamp(16px, 4vw, 40px) 40px;
}

/* The strapline, tagline, note, pill captions and footer line are all empty
   in the markup, waiting for copy. Each reserves one line of its own type so
   the layout does not jump when the words arrive. */
.eyebrow {
  margin: 0 0 10px;
  min-height: 1.5em;
  font-size: clamp(0.7rem, 1.9vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
}

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.7rem, 11vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cream);
  transform: rotate(-1.6deg);
  /* A hard pink offset does the poster-print trick; the soft one under it
     lifts the whole thing off the rays. */
  text-shadow: 5px 6px 0 var(--pink), 0 16px 34px rgba(0, 0, 0, 0.5);
}

.title span {
  display: block;
}

.tagline {
  margin: 20px 0 0;
  min-height: 1.5em;
  max-width: 34rem;
  font-size: clamp(0.95rem, 2.3vw, 1.1rem);
  color: rgba(247, 240, 227, 0.82);
}

/* --- The three doors ------------------------------------------------------ */

.doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

/* Chunky and pressable: a solid edge underneath rather than a blur, so they
   read as objects on a stall rather than boxes on a form. */
.pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 16px 34px 18px;
  font: inherit;
  color: var(--purple);
  text-decoration: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pill__name {
  font-size: clamp(1.02rem, 2.5vw, 1.2rem);
  font-weight: 800;
}

.pill__note {
  font-size: 0.76rem;
  font-style: italic;
  opacity: 0.75;
}

.pill--orange {
  background: linear-gradient(180deg, #f2a058 0%, var(--orange) 60%, #dd7a26 100%);
  box-shadow: 0 6px 0 var(--orange-deep), 0 12px 22px rgba(0, 0, 0, 0.38);
}

.pill--teal {
  background: linear-gradient(180deg, #6fdcbc 0%, var(--teal) 60%, #38bb96 100%);
  box-shadow: 0 6px 0 var(--teal-deep), 0 12px 22px rgba(0, 0, 0, 0.38);
}

.pill--orange:hover,
.pill--teal:hover {
  transform: translateY(2px);
}

.pill--orange:hover {
  box-shadow: 0 4px 0 var(--orange-deep), 0 9px 18px rgba(0, 0, 0, 0.38);
}

.pill--teal:hover {
  box-shadow: 0 4px 0 var(--teal-deep), 0 9px 18px rgba(0, 0, 0, 0.38);
}

.pill--orange:active,
.pill--teal:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Nothing to press yet. It keeps the shape of the others so it still reads as
   one of the three doors — just one that hasn't been unlocked. */
.pill--off {
  background: linear-gradient(180deg, #6a5c7f 0%, #574a6b 60%, #4a3e5c 100%);
  color: rgba(247, 240, 227, 0.62);
  box-shadow: 0 6px 0 #38304a, 0 12px 22px rgba(0, 0, 0, 0.3);
  cursor: not-allowed;
}

.note {
  margin: 18px 0 0;
  min-height: 1.5em;
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(247, 240, 227, 0.58);
}

/* --- Countdown ------------------------------------------------------------ */

.countdown {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: clamp(18px, 3vw, 30px) auto 0;
}

.countdown[hidden] {
  display: none;
}

.countdown__splodges {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

/* Laid over the splodges rather than after them, so the paint sits behind the
   words wherever the number happens to wrap. */
.countdown__line {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 8%;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.45rem, 5.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cream);
  /* The paint underneath runs from yellow to pink, so the words carry their
     own dark backing rather than trusting any one splodge for contrast. */
  text-shadow: 3px 4px 0 rgba(45, 17, 71, 0.9), 0 0 24px rgba(45, 17, 71, 0.75);
}

/* --- Foot ----------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 1;
  padding: 16px 20px 26px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(247, 240, 227, 0.45);
}

.foot p {
  margin: 0;
  min-height: 1.5em;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}