:root {
  color-scheme: dark;
  --ink: #f2ead9;
  --muted: #9db7b1;
  --deep: #d8c49f;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 52%, #16483f 0%, #0e3a34 42%, #082b28 100%);
  color: var(--ink);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: soft-light;
  opacity: 0.08;
  pointer-events: none;
}

button {
  font: inherit;
}

.cover {
  display: grid;
  align-content: start;
  min-height: 100svh;
  padding: clamp(2.2rem, 4.5vh, 4rem) clamp(1rem, 3vw, 3rem) clamp(1.25rem, 3vh, 2.5rem);
}

.cover__heading {
  position: relative;
  z-index: 5;
  width: min(74rem, 100%);
  margin: 0 auto clamp(0.55rem, 1.5vh, 1.25rem);
  text-align: center;
}

.cover__date {
  margin: 0 0 0.55rem;
  color: #aec8c1;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.34em;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.15rem, 5.3vw, 5.4rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.08;
}

.cover__line {
  display: block;
  width: clamp(3rem, 8vw, 6.5rem);
  height: 1px;
  margin: clamp(1rem, 2vh, 1.5rem) auto 0;
  background: linear-gradient(90deg, transparent, #d8c49f, transparent);
  opacity: 0.55;
}

.viewer {
  position: relative;
  width: min(78rem, 100%);
  margin: 0 auto;
  isolation: isolate;
}

.viewer__glow {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: rgba(32, 101, 87, 0.33);
  filter: blur(64px);
  transform: translateX(-50%);
}

.viewer__scene {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(25rem, 66vh, 53rem);
  perspective: 1750px;
  perspective-origin: 50% 50%;
  outline: none;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.viewer__scene:active {
  cursor: grabbing;
}

.viewer__scene:focus-visible {
  border-radius: 1.5rem;
  outline: 2px solid rgba(202, 220, 211, 0.55);
  outline-offset: 6px;
}

.house-card {
  --rotate-x: -3deg;
  --rotate-y: 0deg;
  --card-scale: 1;
  position: relative;
  z-index: 2;
  width: min(76rem, 94vw, calc((66vh - 1rem) * 1.599));
  aspect-ratio: 1586 / 992;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--card-scale));
  transform-style: preserve-3d;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 2.1rem 2.6rem rgba(0, 17, 15, 0.3));
  transition: filter 240ms ease;
  will-change: transform;
}

.house-card::before,
.house-card::after {
  display: none;
}

.house-card.is-moving {
  filter: brightness(1.035) drop-shadow(0 2.8rem 3.2rem rgba(0, 16, 14, 0.38));
}

.house-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(8px);
}

.cake-halo {
  position: absolute;
  top: 50.5%;
  left: 23.4%;
  z-index: 8;
  width: 8.2%;
  height: 11.5%;
  border-radius: 50%;
  transform: translateZ(18px);
  pointer-events: none;
}

.cake-halo::before {
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(255, 225, 151, 0.46);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 169, 0.14), transparent 68%);
  box-shadow: 0 0 0.9rem rgba(255, 213, 117, 0.18);
  content: "";
  opacity: 0.54;
  animation: cake-pulse 2.8s ease-in-out infinite;
}

@keyframes cake-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 213, 117, 0.18);
  }

  50% {
    box-shadow: 0 0 0 0.6rem rgba(255, 213, 117, 0);
  }
}

.bubble-trail {
  position: absolute;
  top: 0.5%;
  right: clamp(-0.5rem, 1.8vw, 1.4rem);
  z-index: 5;
  width: clamp(12rem, 19vw, 16.5rem);
  height: clamp(10rem, 16vw, 14rem);
  color: #f8f2e6;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  pointer-events: none;
  filter: drop-shadow(0 0.8rem 1.5rem rgba(0, 18, 16, 0.18));
}

.bubble {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(233, 247, 241, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 29% 24%, rgba(255, 255, 255, 0.34) 0 4%, transparent 10%),
    radial-gradient(circle at 67% 73%, rgba(136, 203, 191, 0.13), transparent 54%),
    rgba(219, 242, 236, 0.055);
  box-shadow:
    inset 0.18rem 0.22rem 0.6rem rgba(255, 255, 255, 0.16),
    inset -0.25rem -0.35rem 0.75rem rgba(49, 129, 115, 0.1),
    0 0 0.85rem rgba(185, 229, 218, 0.09);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.bubble::after {
  position: absolute;
  top: 16%;
  left: 20%;
  width: 28%;
  height: 14%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  content: "";
  filter: blur(0.5px);
  transform: rotate(-31deg);
}

.bubble--tiny {
  bottom: 2%;
  left: 3%;
  width: clamp(0.8rem, 1.4vw, 1.2rem);
  aspect-ratio: 1;
}

.bubble--small {
  bottom: 17%;
  left: 13%;
  width: clamp(1.25rem, 2.2vw, 1.9rem);
  aspect-ratio: 1;
}

.bubble--medium {
  bottom: 33%;
  left: 25%;
  width: clamp(2rem, 3.4vw, 2.9rem);
  aspect-ratio: 1;
}

.bubble--message {
  top: 0;
  right: 0;
  width: clamp(8.4rem, 13vw, 11rem);
  aspect-ratio: 1;
  padding: 1.35rem;
  font-size: clamp(0.82rem, 1.35vw, 1.08rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.65;
  text-align: center;
  text-shadow: 0 0.1rem 0.8rem rgba(0, 29, 25, 0.8);
  animation: bubble-float 4.8s ease-in-out infinite;
}

@keyframes bubble-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -0.35rem, 0);
  }
}

.house-card__edge {
  display: none;
}

.house-card__shine {
  display: none;
}

.viewer__floor {
  position: absolute;
  bottom: -1%;
  left: 50%;
  z-index: 0;
  width: min(66rem, 76vw);
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 13, 12, 0.5), rgba(4, 30, 27, 0.18) 46%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  transform: translateX(-50%) rotateX(70deg) translateZ(-120px);
}

.viewer__toolbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: clamp(0.2rem, 1.2vh, 0.8rem);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.viewer__toolbar p {
  margin: 0 0.35rem;
  color: #9fb8b1;
  font-size: clamp(0.72rem, 1.2vw, 0.84rem);
  letter-spacing: 0.08em;
}

.round-button,
.reset-button {
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 218, 208, 0.2);
  background: rgba(5, 33, 30, 0.62);
  color: #eee3cf;
  box-shadow: 0 0.35rem 1rem rgba(0, 17, 15, 0.22);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.round-button {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  font-size: 1.12rem;
}

.reset-button {
  min-height: 2.35rem;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
}

.round-button:hover,
.reset-button:hover,
.round-button:focus-visible,
.reset-button:focus-visible {
  border-color: rgba(226, 213, 188, 0.56);
  background: rgba(27, 72, 64, 0.92);
  outline: none;
  transform: translateY(-2px);
}

.round-button:active,
.reset-button:active {
  transform: translateY(0) scale(0.96);
}

.viewer__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .cover {
    padding-top: max(2.25rem, env(safe-area-inset-top));
  }

  .cover__heading {
    margin-bottom: 0.8rem;
  }

  .viewer__scene {
    height: clamp(23rem, 60vh, 39rem);
  }

  .house-card {
    width: min(96vw, calc((60vh - 2rem) * 1.599));
  }

  .bubble-trail {
    top: 3%;
    right: -0.6rem;
    width: 10.5rem;
    height: 9rem;
    transform: scale(0.78);
    transform-origin: top right;
  }

  .bubble--message {
    width: 7.3rem;
    padding: 1rem;
    font-size: 0.72rem;
  }

  .viewer__toolbar {
    flex-wrap: wrap;
  }

  .viewer__toolbar p {
    order: -1;
    width: 100%;
    margin: 0 0 0.25rem;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}