/* =========================================================
   PARTY ROOM PREPARATION
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background-color: #f2f2e6;
  color: #111111;

  font-family:
    Verdana,
    Arial,
    sans-serif;
}


/* =========================================================
   PARTY ROOM AND TRIGGER STAGE
   ========================================================= */

.homepage {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;

  padding: 20px;
}

.trigger-stage {
  position: relative;

  width: min(100%, 1000px);
  min-height: 760px;

  overflow: hidden;
}


/* =========================================================
   OPENING-DAY CENTERPIECE
   ========================================================= */

.countdown-panel {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 20;

  width: min(560px, 76%);

  padding: 24px 18px;

  text-align: center;

  transform: translate(-50%, -50%);
}

.countdown-heading {
  margin: 0 0 22px;

  font-family:
    Verdana,
    Arial,
    sans-serif;

  font-size: clamp(1.45rem, 3vw, 2.35rem);
  font-weight: bold;

  letter-spacing: 0.14em;
}

.countdown-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 12px;
}

.countdown-unit {
  min-width: 0;
}

.countdown-number {
  display: block;

  font-family:
    "Arial Black",
    Arial,
    sans-serif;

  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1;
}

.countdown-label {
  display: block;

  margin-top: 7px;

  font-family:
    Verdana,
    Arial,
    sans-serif;

  font-size: clamp(0.58rem, 1.4vw, 0.9rem);
  font-weight: bold;

  letter-spacing: 0.08em;
}

.enter-link {
  display: inline-block;

  margin-top: 34px;
  padding: 7px 15px;

  color: #0000cc;

  font-family:
    "Times New Roman",
    Times,
    serif;

  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  font-weight: bold;

  text-decoration: underline;
}

.enter-link:visited {
  color: #551a8b;
}

.enter-link:hover,
.enter-link:focus-visible {
  color: #cc0000;
}


/* =========================================================
   TRIGGER DECORATIONS
   ========================================================= */

.trigger {
  position: absolute;

  z-index: 10;

  display: block;

  width: 108px;
  height: auto;

  image-rendering: pixelated;

  pointer-events: none;
  user-select: none;

  animation-name: trigger-drift;
  animation-timing-function: steps(9, end);
  animation-iteration-count: infinite;
}


/* =========================================================
   TRIGGER PLACEMENT CHART
   ========================================================= */

/* Upper-left */

.trigger-1 {
  top: 3%;
  left: 11%;

  width: 112px;

  animation-duration: 19s;
  animation-delay: -4s;
}


/* Upper-center-left */

.trigger-2 {
  top: 12%;
  left: 31%;

  width: 92px;

  animation-duration: 24s;
  animation-delay: -13s;
}


/* Upper-center-right */

.trigger-3 {
  top: 4%;
  right: 29%;

  width: 104px;

  animation-duration: 21s;
  animation-delay: -8s;
}


/* Upper-right */

.trigger-4 {
  top: 10%;
  right: 8%;

  width: 118px;

  animation-duration: 27s;
  animation-delay: -16s;
}


/* Middle-left */

.trigger-5 {
  top: 34%;
  left: 2%;

  width: 94px;

  animation-duration: 22s;
  animation-delay: -6s;
}


/* Middle-right */

.trigger-6 {
  top: 31%;
  right: 1%;

  width: 102px;

  animation-duration: 29s;
  animation-delay: -18s;
}


/* Lower-left */

.trigger-7 {
  bottom: 14%;
  left: 8%;

  width: 116px;

  animation-duration: 18s;
  animation-delay: -10s;
}


/* Lower-center-left */

.trigger-8 {
  bottom: 2%;
  left: 28%;

  width: 91px;

  animation-duration: 25s;
  animation-delay: -3s;
}


/* Lower-center-right */

.trigger-9 {
  right: 27%;
  bottom: 5%;

  width: 107px;

  animation-duration: 23s;
  animation-delay: -14s;
}


/* Lower-right */

.trigger-10 {
  right: 7%;
  bottom: 16%;

  width: 98px;

  animation-duration: 28s;
  animation-delay: -20s;
}


/* Far middle-left */

.trigger-11 {
  top: 57%;
  left: 17%;

  width: 76px;

  animation-duration: 31s;
  animation-delay: -11s;
}


/* Far middle-right */

.trigger-12 {
  top: 58%;
  right: 17%;

  width: 82px;

  animation-duration: 20s;
  animation-delay: -2s;
}


/* =========================================================
   TRIGGER DRIFT
   ========================================================= */

@keyframes trigger-drift {
  0%,
  15% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

  23%,
  37% {
    transform:
      translate(2px, -3px)
      rotate(1deg);
  }

  45%,
  58% {
    transform:
      translate(-2px, -1px)
      rotate(-1deg);
  }

  67%,
  80% {
    transform:
      translate(1px, 2px)
      rotate(1deg);
  }

  89%,
  96% {
    transform:
      translate(-1px, 1px)
      rotate(0deg);
  }

  100% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }
}


/* =========================================================
   TABLET AND PHONE LAYOUT
   ========================================================= */

@media (max-width: 700px) {
  .homepage {
    align-items: flex-start;

    padding: 10px;
  }

  .trigger-stage {
    min-height: 700px;
  }

  .countdown-panel {
    width: 72%;

    padding-right: 5px;
    padding-left: 5px;
  }

  .countdown-values {
    grid-template-columns: repeat(2, 1fr);

    gap: 20px 8px;
  }

  .trigger {
    width: 78px;
  }

  .trigger-1 {
    left: 2%;

    width: 82px;
  }

  .trigger-2 {
    top: 18%;
    left: 22%;

    width: 62px;
  }

  .trigger-3 {
    right: 22%;

    width: 72px;
  }

  .trigger-4 {
    right: 1%;

    width: 84px;
  }

  .trigger-5 {
    top: 38%;
    left: -3%;

    width: 68px;
  }

  .trigger-6 {
    top: 37%;
    right: -3%;

    width: 71px;
  }

  .trigger-7 {
    bottom: 10%;
    left: 0;

    width: 81px;
  }

  .trigger-8 {
    bottom: 0;
    left: 22%;

    width: 66px;
  }

  .trigger-9 {
    right: 22%;
    bottom: 1%;

    width: 72px;
  }

  .trigger-10 {
    right: 0;
    bottom: 11%;

    width: 72px;
  }

  .trigger-11 {
    top: 62%;
    left: 13%;

    width: 54px;
  }

  .trigger-12 {
    top: 64%;
    right: 13%;

    width: 58px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .trigger {
    animation: none;
  }
}