/* welcome: her name, the 30th and the welcome to her gift. Everything is laid out from the start and
   revealed in turn (.is-hidden), so nothing jumps. Selectors are prefixed .scr-welcome. */

.scr-welcome {
  justify-content: center;
  cursor: default;
}

.scr-welcome .is-hidden {
  visibility: hidden;
}

.scr-welcome .wel-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  text-align: center;
}

/* ---- 1 + 2: the selection rectangle with the name canvas ---- */
.scr-welcome .wel-name {
  position: relative;
  width: 100%;
}

.scr-welcome .wel-marquee {
  padding: 3px;
}

.scr-welcome .wel-name.is-drawing .marquee__handle {
  visibility: hidden;
}

.scr-welcome .wel-canvas {
  width: 100%;
  height: 112px;
}

.scr-welcome .wel-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---- 3: the notification line ---- */
.scr-welcome .wel-bell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 12px;
  font-size: var(--fs-s);
  line-height: 1.25;
  text-align: left;
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

.scr-welcome .wel-bell__icon {
  flex: none;
}

/* the live (counting) text over an invisible copy of the final text: the chip keeps its final size */
.scr-welcome .wel-bell__text {
  display: grid;
}

.scr-welcome .wel-bell__final,
.scr-welcome .wel-bell__live {
  grid-area: 1 / 1;
}

.scr-welcome .wel-bell__final {
  visibility: hidden;
}

/* ---- 4: the congratulations ---- */
.scr-welcome .wel-congrats {
  max-width: 30rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-l);
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word; /* only a word that can never fit breaks; "anywhere" lets balance split words */
}

.scr-welcome .wel-congrats__rest {
  visibility: hidden;
}

/* typing caret: zero width (negative margin), so the text never reflows while it types */
.scr-welcome .wel-congrats__caret {
  margin-right: -0.45em;
  border-left: 0.45em solid var(--pink);
  animation: blink calc(500ms / var(--speed)) steps(1) infinite;
}

.scr-welcome .wel-congrats:not(.is-typing) .wel-congrats__caret {
  display: none;
}

/* ---- 5: HIEP, HIEP, HOERA! ---- */
.scr-welcome .wel-hiep {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.scr-welcome .wel-hiep__word {
  padding: 4px 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-m);
  line-height: 1.2;
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

.scr-welcome .wel-hiep__word--0 { background: var(--lav); }
.scr-welcome .wel-hiep__word--1 { background: var(--mint); }
.scr-welcome .wel-hiep__word--2 { background: var(--pink); }

@media (min-width: 400px) {
  .scr-welcome .wel-hiep__word { font-size: var(--fs-l); }
}

/* ---- 6: the welcome text, sworn by Henk ---- */
.scr-welcome .wel-card {
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
}

.scr-welcome .wel-card::after {
  content: "";
  display: block;
  clear: both;
}

.scr-welcome .wel-card__henk {
  position: relative;
  float: right;
  width: 70px;
  height: 60px;
  margin: -2px -4px 4px 10px;
}

.scr-welcome .wel-card__henk > .sprite {
  position: absolute;
  right: 0;
  bottom: 0;
}

.scr-welcome .wel-card__paw {
  position: absolute;
  left: 0;
  top: 0;
}

.scr-welcome .wel-card:not(.is-hidden) .wel-card__paw {
  animation: bob calc(500ms / var(--speed)) steps(2) 4;
}

.scr-welcome .wel-card__text {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.35;
}

/* ---- 7: open the gift ---- */
.scr-welcome .wel-open {
  gap: 12px;
  max-width: 100%;
}

@media (max-width: 380px) {
  .scr-welcome .wel-open {
    padding: 8px 16px;
    font-size: var(--fs-m);
  }
}

/* ---- short phones: the whole final frame (name to button) fits without scrolling ----
   700px and less: tighter spacing. 600px and less (iPhone SE: 320x568, an SE in Safari: about
   375x553; welcome.js uses the same 600px for less room around the name): smaller type as well. */
@media (max-height: 700px) {
  .scr-welcome {
    padding-top: 10px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .scr-welcome .wel-stage {
    gap: 10px;
  }
}

@media (max-height: 600px) {
  .scr-welcome {
    padding-top: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .scr-welcome .wel-stage {
    gap: 8px;
  }

  .scr-welcome .wel-bell {
    padding: 4px 10px;
  }

  .scr-welcome .wel-congrats {
    font-size: calc(20px * var(--text-scale));
  }

  .scr-welcome .wel-hiep__word {
    padding: 2px 8px;
  }

  .scr-welcome .wel-card {
    padding: 8px 12px;
  }

  .scr-welcome .wel-card__henk {
    width: 64px;
    height: 54px;
    margin-bottom: 2px;
  }

  .scr-welcome .wel-card__text {
    font-size: var(--fs-s);
    line-height: 1.3;
  }

  .scr-welcome .wel-open {
    min-height: 48px;
  }
}