.opening {
  z-index: 20;
  display: grid;
  place-items: center;
  padding:
    calc(28px + env(safe-area-inset-top))
    calc(26px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(26px + env(safe-area-inset-left));
  background:
    linear-gradient(rgba(247, 240, 225, 0.86), rgba(247, 240, 225, 0.86)),
    repeating-linear-gradient(
      7deg,
      transparent 0,
      transparent 4px,
      rgba(93, 79, 65, 0.025) 5px,
      transparent 6px
    ),
    var(--paper);
}

.opening::before,
.opening::after {
  position: absolute;
  border-radius: 50%;
  background: var(--sage);
  content: "";
  opacity: 0.3;
  filter: blur(1px);
}

.opening::before {
  top: -80px;
  right: -85px;
  width: 235px;
  height: 230px;
}

.opening::after {
  bottom: -115px;
  left: -75px;
  width: 240px;
  height: 250px;
  background: var(--rose);
}

.opening__paper {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(93, 79, 65, 0.22);
  border-radius: 42% 58% 47% 53% / 2% 3% 2% 2%;
  pointer-events: none;
}

.opening__paper::before {
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(93, 79, 65, 0.13);
  border-radius: inherit;
  content: "";
}

.opening__stitch {
  position: absolute;
  width: 68px;
  border-top: 2px dashed rgba(176, 110, 110, 0.48);
  transform: rotate(-8deg);
}

.opening__stitch--one {
  top: 85px;
  left: -17px;
}

.opening__stitch--two {
  right: -18px;
  bottom: 108px;
  transform: rotate(9deg);
}

.opening__postmark {
  position: absolute;
  top: 35px;
  right: 20px;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 2px solid rgba(176, 110, 110, 0.45);
  border-radius: 50%;
  color: rgba(176, 110, 110, 0.68);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.45;
  text-align: center;
  transform: rotate(8deg);
}

.opening__content {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  text-align: center;
}

.opening h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(4rem, 21vw, 6rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.92;
  text-shadow: 2px 3px 0 rgba(217, 164, 65, 0.18);
}

.opening__line {
  max-width: 290px;
  margin: 24px auto 30px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.55;
}

.opening__actions {
  display: grid;
  width: min(100%, 300px);
  gap: 12px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ loading */

/*
 * Sits over the map while it is warmed up. Same paper as the opening screen so
 * it reads as the next page of the same object rather than a spinner, and it
 * borrows the dashed route and the little plane from the map itself.
 */
.loading {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding:
    calc(28px + env(safe-area-inset-top))
    calc(26px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(26px + env(safe-area-inset-left));
  background:
    linear-gradient(rgba(247, 240, 225, 0.94), rgba(247, 240, 225, 0.94)),
    repeating-linear-gradient(
      7deg,
      transparent 0,
      transparent 4px,
      rgba(93, 79, 65, 0.025) 5px,
      transparent 6px
    ),
    var(--paper);
  opacity: 1;
  transition: opacity 620ms var(--ease-glide);
}

/* Fades away to reveal the warmed map underneath. */
.loading.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.loading__card {
  width: min(100%, 290px);
  text-align: center;
}

.loading__status {
  margin: 0 0 6px;
  min-height: 2.6em;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.3;
}

.loading__route {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Marching dashes keep the loading card feeling like a tiny travel sketch. */
.loading__line {
  fill: none;
  stroke: var(--rose-deep);
  stroke-linecap: round;
  stroke-width: 2;
  opacity: 0.6;
  stroke-dasharray: 3 5;
  animation: loading-draw 2.2s linear infinite;
}

.loading__plane {
  animation: loading-fly 2.8s var(--ease-glide) infinite;
}

@keyframes loading-draw {
  to {
    stroke-dashoffset: -32;
  }
}

/* Follows the arc above closely enough to read as flying it. */
@keyframes loading-fly {
  0% {
    opacity: 0;
    transform: translate(14px, 60px) rotate(-34deg);
  }
  12% {
    opacity: 1;
  }
  50% {
    transform: translate(100px, 26px) rotate(0deg);
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(186px, 46px) rotate(22deg);
  }
}

.loading__track {
  overflow: hidden;
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(93, 79, 65, 0.16);
}

/* Width is set from real progress, never from a timer. */
.loading__bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 99px;
  background: var(--rose-deep);
  transition: width 340ms var(--ease-glide);
}

@media (prefers-reduced-motion: reduce) {
  .loading__plane {
    opacity: 1;
    transform: translate(100px, 26px);
  }
}

.journey__hud {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 8;
  display: flex;
  min-height: calc(68px + env(safe-area-inset-top));
  flex-direction: column;
  align-items: center;
  padding:
    calc(13px + env(safe-area-inset-top))
    calc(62px + env(safe-area-inset-right))
    8px
    calc(62px + env(safe-area-inset-left));
  pointer-events: none;
}

.journey__chapter {
  margin: 0 0 7px;
  color: rgba(70, 59, 48, 0.77);
  font-family: var(--display);
  font-size: 0.77rem;
  font-style: italic;
}

.progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.progress-dot {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(93, 79, 65, 0.27);
  transition:
    width 300ms var(--ease-spring),
    background-color 300ms ease;
}

.progress-dot.is-complete {
  background: var(--ink-soft);
}

.progress-dot.is-current {
  width: 17px;
  border-radius: 99px;
  background: var(--rose-deep);
}

.passport-stamp {
  position: absolute;
  top: 23%;
  left: 50%;
  z-index: 11;
  display: grid;
  width: 150px;
  height: 94px;
  place-content: center;
  border: 4px double rgba(176, 110, 110, 0.88);
  border-radius: 50%;
  color: var(--rose-deep);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.13em;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.7);
}

.passport-stamp small {
  margin-top: 5px;
  font-family: var(--body);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

.passport-stamp.is-visible {
  animation: stamp-in 850ms var(--ease-spring) forwards;
}

/* Leaving Sicily lifts the stamp instead of blinking it off. */
.passport-stamp.is-leaving {
  animation: stamp-out 520ms ease forwards;
}

@keyframes stamp-out {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.35);
  }
}

@keyframes stamp-in {
  62% {
    opacity: 0.9;
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.9);
  }
  100% {
    opacity: 0.82;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }
}

.memory-card {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    calc(13px + env(safe-area-inset-bottom))
    calc(14px + env(safe-area-inset-left));
  background:
    linear-gradient(rgba(247, 240, 225, 0.96), rgba(247, 240, 225, 0.96)),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 4px,
      rgba(93, 79, 65, 0.035) 5px
    );
  box-shadow: 0 -24px 70px rgba(63, 55, 45, 0.28);
  transform: translateY(105%);
  transition: transform 620ms var(--ease-glide);
  will-change: transform;
}

.memory-card.is-open {
  transform: translateY(0);
}

.memory-card.is-dragging {
  transition: none;
}

.memory-card__handle {
  width: 42px;
  height: 5px;
  flex: 0 0 5px;
  margin: 0 auto 9px;
  border-radius: 99px;
  background: rgba(93, 79, 65, 0.2);
}

/* Photo and words share one scroller, so a full-height picture and a long note
   read as a single page she swipes through rather than two fixed panes. */
.memory-card__scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-top: 10px;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.memory-card__scroll::-webkit-scrollbar {
  display: none;
}

.memory-card__photo-wrap {
  position: relative;
  padding: 8px 8px 18px;
  background: #fffaf0;
  box-shadow: 0 7px 22px rgba(78, 65, 49, 0.17);
  transform: rotate(-0.55deg);
}

/* Nothing is cropped: every photo and the clip keep their own shape and the
   page grows to fit them. */
.memory-card__photo,
.memory-card__video {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: var(--paper-deep);
}

.memory-card__video {
  background: #17130f;
}

.memory-card__photo[hidden],
.memory-card__video[hidden] {
  display: none;
}

.memory-card__caption {
  position: absolute;
  right: 14px;
  bottom: 3px;
  left: 14px;
  overflow: hidden;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 0.69rem;
  font-style: italic;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-card__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 72px;
  height: 24px;
  background: rgba(232, 198, 126, 0.56);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.28);
  transform: translateX(-50%) rotate(1.5deg);
}

.memory-card__copy {
  padding: 19px 5px 10px;
}

.memory-card__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.memory-card__meta,
.memory-card__page {
  margin: 0 0 7px;
  color: var(--rose-deep);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.memory-card__page {
  color: var(--ink-faint);
  white-space: nowrap;
}

.memory-card h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(1.55rem, 7vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.memory-card__body {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 0.98rem;
  line-height: 1.46;
}

.memory-card__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding-top: 6px;
}

.memory-card__actions .button--primary {
  flex: 1;
}

.closing {
  z-index: 25;
  overflow-y: auto;
  background:
    linear-gradient(rgba(247, 240, 225, 0.9), rgba(247, 240, 225, 0.97)),
    radial-gradient(circle at 50% 0%, var(--ocean), transparent 62%);
  overscroll-behavior: contain;
}

.closing__scroll {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    calc(38px + env(safe-area-inset-top))
    calc(26px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(26px + env(safe-area-inset-left));
  text-align: center;
}

.closing h2 {
  max-width: 330px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.15rem, 11vw, 3.2rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.closing__message {
  max-width: 360px;
  margin: 20px 0 24px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.55;
}

.countdown {
  width: min(100%, 330px);
  margin-bottom: 20px;
  border-top: 1px solid rgba(93, 79, 65, 0.17);
  border-bottom: 1px solid rgba(93, 79, 65, 0.17);
  padding: 14px 0 13px;
}

.countdown__value {
  margin: 0;
  color: var(--rose-deep);
  font-family: var(--display);
  font-size: clamp(1.65rem, 8vw, 2.35rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.countdown__label {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.clocks {
  display: grid;
  width: min(100%, 340px);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 15px;
  margin-bottom: 23px;
}

.clock__time {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.clock__label {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clocks__thread {
  color: var(--rose-deep);
  font-family: var(--display);
}

.closing__reply {
  width: min(100%, 300px);
}

.closing__actions {
  display: grid;
  width: min(100%, 300px);
  gap: 8px;
  margin-top: 12px;
}

.closing__actions .button {
  min-height: 44px;
  border: 0;
  box-shadow: none;
}

.closing__attribution {
  max-width: 310px;
  margin: 20px 0 0;
  color: var(--ink-faint);
  font-size: 0.56rem;
  line-height: 1.4;
}

/* The whole-journey view sits over the map, so it stays deliberately sparse. */
.finale {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 22px calc(38px + env(safe-area-inset-bottom));
  background: linear-gradient(
    to top,
    rgba(247, 240, 225, 0.94) 34%,
    rgba(247, 240, 225, 0)
  );
  opacity: 0;
  transition: opacity 720ms ease;
}

.finale.is-visible {
  opacity: 1;
}

.finale__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.55rem;
  font-style: italic;
  text-align: center;
}

.finale__button {
  width: min(100%, 300px);
}

.one-more {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(20px + env(safe-area-inset-top)) 18px
    calc(20px + env(safe-area-inset-bottom));
  background: #17130f;
  opacity: 0;
  transition: opacity 520ms ease;
}

.one-more.is-visible {
  opacity: 1;
}

.one-more__video {
  width: min(100%, 900px, calc(65dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 65dvh;
  border: 0;
  border-radius: 6px;
  background: #000;
}

.one-more__placeholder {
  display: grid;
  width: min(100%, 340px);
  gap: 10px;
  padding: 34px 22px;
  border: 1px dashed rgba(247, 240, 225, 0.4);
  border-radius: 8px;
  text-align: center;
}

.one-more__placeholder-title {
  margin: 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.2rem;
  font-style: italic;
}

.one-more__placeholder-note {
  margin: 0;
  color: rgba(247, 240, 225, 0.7);
  font-size: 0.72rem;
  line-height: 1.5;
}

.one-more__placeholder-note code {
  color: var(--ochre-soft, #e8c67e);
  font-size: 0.7rem;
}

.one-more__continue {
  width: min(100%, 300px);
  border-color: rgba(247, 240, 225, 0.35);
  color: var(--paper);
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .finale,
  .one-more {
    transition: none;
  }
}

@media (max-height: 610px) {
  .memory-card__copy {
    padding-top: 13px;
  }

  .memory-card h2 {
    margin-bottom: 5px;
    font-size: 1.45rem;
  }

  .memory-card__body {
    font-size: 0.91rem;
    line-height: 1.38;
  }

  .closing__scroll {
    justify-content: flex-start;
  }
}