/* The till: who the present is for, then the present unwrapped. Loaded after site.css. */

/* A tag you write on hangs straight. */
.tag-wrap {
  width: min(100%, 26rem);
  transform: none;
  animation: none;
}
.face[hidden],
.desk[hidden],
.parcel[hidden],
.msg[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- writing on the tag */

.desk {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.4rem;
  text-align: left;
}
.field {
  display: grid;
  gap: 0.2rem;
}
.field-name {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* A field is a line on the tag to write on. */
.field input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.35rem 0.15rem 0.25rem;
  border: 0;
  border-bottom: 1.5px solid var(--wine);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--heart);
  font-family: var(--text);
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  appearance: none;
  -webkit-appearance: none;
}
.field input:focus-visible {
  outline: none;
  border-bottom: 2.5px solid var(--wine);
  background: rgba(196, 214, 231, 0.35);
}

.desk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  margin-top: 0.4rem;
}

/* ---------------------------------------------------------------- buttons: wine ribbon cut with tag corners */

.btn {
  --notch: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  min-width: 9.5rem;
  padding: 0.7rem 1.4rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: var(--wine);
  color: var(--cream);
  font-family: var(--text);
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.btn:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}
.btn:active {
  transform: translateY(1px);
  background: var(--wine-deep);
}
.btn[disabled] {
  cursor: progress;
  background: var(--powder);
  color: var(--wine);
}
/* The outlined one: a wine line around cream. */
.btn.ghost {
  background: var(--wine);
  color: var(--wine);
}
.btn.ghost::before {
  --d: 1.5px;
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--cream);
  transition: background-color 160ms ease-out;
}
.btn.ghost > span {
  position: relative;
}
.btn,
.btn.ghost::before {
  --nr: calc(var(--notch) + var(--d, 0px));
  --nc: calc(-1 * var(--d, 0px));
  --ne: calc(100% + var(--d, 0px));
  -webkit-mask:
    radial-gradient(circle at var(--nc) var(--nc), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at var(--ne) var(--nc), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at var(--nc) var(--ne), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at var(--ne) var(--ne), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--nc) var(--nc), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at var(--ne) var(--nc), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at var(--nc) var(--ne), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at var(--ne) var(--ne), transparent var(--nr), #000 calc(var(--nr) + 0.5px)) bottom right / 51% 51% no-repeat;
}
.btn.ghost:active::before {
  background: rgba(196, 214, 231, 0.5);
}
@media (hover: hover) {
  .btn:hover {
    background: var(--wine-deep);
  }
  .btn.ghost:hover {
    background: var(--wine);
  }
  .btn.ghost:hover::before {
    background: rgba(196, 214, 231, 0.45);
  }
}

/* Quiet controls: italic words on a dashed underline. */
.quiet {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wine);
  font-family: var(--text);
  font-style: italic;
  font-size: 1.02rem;
  text-decoration: underline dashed 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
@media (hover: hover) {
  .quiet:hover {
    text-decoration-style: solid;
  }
}

.msg {
  margin: 0;
  padding: 0.7rem 0.85rem 0.65rem;
  background: rgba(166, 30, 46, 0.08);
  box-shadow: inset 0 0 0 1px rgba(166, 30, 46, 0.45);
  color: var(--heart);
  font-size: 1.05rem;
  line-height: 1.35;
}
.msg small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.92rem;
  color: var(--ink);
}

/* ---------------------------------------------------------------- unwrapping */

/* Opened: the ribbon slips off both ways and the string goes with it. Leaving ties it again. */
.is-open .ribbon-v {
  transform: translateY(-102%);
}
.is-open .ribbon-h {
  transform: translateX(102%);
}
.is-open .bow {
  opacity: 0;
  transform: translate(-50%, -160%) scale(0.7);
}
.tag-wrap::before {
  transition: opacity 360ms ease-out;
}
.is-open .tag-wrap::before {
  opacity: 0;
}

/* The tag turns over to the guest's name. */
@keyframes turn-out {
  to { transform: scaleX(0); }
}
@keyframes turn-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.tag.turning {
  animation: turn-out 190ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
.tag.turned {
  animation: turn-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.per {
  margin: 0.2rem 0 0;
  text-align: center;
}
.per-word {
  display: block;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.per-name {
  display: block;
  font-family: var(--hand);
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 1.05;
  color: var(--wine);
}

/* ---------------------------------------------------------------- the parcel */

/* The box casts the same shadow as every other paper part, and its tissue has a wine edge,
   so the stripes never melt into the harlequin paper. */
.parcel {
  filter: drop-shadow(0 14px 14px rgba(66, 10, 19, 0.28)) drop-shadow(0 2px 2px rgba(66, 10, 19, 0.16));
  width: min(100%, 36rem);
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  scroll-margin-top: 1rem;
}
/* Tissue in the box: the blue and cream stripes of an awning. */
.liner {
  --notch: 16px;
  box-shadow: inset 0 0 0 1.5px var(--wine), inset 0 0 0 6px var(--cream), inset 0 0 0 7px rgba(92, 15, 27, 0.5);
  padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1.4rem, 4vw, 2.75rem);
  background: repeating-linear-gradient(90deg, var(--powder) 0 22px, var(--cream) 22px 44px);
}
.steps {
  display: grid;
  gap: clamp(0.8rem, 2.5vw, 1.1rem);
}
.step[hidden],
.run[hidden] {
  display: none;
}
.step {
  scroll-margin-top: 1rem;
}
/* On the tissue the cards cast only a thin shadow, so the stripes keep their colours. */
.liner .holder {
  filter: drop-shadow(0 1px 1.5px rgba(66, 10, 19, 0.22));
}
.step .frame-in {
  padding: 1.3rem clamp(1rem, 4vw, 1.6rem) 1.2rem;
}
.step-title {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(92, 15, 27, 0.22);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--wine);
}
.step-title:focus {
  outline: none;
}
.step-n {
  font-family: var(--text);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--wine);
  font-variant-numeric: lining-nums;
}
/* Words to find on screen (a server name, a button) are the one inline accent: wine, upright. */
.key {
  color: var(--wine);
  font-weight: 400;
  white-space: nowrap;
}
.step p {
  margin: 0 0 0.8rem;
  max-width: 62ch;
}
.step .note-text {
  padding-left: 0.85rem;
  border-left: 2px solid var(--dusty);
  color: var(--ink-soft);
}
.step .btn {
  display: flex;
  width: 100%;
  margin: 0.3rem 0 0.9rem;
}

.more {
  margin: 0 0 0.8rem;
}
.more summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-style: italic;
  color: var(--wine);
}
.more summary::-webkit-details-marker {
  display: none;
}
.more summary > span:last-child {
  text-decoration: underline dashed 1px;
  text-underline-offset: 0.3em;
}
/* A drawn plus that becomes a minus. */
.plus {
  position: relative;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--wine);
  border-radius: 50%;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--wine);
  transform: translate(-50%, -50%);
}
.plus::before {
  width: 0.55rem;
  height: 1.5px;
}
.plus::after {
  width: 1.5px;
  height: 0.55rem;
  transition: transform 200ms ease-out;
}
.more[open] .plus::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.tips {
  margin: 0 0 0.8rem;
  padding-left: 1.3rem;
}
.tips li {
  margin: 0 0 0.45rem;
  padding-left: 0.2rem;
}
.tips li::marker {
  color: var(--wine);
  font-variant-numeric: lining-nums;
}

.copy {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
}
.copy input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.45rem 0.2rem;
  border: 0;
  border-bottom: 1.5px dashed var(--wine);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--text);
  font-size: 0.9rem;
}
.copy .btn {
  margin: 0;
}

.qr {
  display: grid;
  justify-items: center;
  margin: 0.3rem 0 0.9rem;
}
.qr img {
  width: min(100%, 15rem);
  height: auto;
  padding: 0.5rem;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--wine);
  image-rendering: pixelated;
}

/* Marking a step done: the small seal fills with a heart. */
.tick {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 2.9rem;
  margin: 0.6rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wine);
  font-family: var(--text);
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}
.tick svg {
  flex: none;
  width: 34px;
  height: 34px;
}
.tick .tick-heart {
  transform-origin: 48px 50px;
  transform: scale(0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tick {
  margin-top: 0.9rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(92, 15, 27, 0.22);
}
.tick.done {
  cursor: default;
  color: var(--ink-soft);
}
.tick.done .tick-heart {
  transform: scale(1);
}
.tick:focus-visible {
  outline-offset: 4px;
}
@media (hover: hover) {
  .tick:not(.done):hover span {
    text-decoration: underline 1px;
    text-underline-offset: 0.3em;
  }
}

/* While steps are still to come: a small card with the count and the two ways out. */
/* The count is a line on a cream band laid across the tissue, not one more card. */
.run {
  padding: 0.55rem clamp(1rem, 4vw, 1.4rem) 0.4rem;
  background: var(--cream);
  box-shadow: inset 0 1px 0 rgba(92, 15, 27, 0.35), inset 0 -1px 0 rgba(92, 15, 27, 0.35);
}
.count {
  margin: 0;
  font-family: var(--text);
  font-size: 1.1rem;
  color: var(--wine);
  font-variant-numeric: lining-nums tabular-nums;
}
.run-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1.4rem;
}

/* The end: a thank-you card. */
.finale .frame-in {
  padding: 1.2rem clamp(1rem, 4vw, 1.6rem) 1.4rem;
  text-align: center;
}
.finale .hand {
  font-size: clamp(2.8rem, 8vw, 3.8rem);
}
.finale p {
  margin: 0.4rem auto 1rem;
  max-width: 40ch;
}

/* New cards unfold downwards. */
@keyframes unfold {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-8px);
  }
  to {
    clip-path: inset(0 0 -40px 0);
    transform: none;
  }
}
.unfolding {
  animation: unfold 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (max-width: 40rem) {
  .desk-actions {
    justify-content: flex-start;
  }
  .step-title {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tag.turning,
  .tag.turned,
  .unfolding {
    animation: none;
  }
  .tick .tick-heart,
  .btn,
  .tag-wrap::before {
    transition: none;
  }
}