/* The opening: the box is shut, a loose match lies on the striker and the
   drawer's pull tab sticks out. Striking lights the couple's matches, the
   flame's paper lights the names, then the drawer slides out to the photo.
   Every state here is static; motion only runs while body.is-striking. */

/* ---------- the shut box ---------- */
.locked .drawer {
  grid-template-rows: 0fr auto;
}

.locked .tray-photo {
  visibility: hidden;
}

.locked .names--lit {
  clip-path: inset(0 100% 0 0);
}

.locked .couple-flame {
  transform: scale(0);
}

/* struck: the flame and the lit names come before the drawer moves */
.locked.is-lighting .couple-flame {
  transform: scale(1);
}

.locked.is-lighting .names--lit {
  clip-path: inset(0 0 0 0);
}

.locked .set,
.locked .loupe,
.locked .flag {
  display: none;
}

/* once open, the loose match and the pull tab are spent */
.is-striking .strike-hint,
body:not(.locked) .sleeve .match,
body:not(.locked) .strike-hint,
body:not(.locked) .pull {
  display: none;
}

/* ---------- the loose match on the striker ---------- */
.match {
  --dx: 0px;

  position: absolute;
  top: 50%;
  left: 14px;
  width: 168px;
  height: 44px;
  margin-top: -22px;
  cursor: grab;
  touch-action: none;
  transform: translateX(var(--dx));
  user-select: none;
  -webkit-user-select: none;
}

.match.is-dragging {
  cursor: grabbing;
}

.match-stick {
  position: absolute;
  top: 17px;
  left: 0;
  width: 148px;
  height: 11px;
  border: 2.5px solid var(--black);
  background: var(--paper);
}

.match-head {
  position: absolute;
  top: 11px;
  right: 0;
  width: 26px;
  height: 23px;
  border: 2.5px solid var(--black);
  border-radius: 50%;
  background: var(--red);
}

.match-flame {
  position: absolute;
  right: -6px;
  bottom: 18px;
  width: 38px;
  height: 58px;
  overflow: visible;
  transform: scale(0);
  transform-origin: 50% 96%;
}

.match.is-lit .match-flame {
  transform: scale(1);
}

.sparks {
  position: absolute;
  top: 22px;
  right: 6px;
  width: 0;
  height: 0;
}

.sparks i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 14px;
  height: 4px;
  background: var(--paper);
  opacity: 0;
}

.strike-hint {
  position: absolute;
  top: 50%;
  left: 200px;
  width: 64px;
  height: 20px;
  margin-top: -10px;
  fill: none;
  stroke: var(--paper);
  stroke-width: 3;
  stroke-linecap: square;
}

/* ---------- motion, only when it is wanted ---------- */
@media (prefers-reduced-motion: no-preference) {
  .locked:not(.is-striking) .sleeve .match:not(.is-dragging, .is-auto),
  .striker--rsvp.is-ready .match:not(.is-dragging, .is-auto, .is-lit) {
    animation: match-nudge 3.2s var(--ease-out) 1.2s infinite;
  }

  .strike-hint path {
    animation: hint-run 1.6s steps(3, jump-none) infinite;
  }

  .match.is-scraping .sparks i {
    animation: spark 0.32s linear infinite;
  }

  .match.is-scraping .sparks i:nth-child(2) {
    animation-delay: 0.1s;
    rotate: -38deg;
  }

  .match.is-scraping .sparks i:nth-child(3) {
    animation-delay: 0.2s;
    rotate: 34deg;
  }

  .match.is-auto {
    transition: transform 0.42s cubic-bezier(0.5, 0, 0.75, 0);
  }

  .match-flame {
    transition: transform 0.45s cubic-bezier(0.3, 1.7, 0.5, 1);
  }

  .is-striking .couple-flame {
    transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.12s;
  }

  .is-striking .names--lit {
    transition: clip-path 0.6s var(--ease-out) 0.28s;
  }

  .is-striking .drawer {
    transition:
      grid-template-rows 1.1s var(--ease-out) 0.15s,
      grid-template-columns 1.1s var(--ease-out) 0.15s;
  }

  .is-striking .sleeve .match {
    transition: opacity 0.4s 0.2s;
  }

  .is-striking .flag {
    animation: rise 0.6s var(--ease-out) 1s both;
  }
}

@keyframes match-nudge {
  0%,
  78%,
  100% {
    transform: translateX(0);
  }
  86% {
    transform: translateX(14px);
  }
}

@keyframes hint-run {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes spark {
  0% {
    opacity: 1;
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-34px) scaleX(1);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* ---------- desktop: the drawer is shut sideways ---------- */
@media (min-width: 900px) {
  .locked .drawer {
    grid-template-rows: none;
    grid-template-columns: 0fr auto;
  }

  .match {
    left: 24px;
  }

  .strike-hint {
    left: 214px;
  }
}

.locked .stage {
  padding-bottom: var(--gutter);
}