:root {
  color-scheme: light;
  --ink: #251d1a;
  --muted: #7d7069;
  --paper: #fffaf0;
  --paper-shadow: rgba(88, 56, 36, 0.2);
  --seal: #a93629;
  --field: #f3eee7;
  --accent: #286a6d;
  --accent-dark: #17484b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(241, 213, 143, 0.34), transparent 28rem),
    linear-gradient(135deg, #2f3d3f, #755d53 48%, #d2a966);
  color: var(--ink);
}

.background-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #251d1a;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(20, 16, 13, 0.26);
  pointer-events: none;
}

body.has-video-error .background-video {
  opacity: 0;
}

button,
textarea {
  font: inherit;
}

.stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 28px;
  transition:
    opacity 520ms ease,
    transform 700ms cubic-bezier(0.2, 0.82, 0.2, 1),
    visibility 520ms ease;
}

body.is-letter-revealed .entry-gate {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-28px);
  pointer-events: none;
}

.record-control {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: 172px;
  height: 172px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  overflow: visible;
  transition:
    left 900ms cubic-bezier(0.18, 0.9, 0.2, 1),
    top 900ms cubic-bezier(0.18, 0.9, 0.2, 1),
    width 900ms cubic-bezier(0.18, 0.9, 0.2, 1),
    height 900ms cubic-bezier(0.18, 0.9, 0.2, 1),
    transform 900ms cubic-bezier(0.18, 0.9, 0.2, 1),
    filter 300ms ease;
}

body.is-record-docked .record-control {
  left: var(--record-dock-x, calc(100% - 47px));
  top: var(--record-dock-y, 47px);
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
}

.record-disc {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #f7ecd0 0 10%, #9f7550 10.5% 13%, transparent 13.5%),
    repeating-radial-gradient(circle at center, #171311 0 7px, #2b2520 8px 11px);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.32),
    inset 0 0 0 5px rgba(255, 250, 240, 0.12);
  animation: record-spin 6.5s linear infinite paused;
}

body.is-record-playing .record-disc {
  animation-play-state: running;
}

.record-label {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 24%, #d7b57b 25% 100%);
}

.record-tonearm {
  position: absolute;
  right: -10%;
  top: 0;
  z-index: 2;
  width: 48%;
  height: 17%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8f7a59, #f5dfaa 48%, #806b4d);
  box-shadow:
    0 3px 8px rgba(20, 16, 13, 0.28),
    inset 0 0 0 1px rgba(255, 250, 240, 0.22);
  transform-origin: 88% 50%;
  transform: rotate(18deg) translateX(-24%);
  transition: transform 520ms cubic-bezier(0.2, 0.86, 0.2, 1);
}

.record-tonearm::before {
  content: "";
  position: absolute;
  right: -16%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f8e7b9 0 30%, #6b5942 32% 100%);
  box-shadow: 0 4px 10px rgba(20, 16, 13, 0.32);
  transform: translateY(-50%);
}

.tonearm-head {
  position: absolute;
  left: -8%;
  top: 50%;
  width: 18%;
  height: 125%;
  border-radius: 3px;
  background: #2c241d;
  transform: translateY(-50%) rotate(-10deg);
  box-shadow: 0 2px 5px rgba(20, 16, 13, 0.28);
}

body.is-record-playing .record-tonearm {
  transform: rotate(-28deg) translateX(10%);
}

.swipe-cue {
  position: fixed;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 24;
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: rgba(255, 250, 240, 0.88);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateX(-50%);
  animation: cue-rise 1.8s ease-in-out infinite;
}

.swipe-line {
  width: 32px;
  height: 52px;
  border: 2px solid rgba(255, 250, 240, 0.64);
  border-radius: 999px;
  position: relative;
}

.swipe-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.dialog {
  position: relative;
  width: min(100%, 430px);
  min-height: min(760px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.92);
  box-shadow: 0 24px 80px rgba(20, 16, 13, 0.28);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(42px) scale(0.98);
  transition:
    opacity 700ms ease,
    transform 820ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

body.is-letter-revealed .dialog {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.dialog.is-sent {
  grid-template-rows: auto 0 minmax(0, 1fr);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 0;
}

.piece-code,
.small-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes record-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cue-rise {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.72;
  }

  50% {
    transform: translateX(-50%) translateY(-12px);
    opacity: 1;
  }
}

.scene {
  display: grid;
  place-items: center;
  min-height: 335px;
  padding: 22px;
  perspective: 900px;
  transition:
    min-height 520ms ease,
    padding 520ms ease,
    opacity 360ms ease;
}

.dialog.is-sent .scene {
  min-height: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
}

.envelope {
  position: relative;
  width: min(78vw, 310px);
  aspect-ratio: 1.38;
  transform: translateY(16px);
  isolation: isolate;
  transition:
    opacity 480ms ease,
    transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.envelope-back,
.envelope-pocket,
.envelope-front,
.envelope-flap,
.letter,
.stamp {
  position: absolute;
}

.envelope-back {
  z-index: 1;
  inset: 16% 0 0;
  border-radius: 6px;
  background: #d2aa74;
  box-shadow: 0 18px 42px rgba(91, 61, 36, 0.28);
}

.envelope-front {
  z-index: 4;
  inset: 32% 0 0;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(145deg, transparent 49.8%, rgba(133, 88, 51, 0.2) 50%, transparent 51%) left /
      50% 100% no-repeat,
    linear-gradient(215deg, transparent 49.8%, rgba(133, 88, 51, 0.2) 50%, transparent 51%) right /
      50% 100% no-repeat,
    #e8c28b;
}

.envelope-pocket {
  z-index: 3;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 28px;
  border-radius: 0 0 6px 6px;
  background: #e8c28b;
  box-shadow: 0 -8px 18px rgba(168, 119, 63, 0.08) inset;
}

.envelope-flap {
  z-index: 5;
  left: 0;
  right: 0;
  top: 16%;
  height: 48%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  background: #eccb98;
  transition: transform 760ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.letter {
  z-index: 2;
  left: 12%;
  right: 12%;
  top: 28%;
  height: 52%;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 30px 24px;
  border-radius: 4px;
  background:
    linear-gradient(rgba(40, 106, 109, 0.08) 1px, transparent 1px) 0 22px / 100% 28px,
    var(--paper);
  box-shadow: 0 12px 24px var(--paper-shadow);
  transform: translateY(18px) scale(0.92);
  transition: transform 880ms cubic-bezier(0.18, 0.88, 0.22, 1.08);
}

.letter span {
  height: 8px;
  border-radius: 99px;
  background: rgba(37, 29, 26, 0.16);
}

.letter span:nth-child(2) {
  width: 72%;
}

.letter span:nth-child(3) {
  width: 54%;
}

.stamp {
  right: 18px;
  bottom: 18px;
  z-index: 4;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 4px double var(--seal);
  border-radius: 50%;
  color: var(--seal);
  padding: 8px;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  opacity: 0;
  transform: rotate(-12deg) scale(1.5);
  transition:
    opacity 160ms ease,
    transform 260ms cubic-bezier(0.2, 1.8, 0.45, 1);
}

.dialog.is-open .envelope-flap {
  z-index: 1;
  transform: rotateX(178deg);
}

.dialog.is-open .letter {
  z-index: 6;
  transform: translateY(-118px) scale(1.06);
}

.dialog.is-closing .letter,
.dialog.is-folding .letter,
.dialog.is-sent .letter {
  z-index: 2;
  transform: translateY(18px) scale(0.92);
}

.dialog.is-closing .envelope-flap,
.dialog.is-folding .envelope-flap,
.dialog.is-sent .envelope-flap {
  z-index: 5;
  transform: rotateX(0deg);
}

.dialog.is-closing .stamp,
.dialog.is-folding .stamp,
.dialog.is-sent .stamp {
  opacity: 1;
  transform: rotate(-12deg) scale(1);
}

.dialog.is-folding .envelope {
  animation: envelope-fold-out 1500ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
}

.dialog.is-sent .envelope {
  opacity: 0;
  transform: translateY(124px) scale(0.28) rotate(8deg);
  transition-delay: 420ms;
}

.panel {
  padding: 0 24px 24px;
}

.dialog.is-sent #cloudPanel:not(.hidden) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 22px 24px 24px;
}

h1 {
  margin: 6px 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 10vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.primary-button,
.text-button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.primary-button {
  width: 100%;
  background: var(--accent);
  color: white;
  font-weight: 800;
}

.primary-button:active {
  background: var(--accent-dark);
}

textarea {
  width: 100%;
  min-height: 168px;
  margin-top: 8px;
  padding: 16px;
  resize: vertical;
  border: 1px solid rgba(37, 29, 26, 0.15);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}

.form-footer {
  display: grid;
  grid-template-columns: auto 132px;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.word-cloud {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  margin: 14px 0 18px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.16), rgba(255, 250, 240, 0.02));
}

.word-cloud::before,
.word-cloud::after {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.word-cloud::before {
  top: 45%;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(40, 106, 109, 0.1), rgba(40, 106, 109, 0.16)),
    repeating-linear-gradient(
      0deg,
      transparent 0 42px,
      rgba(40, 106, 109, 0.08) 43px 44px,
      transparent 45px 84px
    );
  clip-path: polygon(
    0 7%,
    7% 4%,
    15% 6%,
    23% 10%,
    31% 7%,
    39% 3%,
    47% 5%,
    55% 10%,
    63% 8%,
    71% 4%,
    79% 3%,
    87% 6%,
    94% 9%,
    100% 6%,
    100% 100%,
    0 100%
  );
  animation: water-surface-slow 8.5s ease-in-out infinite;
}

.word-cloud::after {
  top: 45%;
  height: 32px;
  background: rgba(255, 250, 240, 0.22);
  clip-path: polygon(
    0 44%,
    8% 28%,
    16% 42%,
    24% 58%,
    32% 40%,
    40% 24%,
    48% 36%,
    56% 58%,
    64% 48%,
    72% 28%,
    80% 24%,
    88% 42%,
    96% 56%,
    100% 46%,
    100% 68%,
    96% 78%,
    88% 64%,
    80% 48%,
    72% 50%,
    64% 70%,
    56% 80%,
    48% 58%,
    40% 48%,
    32% 62%,
    24% 80%,
    16% 64%,
    8% 50%,
    0 66%
  );
  animation: water-surface-fast 5.8s ease-in-out infinite;
}

.word-wave-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.word-wave-path {
  fill: none;
  stroke: none;
}

.word-wave-text {
  font-family: Georgia, "Times New Roman", serif;
  dominant-baseline: middle;
  text-shadow: 0 1px 0 rgba(255, 250, 240, 0.72);
  animation: svg-wave-current var(--duration) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.word-wave-text--back {
  opacity: 0.5;
}

.word-wave-text--mid {
  opacity: 0.72;
}

.word-wave-text--front {
  opacity: 0.94;
}

.paper-boat {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 4;
  width: 112px;
  height: 68px;
  transform: translate(-50%, -50%);
  animation: boat-float 4.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 10px rgba(20, 16, 13, 0.18));
}

.paper-boat div,
.folding-boat div {
  position: absolute;
}

.folding-boat {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 8;
  width: 112px;
  height: 68px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.64) rotate(-5deg);
  filter: drop-shadow(0 12px 12px rgba(20, 16, 13, 0.2));
}

.folding-boat .fold-sheet {
  left: -58px;
  right: -58px;
  bottom: 4px;
  height: 78px;
  border-radius: 4px;
  background:
    linear-gradient(rgba(40, 106, 109, 0.07) 1px, transparent 1px) 0 18px / 100% 22px,
    var(--paper);
  box-shadow: 0 12px 22px rgba(88, 56, 36, 0.16);
  opacity: 0;
}

.folding-boat .boat-hull,
.folding-boat .boat-sail-left,
.folding-boat .boat-sail-right,
.folding-boat .boat-crease {
  opacity: 0;
}

.dialog.is-folding .folding-boat {
  animation: folding-boat-arrive 1500ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
}

.dialog.is-folding .folding-boat .fold-sheet {
  animation: fold-sheet-away 1450ms ease-in-out forwards;
}

.dialog.is-folding .folding-boat .boat-hull {
  animation: fold-hull 920ms ease-out 520ms forwards;
}

.dialog.is-folding .folding-boat .boat-sail-left {
  animation: fold-sail-left 920ms ease-out 600ms forwards;
}

.dialog.is-folding .folding-boat .boat-sail-right {
  animation: fold-sail-right 920ms ease-out 660ms forwards;
}

.dialog.is-folding .folding-boat .boat-crease {
  animation: fold-crease 580ms ease-out 840ms forwards;
}

.boat-hull {
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 31px;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 18% 100%);
  background: linear-gradient(145deg, #fffaf0, #d9caa8);
}

.boat-sail-left {
  left: 18px;
  bottom: 25px;
  width: 44px;
  height: 40px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: linear-gradient(150deg, #fffdf6, #e7d7b7);
}

.boat-sail-right {
  right: 17px;
  bottom: 25px;
  width: 46px;
  height: 40px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  background: linear-gradient(210deg, #f7ecd0, #cdb37c);
}

.boat-crease {
  left: 55px;
  bottom: 22px;
  width: 1px;
  height: 43px;
  background: rgba(112, 80, 45, 0.26);
}

.text-button {
  width: 100%;
  background: rgba(40, 106, 109, 0.1);
  color: var(--accent-dark);
  font-weight: 800;
}

.hidden {
  display: none;
}

@media (max-height: 690px) {
  .scene {
    min-height: 260px;
  }

  .dialog.is-open .letter {
    transform: translateY(-82px) scale(1.04);
  }

  .word-cloud {
    min-height: 300px;
  }
}

@keyframes water-surface-slow {
  0%,
  100% {
    transform: translateX(-3%) translateY(0);
  }

  50% {
    transform: translateX(3%) translateY(5px);
  }
}

@keyframes water-surface-fast {
  0%,
  100% {
    transform: translateX(4%) translateY(1px);
  }

  50% {
    transform: translateX(-4%) translateY(-3px);
  }
}

@keyframes svg-wave-current {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes boat-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(-2px) rotate(-2deg);
  }

  50% {
    transform: translate(-50%, -50%) translateY(8px) rotate(2.5deg);
  }
}

@keyframes envelope-fold-out {
  0%,
  18% {
    opacity: 1;
    transform: translateY(16px) scale(1) rotate(0deg);
  }

  48% {
    opacity: 0.82;
    transform: translateY(34px) scale(0.72, 0.58) rotate(-4deg);
  }

  72% {
    opacity: 0.34;
    transform: translateY(48px) scale(0.42, 0.34) rotate(7deg);
  }

  100% {
    opacity: 0;
    transform: translateY(54px) scale(0.18) rotate(10deg);
  }
}

@keyframes folding-boat-arrive {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px) scale(0.62, 0.5) rotate(-7deg);
  }

  22% {
    opacity: 1;
  }

  68% {
    transform: translate(-50%, -50%) translateY(2px) scale(0.92, 0.86) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes fold-sheet-away {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(1.1, 0.78) rotate(0deg);
  }

  18% {
    opacity: 1;
    transform: translateY(0) scale(1, 0.72) rotate(0deg);
  }

  54% {
    opacity: 0.78;
    transform: translateY(8px) scale(0.78, 0.44) rotateX(42deg);
  }

  100% {
    opacity: 0;
    transform: translateY(18px) scale(0.38, 0.22) rotateX(68deg);
  }
}

@keyframes fold-hull {
  0% {
    opacity: 0;
    transform: translateY(16px) scaleX(0.42);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
}

@keyframes fold-sail-left {
  0% {
    opacity: 0;
    transform: rotate(-52deg) scale(0.54);
    transform-origin: 100% 100%;
  }

  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    transform-origin: 100% 100%;
  }
}

@keyframes fold-sail-right {
  0% {
    opacity: 0;
    transform: rotate(52deg) scale(0.54);
    transform-origin: 0 100%;
  }

  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    transform-origin: 0 100%;
  }
}

@keyframes fold-crease {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}