:root {
  --paper: #f0deca;
  --ink: #0f2b41;
  --outer: #f0deca;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--outer);
}

body {
  min-height: 100dvh;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

.preview {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

.stage {
  position: relative;
  /* Fit the text-safe band (y 76–830 of 852) rather than the full card, so
     short mobile viewports (Safari toolbars) crop only the empty top/bottom
     edges and the card stays as wide as possible. */
  width: min(393px, 100vw, calc(100dvh * 393 / 754));
  aspect-ratio: 393 / 852;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 24px 70px rgb(0 0 0 / 0.38);
}

.front-world,
.front-paper,
.back-paper,
.back-info {
  position: absolute;
  inset: 0;
  isolation: isolate;
  transform-origin: 50% 43%;
  will-change: transform, opacity, clip-path;
}

.front-paper {
  z-index: 0;
}

.front-world {
  z-index: 1;
}

.layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
}

.sea-texture-window {
  overflow: hidden;
  mask-image: url("./assets/sea_layer.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url("./assets/sea_layer.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.sea-texture-drift {
  position: absolute;
  inset: -1.75%;
  display: block;
  width: 103.5%;
  height: 103.5%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.sea-texture-shimmer {
  mix-blend-mode: screen;
  opacity: 0.26;
  will-change: transform, opacity;
}

.far-mountain-matte,
.far-texture-window {
  overflow: hidden;
  mask-image: url("./assets/far_mountain_layer.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url("./assets/far_mountain_layer.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.far-mountain-matte {
  background: var(--paper);
}

.far-texture-drift {
  position: absolute;
  inset: -2%;
  display: block;
  width: 104%;
  height: 104%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
}

.far-texture-shadow {
  mix-blend-mode: multiply;
  opacity: 0.12;
}

.near-texture-window {
  overflow: hidden;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.sunny-texture-window {
  mask-image: url("./assets/mountain_sunny_layer.svg");
  -webkit-mask-image: url("./assets/mountain_sunny_layer.svg");
}

.shady-orange-texture-window {
  mask-image: url("./assets/mountain_shady_mask_orange.svg");
  -webkit-mask-image: url("./assets/mountain_shady_mask_orange.svg");
}

.shady-ochre-texture-window {
  mask-image: url("./assets/mountain_shady_mask_ochre.svg");
  -webkit-mask-image: url("./assets/mountain_shady_mask_ochre.svg");
}

.shady-blue-texture-window {
  mask-image: url("./assets/mountain_shady_mask_blue.svg");
  -webkit-mask-image: url("./assets/mountain_shady_mask_blue.svg");
}

.near-texture-drift {
  position: absolute;
  inset: -1.5%;
  display: block;
  width: 103%;
  height: 103%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.shady-orange-texture,
.shady-ochre-texture,
.shady-blue-texture {
  mix-blend-mode: normal;
  opacity: 1;
}

.shady-region-color {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: multiply;
}

.stone-texture-window {
  overflow: hidden;
  mask-image: url("./assets/stone_layer.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url("./assets/stone_layer.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.stone-texture-drift {
  position: absolute;
  inset: -2%;
  display: block;
  width: 104%;
  height: 104%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.sky-texture-window {
  overflow: hidden;
  mask-image: url("./assets/sky_layer.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url("./assets/sky_layer.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.sky-texture-drift {
  position: absolute;
  inset: -1.5%;
  display: block;
  width: 103%;
  height: 103%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.sun-texture-window {
  overflow: hidden;
  mask-image: url("./assets/sun_layer.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url("./assets/sun_layer.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.sun-texture-drift {
  position: absolute;
  inset: -1.5%;
  display: block;
  width: 103%;
  height: 103%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.boat-window {
  overflow: visible;
}

.boat-motion {
  transform-origin: 82.5% 46.7%;
  will-change: transform;
}

/* Inspection mode: isolate the near-mountain texture and its fixed color
   silhouette without changing the full composition or animation values. */
body.is-near-focus .front-world > * {
  visibility: hidden;
}

body.is-near-focus .front-world > .near-texture-window,
body.is-near-focus .front-world > .near-color-layer {
  visibility: visible;
}

body.is-near-focus .front-world {
  opacity: 1 !important;
}

body.is-near-focus .back-paper,
body.is-near-focus .back-info {
  display: none;
}

.normal {
  mix-blend-mode: normal;
}

.darken {
  mix-blend-mode: darken;
}

.multiply {
  mix-blend-mode: multiply;
}

.exclusion {
  mix-blend-mode: exclusion;
}

.color {
  mix-blend-mode: color;
}

.copy {
  position: absolute;
  z-index: 8;
  left: 50%;
  width: 82%;
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, 8px);
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 4.6vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-wrap: balance;
  text-shadow: 0 1px rgb(240 222 202 / 0.72), 0 0 8px rgb(240 222 202 / 0.45);
  pointer-events: none;
  will-change: opacity, transform;
}

.copy-opening-a {
  top: 13%;
}

.copy-opening-b {
  top: 18%;
}

.copy-invitation {
  top: auto;
  bottom: 8.8%;
  left: 12.5%;
  display: grid;
  gap: 10px;
  width: 75%;
  opacity: 1;
  transform: none;
  text-align: left;
  text-shadow: 0 1px rgb(240 222 202 / 0.68), 0 0 5px rgb(240 222 202 / 0.28);
  transform-origin: 0 100%;
}

.copy-line-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.08em;
}

.invitation-salutation-mask {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
}

.invitation-rule {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.72;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: opacity, transform;
}

.invitation-salutation {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif;
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  will-change: opacity, transform;
}

.invitation-main {
  display: grid;
  gap: 1px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(20px, 5.55vw, 23px);
  line-height: 1.08;
  letter-spacing: 0.002em;
}

.invitation-main-line {
  display: block;
  will-change: opacity, transform;
}

.invitation-main-mask {
  width: max-content;
  margin-left: 3%;
}

.invitation-line-one {
  font-size: 1em;
}

.invitation-while-mask {
  width: max-content;
  margin-left: 14%;
}

.invitation-line-two {
  font-size: 1em;
  font-style: italic;
  letter-spacing: 0.008em;
}

.copy-blessing {
  top: 11.5%;
  right: 12%;
  left: auto;
  overflow: hidden;
  width: 42%;
  opacity: 1;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(12px, 3.25vw, 14px);
  font-style: italic;
  letter-spacing: 0.025em;
  line-height: 1.3;
  text-align: right;
  transform-origin: 100% 50%;
}

.blessing-text {
  display: grid;
  justify-items: end;
  gap: 1px;
  will-change: opacity, transform, letter-spacing;
}

.blessing-line-two {
  margin-right: 7%;
  font-size: 1.16em;
  letter-spacing: 0.01em;
}

.back-paper {
  z-index: 12;
  opacity: 0;
  clip-path: polygon(0% 44%, 18% 40%, 34% 42%, 49% 38%, 61% 41%, 75% 35%, 88% 37%, 100% 32%, 100% 32%, 88% 37%, 75% 35%, 61% 41%, 49% 38%, 34% 42%, 18% 40%, 0% 44%);
}

.back-info {
  z-index: 13;
  opacity: 0;
  transform: scale(1.02);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.back-region {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.back-poem {
  position: absolute;
  z-index: 2;
  top: 17.45%;
  left: 20%;
  display: grid;
  gap: 24px;
  width: 70%;
  color: var(--ink);
  font-family: "PingFang TC", "Hiragino Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: clamp(11px, 3.05vw, 12px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.poem-line-text {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  will-change: opacity, transform;
}

.poem-phrase {
  display: inline-block;
  opacity: 0;
  letter-spacing: 0.08em;
  will-change: opacity, transform, filter, letter-spacing;
}

.back-brand {
  position: absolute;
  z-index: 2;
  bottom: 5.5%;
  left: 50%;
  display: grid;
  gap: 2px;
  color: var(--ink);
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.back-brand span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.back-brand small {
  font-size: 7px;
  letter-spacing: 0.28em;
}

.compare-switch {
  position: absolute;
  z-index: 40;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(240 222 202 / 0.3);
  border-radius: 999px;
  background: rgb(15 43 65 / 0.78);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
}

.compare-switch a {
  min-width: 48px;
  padding: 6px 9px;
  border-radius: 999px;
  color: rgb(240 222 202 / 0.72);
  text-align: center;
  text-decoration: none;
}

.compare-switch a[aria-current="page"] {
  color: var(--ink);
  background: var(--paper);
}

body.is-debug .compare-switch {
  bottom: max(94px, calc(env(safe-area-inset-bottom) + 94px));
}

body.is-embed .compare-switch,
body.is-embed .debug-panel {
  display: none;
}

.debug-panel {
  position: absolute;
  z-index: 30;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  padding: 8px 10px;
  border: 1px solid rgb(240 222 202 / 0.28);
  border-radius: 9px;
  color: #f0deca;
  background: rgb(15 43 65 / 0.84);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
}

body:not(.is-debug) .debug-panel {
  display: none;
}

.debug-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.debug-panel button {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgb(240 222 202 / 0.36);
  border-radius: 999px;
  color: inherit;
  background: transparent;
}

.study-link {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgb(240 222 202 / 0.36);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}

.time-output {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.scrubber {
  display: block;
  width: 100%;
  margin: 7px 0 4px;
  accent-color: #f0deca;
}

.phase-output {
  min-height: 1.2em;
  color: rgb(240 222 202 / 0.74);
}

@media (max-width: 393px), (max-height: 852px) {
  .stage {
    box-shadow: none;
  }
}

/* When the card is taller than the viewport, centre the text-safe band
   (its centre sits ~27px below the card centre) instead of the card. */
@media (max-height: 851px) {
  .stage {
    translate: 0 -3.17%;
  }
}

/* Loading cover: hides the stage until textures are decoded and the
   first frames are composited, then fades away before motion starts. */
.loading-cover {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  opacity: 1;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.loading-brand {
  display: grid;
  gap: 2px;
  text-align: center;
  animation: loading-breathe 1.8s ease-in-out infinite;
}

.loading-brand span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.loading-brand small {
  font-size: 7px;
  letter-spacing: 0.28em;
}

@keyframes loading-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

body.is-ready .loading-cover {
  opacity: 0;
}