/* =============================================================================
   SECTION 4 · LONG-DISTANCE SURVIVAL KIT
   A deep plum "first-aid kit" with four very different interactions.
   ========================================================================== */

.kit {
  position: relative;
  padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 56px) clamp(22px, 4vw, 56px);
  border-radius: clamp(28px, 5vw, 48px);
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(233, 138, 157, .22), rgba(233, 138, 157, 0) 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(244, 212, 138, .12), rgba(244, 212, 138, 0) 70%),
    var(--plum);
  color: var(--cream);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.kit .eyebrow { color: rgba(255, 248, 240, .72); }
.kit .eyebrow-num { color: var(--rose); }
.kit .section-title em { color: var(--rose); }
.kit .section-lede { color: rgba(255, 248, 240, .78); }
.kit .hand-note { color: var(--butter); }
.kit :focus-visible { outline-color: var(--butter); }

.kit-cross { /* first-aid cross watermark */
  position: absolute;
  top: clamp(20px, 4vw, 48px);
  right: clamp(20px, 4vw, 52px);
  width: clamp(70px, 14vw, 120px);
  aspect-ratio: 1;
  opacity: .14;
  background:
    linear-gradient(var(--rose), var(--rose)) center / 34% 100% no-repeat,
    linear-gradient(var(--rose), var(--rose)) center / 100% 34% no-repeat;
  border-radius: 10px;
  transform: rotate(12deg);
  pointer-events: none;
}

.kit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (min-width: 680px) {
  .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

.kit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 26px;
  background: var(--cream);
  color: var(--plum);
  box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .6);
}
.kit-card :focus-visible { outline-color: var(--cherry); }

.kit-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 6px 10px;
  border-bottom: 1.5px dashed var(--line-strong);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kit-label span:first-child { color: var(--cherry); }

.kit-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 92px;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: var(--kit-bg, var(--blush));
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .35s var(--ease-spring), box-shadow .35s;
}
.kit-card--miss  { --kit-bg: var(--blush); }
.kit-card--kiss  { --kit-bg: #F9E0D6; }
.kit-card--hug   { --kit-bg: var(--butter-soft); }
.kit-card--think { --kit-bg: #EEDFE6; }

@media (hover: hover) {
  .kit-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -14px rgba(73, 52, 61, .5); }
  .kit-btn:hover .kit-ic svg { transform: rotate(-8deg) scale(1.08); }
  .kit-btn:hover .kit-go { transform: translateX(4px); background: var(--plum); color: var(--cream); }
}
.kit-btn:active { transform: scale(.97); }

.kit-ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.kit-ic svg { width: 44px; height: 44px; transition: transform .45s var(--ease-spring); }
.kit-txt { display: grid; gap: 3px; min-width: 0; }
.kit-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.6vw, 1.42rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-variation-settings: "SOFT" 100;
}
.kit-sub { font-size: .84rem; color: var(--ink-2); line-height: 1.3; }
.kit-go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  transition: transform .3s var(--ease-spring), background-color .2s, color .2s;
}
.kit-go .icon { width: 18px; height: 18px; }
.kit-btn.is-pressed { animation: press .45s var(--ease-spring); }
@keyframes press { 40% { transform: scale(.95); } }

.kit-out:empty { display: none; }
.kit-out { padding: 0 2px 4px; }

.kit-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .95rem;
  line-height: 1.4;
  animation: rise-in .5s var(--ease-out);
}
.kit-msg .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--cherry); }

/* ---------- 01 · Receipt printer ---------------------------------------------- */
.printer {
  position: relative;
  z-index: 2;
  height: 12px;
  margin: 2px 6px 0;
  border-radius: 999px;
  background: var(--plum);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3);
}
.receipt-wrap { position: relative; margin: -6px 18px 0; overflow: hidden; padding-bottom: 10px; }
.receipt {
  position: relative;
  padding: 18px 16px 24px;
  background: #fff;
  color: var(--plum);
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
  animation: print 1.5s steps(14, end) both;
}
@keyframes print {
  from { transform: translateY(-101%); }
  to { transform: none; }
}
.receipt p { margin: 0; }
.r-shop { font-weight: 800; font-size: .86rem; text-align: center; letter-spacing: .06em; }
.r-meta { text-align: center; color: var(--ink-3); }
.r-sep { margin: 8px 0; border: 0; border-top: 1.5px dashed var(--line-strong); }
.r-row { display: flex; justify-content: space-between; gap: 10px; }
.r-row--total { font-weight: 800; }
.r-msg {
  padding: 4px 0;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--cherry);
}
.r-foot { margin-top: 6px; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.r-barcode {
  height: 26px;
  margin: 10px auto 0;
  width: 70%;
  background: repeating-linear-gradient(90deg,
    var(--plum) 0 2px, transparent 2px 3px, var(--plum) 3px 6px, transparent 6px 7px,
    var(--plum) 7px 8px, transparent 8px 11px, var(--plum) 11px 13px, transparent 13px 14px);
}

/* ---------- 02 · Kiss ----------------------------------------------------------- */
.flying-kiss {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 205;
  width: 60px;
  height: 40px;
  color: var(--cherry);
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 10px rgba(168, 48, 63, .35));
}
.flying-kiss svg { width: 100%; height: 100%; fill: currentColor; }

.kiss-out {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.kiss-stamp {
  width: 58px;
  height: 40px;
  flex: none;
  color: var(--cherry);
  opacity: .9;
  animation: stamp-kiss .6s var(--ease-out) both;
}
.kiss-stamp svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes stamp-kiss {
  0% { opacity: 0; transform: scale(1.9) rotate(-30deg); }
  60% { opacity: 1; transform: scale(.9) rotate(-10deg); }
  100% { opacity: .9; transform: rotate(-12deg); }
}
.kiss-body { display: grid; gap: 4px; min-width: 0; animation: rise-in .5s var(--ease-out) .15s both; }
.kiss-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--cherry-deep);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kiss-pill .icon { width: 12px; height: 12px; }
.kiss-text { font-size: .95rem; line-height: 1.4; }
.kiss-count { font-size: .76rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- 04 · Thinking ------------------------------------------------------- */
.transmit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .92rem;
  font-weight: 600;
}
.waves { position: relative; width: 28px; height: 28px; flex: none; }
.waves i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cherry);
  opacity: 0;
  animation: wave 1.5s ease-out infinite;
}
.waves i:nth-child(2) { animation-delay: .5s; }
.waves i:nth-child(3) { animation-delay: 1s; }
@keyframes wave {
  0% { opacity: .9; transform: scale(.2); }
  100% { opacity: 0; transform: scale(1.2); }
}
.dots i { font-style: normal; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }

/* ---------- 03 · Hug dialog ------------------------------------------------------ */
.hug-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.hug-dialog::backdrop { background: rgba(73, 52, 61, .3); }
.hug-dialog[open] { animation: fade-in .35s ease; }

.hug-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  overflow: hidden auto;
  background:
    radial-gradient(55% 45% at 50% 46%, rgba(247, 221, 226, 1), rgba(255, 248, 240, .97) 72%),
    var(--cream);
  text-align: center;
}
/* Soft "arms" closing in from the edges of the screen */
.hug-scene::before,
.hug-scene::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 60vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 138, 157, .45), rgba(233, 138, 157, 0));
  transition: transform 1s var(--ease-spring);
  pointer-events: none;
}
.hug-scene::before { left: 0; transform: translateX(-100%); }
.hug-scene::after { right: 0; transform: translateX(100%); }
.hug-scene.is-hugging::before { transform: translateX(-45%); }
.hug-scene.is-hugging::after { transform: translateX(45%); }

.hug-close-x { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 3; }

.hug-bubble {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border-radius: 18px 18px 18px 4px;
  background: var(--paper);
  box-shadow: var(--shadow-md);
  font-family: var(--font-hand);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cherry);
  opacity: 0;
  transform: translateY(10px) scale(.8);
  transition: opacity .4s, transform .5s var(--ease-spring);
}
.is-arriving .hug-bubble { opacity: 1; transform: none; }
.is-hugging .hug-bubble { opacity: 0; transform: translateY(-10px) scale(.9); }

.mochi-wrap {
  position: relative;
  z-index: 1;
  width: min(66vw, 290px);
  opacity: 0;
  transform: translateY(80px) scale(.7);
  transition: opacity .4s, transform .8s var(--ease-spring);
}
.is-arriving .mochi-wrap { opacity: 1; transform: none; }
.is-hugging .mochi-wrap { transform: scale(1.1); }
.mochi { width: 100%; height: auto; overflow: visible; }

.mochi-body { transform-box: fill-box; transform-origin: 50% 100%; }
.is-arriving .mochi-body { animation: mochi-bob 2.4s ease-in-out infinite; }
.is-hugging .mochi-body { animation: mochi-squish .55s ease-in-out infinite alternate; }
@keyframes mochi-bob { 50% { transform: translateY(-5px); } }
@keyframes mochi-squish {
  from { transform: scale(1, 1); }
  to { transform: scale(1.05, .95); }
}

.mochi-arm {
  transform-box: fill-box;
  transition: transform .7s var(--ease-spring);
}
.mochi-arm--l { transform-origin: 86% 50%; transform: rotate(-25deg); }
.mochi-arm--r { transform-origin: 14% 50%; transform: rotate(25deg); }
.is-open .mochi-arm--l { transform: rotate(38deg); }
.is-open .mochi-arm--r { transform: rotate(-38deg); }
.is-hugging .mochi-arm--l { transform: rotate(-142deg); }
.is-hugging .mochi-arm--r { transform: rotate(142deg); }

.mochi-heart {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s, transform .6s var(--ease-spring);
}
.is-hugging .mochi-heart { opacity: 1; transform: translateY(-8px) scale(1.3); animation: heartbeat 1.4s ease-in-out .6s infinite; }

.hug-msg {
  position: relative;
  z-index: 1;
  min-height: 2.6em;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  font-weight: 500;
  line-height: 1.25;
  font-variation-settings: "SOFT" 100;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s, transform .6s var(--ease-out);
}
.is-hugging .hug-msg { opacity: 1; transform: none; }

.hug-meter {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  width: min(260px, 80vw);
  opacity: 0;
  transition: opacity .4s;
}
.is-hugging .hug-meter { opacity: 1; }
.hug-meter-track { height: 8px; border-radius: 999px; background: rgba(73, 52, 61, .1); overflow: hidden; }
.hug-meter-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rose), var(--cherry));
}
.is-hugging .hug-meter-fill { width: 100%; transition: width 2.6s linear; }
.hug-meter-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.hug-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s, transform .5s var(--ease-out);
  visibility: hidden;
}
.is-done .hug-actions { opacity: 1; transform: none; visibility: visible; }