/* ============================================================
   The gate: heart loader, then the question.
   Palette variables come from letter.css, which loads first.
   ============================================================ */

/* Held before any JS runs so she can't scroll past the overlay. */
.gate-locked,
.gate-locked body {
  overflow: hidden;
  height: 100%;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 20%, #FFE6DC 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, #FFE7EE 0%, transparent 60%),
    #FFF5F0;
  transition: opacity .55s ease;
}
.gate.is-open {
  opacity: 0;
  pointer-events: none;
}

.gate-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* `backwards`, NOT `both`. `both` leaves the final keyframe's
     transform:translateY(0) on the element permanently, and an element with any
     transform other than `none` becomes the containing block for its
     position:fixed descendants -- which is what threw the runaway button off
     screen. `backwards` still applies the from-state before the animation
     starts (so there is no flash) but leaves no transform behind afterwards. */
  animation: gateIn .5s cubic-bezier(.2, .8, .3, 1) backwards;
}
.gate-panel[hidden] { display: none; }

@keyframes gateIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- heart loader ---------- */

.loader-heart {
  width: clamp(110px, 26vw, 160px);
  height: auto;
  overflow: visible;
  animation: loaderBeat 1.9s ease-in-out infinite;
}
@keyframes loaderBeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.07); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.04); }
}

.heart-outline {
  fill: none;
  stroke: #F7C6C7;
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.heart-filled {
  fill: #F49AA8;
}

/* The clip rect slides up as progress rises; transitioning `y` is what makes
   the fill glide rather than jump between load events. */
#heartFill {
  transition: y .45s cubic-bezier(.3, .7, .4, 1);
}

.loader-percent {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent-deep);
  margin: 1.5rem 0 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- pin entry ---------- */

.pin-heart {
  font-size: 2.1rem;
  color: var(--accent);
  line-height: 1;
  animation: loaderBeat 2.1s ease-in-out infinite;
}

.pin-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--text-muted);
  margin: 1.1rem 0 1.7rem;
}

.pin-boxes {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pin-box {
  width: 58px;
  height: 68px;
  border: 2px solid var(--accent-soft);
  border-radius: 16px;
  background: var(--surface);
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  -moz-appearance: textfield;
}
.pin-box::-webkit-outer-spin-button,
.pin-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pin-box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(244, 154, 168, .22);
  transform: translateY(-2px);
}
.pin-box.filled { border-color: var(--accent); }

.pin-error {
  margin: 1.2rem 0 0;
  font-size: .86rem;
  color: var(--accent-deep);
  font-weight: 600;
  min-height: 1.2em;
}
.pin-error[hidden] { display: none; }

/* Wrong pin: a short shake, then the boxes clear. */
.pin-boxes.wrong { animation: pinShake .45s ease; }
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-9px); }
  30%  { transform: translateX(9px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  80%  { transform: translateX(-2px); }
}

.pin-boxes.checking { opacity: .55; pointer-events: none; }

@media (max-width: 420px) {
  .pin-box { width: 48px; height: 58px; font-size: 1.6rem; border-radius: 13px; }
  .pin-boxes { gap: 9px; }
}

/* ---------- the question ---------- */

.ask-heart {
  font-size: 2.4rem;
  color: var(--accent);
  line-height: 1;
  animation: loaderBeat 2.1s ease-in-out infinite;
}

.ask-question {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.35;
  max-width: 18ch;
  margin: 1.1rem 0 2.2rem;
  background: linear-gradient(120deg, var(--accent-deep), #F5A77F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ask-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ask-btn {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: none;
  border-radius: 999px;
  padding: 14px 40px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.ask-yes {
  background: linear-gradient(135deg, var(--accent) 0%, #F7B79E 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(244, 154, 168, .48);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ask-yes:hover  { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(244, 154, 168, .58); }
.ask-yes:active { transform: translateY(0); }

.ask-no {
  background: var(--surface);
  color: var(--text-muted);
  border: 1.5px solid var(--accent-soft);
  box-shadow: var(--shadow-soft);
  /* Only the position animates; a transform transition would let a fast
     pointer catch it mid-slide. */
  transition: left .17s ease-out, top .17s ease-out;
}

/* Applied on the first dodge, once its starting rect has been measured. */
.ask-no.is-loose {
  position: fixed;
  margin: 0;
  z-index: 210;
}

@media (max-width: 760px) {
  .ask-btn { padding: 13px 32px; font-size: 1rem; }
  .ask-buttons { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-heart, .ask-heart, .pin-heart { animation: none; }
  .pin-boxes.wrong { animation: none; }
  .gate-panel { animation: none; }
  #heartFill { transition: none; }
  /* It still dodges -- that's the point -- but instantly instead of sliding. */
  .ask-no { transition: none; }
}