/* ============ VAULT ============
   A letter sealed until 24 December 2026. The dark room holds the folded
   letter and its wax ∞ seal behind frosted glass; a countdown rolls
   underneath. At the moment the frost clears, the lock draws open, the
   glass parts, the seal breaks, the letter unfolds and inks itself in.
   Logic in vault.js. */

@property --vt-clear {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 130%;
}

.vault { padding: 5rem 1.2rem 7rem; }
.vault .section-head { margin-bottom: 2.6rem; }
.vt-eyebrow-text { display: inline-block; }

/* ---- Box ---- */
.vt-box {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.vt-box.is-open { max-width: 720px; }
/* soft maroon halo behind the room */
.vt-box::before {
  content: '';
  position: absolute;
  inset: 8% -6% -6%;
  border-radius: 50%;
  background: radial-gradient(55% 50% at 50% 55%, rgba(110, 36, 54, 0.32), rgba(217, 108, 138, 0.14) 55%, transparent 75%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.8s ease;
}
.vt-box.is-open::before { opacity: 0; }

/* ---- Room: dark card with a slow, faint conic rim ---- */
.vt-room {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  padding: 1.5px;
  background: #4A1626;
  box-shadow:
    0 44px 90px -40px rgba(82, 26, 40, 0.75),
    0 18px 44px -22px rgba(217, 108, 138, 0.4);
  transform-origin: 50% 100%;
}
.vt-room[hidden] { display: none; }
.vt-room::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
    transparent 0 16%, rgba(232, 160, 176, 0.75) 28%, transparent 40%,
    transparent 58%, rgba(242, 196, 179, 0.6) 70%, transparent 82%);
  opacity: 0.8;
}
.vt-room.is-live::before { animation: vt-spin 18s linear infinite; }
@keyframes vt-spin { to { transform: rotate(360deg); } }

.vt-stage {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(2rem - 1.5px);
  overflow: hidden;
  font: inherit;
  color: var(--maroon-paper);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(70% 45% at 50% 22%, rgba(232, 160, 176, 0.2), transparent 70%),
    radial-gradient(120% 80% at 50% -10%, #7C2B3F 0%, #4A1626 46%, #2A0C16 100%);
  box-shadow: inset 0 0 80px rgba(20, 5, 10, 0.55);
  perspective: 1100px;
}
.vt-stage:focus-visible { outline: 2px solid var(--rose-soft); outline-offset: 3px; }
.vt-stage:disabled { cursor: default; }

/* engraved rings of a vault door, a whisper behind the letter */
.vt-ghost {
  position: absolute;
  inset: 0;
  font-size: 0;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(232, 160, 176, 0.075) 34px 35px),
    radial-gradient(circle at 50% 50%, rgba(232, 160, 176, 0.1), transparent 34%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 74%);
  pointer-events: none;
  user-select: none;
}

/* ---- The folded letter ---- */
.vt-letter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  aspect-ratio: 2.05 / 1;
  translate: -50% -50%;
  rotate: -2.5deg;
  filter: blur(1.7px) brightness(0.9);
  perspective: 900px;
  transition: filter 1.2s ease, transform 0.6s var(--ease-out-strong), opacity 0.5s ease;
}
.vt-sheet {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 3px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #FCF6F1 0%, #F3E4DC 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* faint written lines on the inside of every panel */
.vt-pack,
.vt-flap-t,
.vt-flap-b {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(217, 108, 138, 0.16) 10px 11px),
    linear-gradient(180deg, #FFFDFB 0%, #F8ECE6 100%);
  background-size: 62% 100%, 100% 100%;
  background-position: 50% 8px, 0 0;
  background-repeat: no-repeat;
}
.vt-pack {
  top: 0;
  box-shadow:
    0 26px 44px -20px rgba(0, 0, 0, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 #fff;
}
/* the packet's outside face: paper, the flap's crease where the seal sits */
.vt-pack::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, transparent calc(72% - 1px), rgba(110, 36, 54, 0.2) calc(72% - 1px), rgba(110, 36, 54, 0.2) 72%, rgba(61, 44, 51, 0.07) 72%, transparent calc(72% + 4px)),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #FCF6F1 0%, #F3E4DC 100%);
  transition: opacity 0.45s ease;
}
/* hairline frame, like the paper it will become */
.vt-pack::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(217, 108, 138, 0.18);
  border-radius: 1px;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.vt-flap-t,
.vt-flap-b { box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6); }
.vt-flap-t {
  bottom: 100%;
  transform-origin: 50% 100%;
  transform: rotateX(-180deg);
}
.vt-flap-b {
  top: 100%;
  transform-origin: 50% 0%;
  transform: rotateX(180deg);
}

/* wax seal, in two halves */
.vt-seal {
  position: absolute;
  left: 50%;
  top: 72%;
  width: 3rem;
  height: 3rem;
  translate: -50% -50%;
  rotate: -8deg;
  filter: drop-shadow(0 10px 14px rgba(40, 8, 18, 0.55));
}
.vt-seal-h {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
}
.vt-seal-l { clip-path: inset(0 50% 0 0); }
.vt-seal-r { clip-path: inset(0 0 0 50%); }
.vt-seal-wax {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #B24E68 0%, #7C2B3F 48%, #521A28 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -4px 7px rgba(0, 0, 0, 0.32);
}
.vt-seal-wax::before {
  content: '';
  position: absolute;
  inset: 0.3rem;
  border-radius: 50%;
  border: 1px dashed rgba(255, 222, 230, 0.35);
}
.vt-seal-ico {
  position: relative;
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: rgba(255, 222, 230, 0.92);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Frosted glass ---- */
.vt-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  perspective: 1000px;
}
/* glass edge */
.vt-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12);
  transition: opacity 0.5s ease;
}
.vt-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  transition: transform 1s var(--ease-in-out-strong), opacity 0.55s ease 0.4s;
}
.vt-pane-l { left: 0; transform-origin: 0 50%; }
.vt-pane-r { right: 0; transform-origin: 100% 50%; }
/* the pane itself: a faint tint that stays once the frost has cleared */
.vt-pane::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.025) 42%, rgba(255, 255, 255, 0.08) 100%);
}
.vt-pane-r::after { left: -100%; }
/* the cut edge, lit only while the panes part */
.vt-pane::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.48) 30%, rgba(255, 255, 255, 0.48) 70%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.vt-pane-l::before { right: 0; }
.vt-pane-r::before { left: 0; }
/* Each pane owns a 100%-wide frost; the backgrounds and the clearing mask are
   sized 200% and positioned per pane so the picture is continuous across the seam.
   (WebKit drops a mask on an element that is offset outside its overflow-hidden
   parent — the old 200%-wide frost shifted by -100% — so no offset element here.) */
.vt-frost {
  --vt-clear: 130%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0.9;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  background:
    radial-gradient(40% 30% at 18% 14%, rgba(255, 255, 255, 0.26), transparent 100%),
    radial-gradient(46% 36% at 86% 90%, rgba(255, 255, 255, 0.18), transparent 100%),
    radial-gradient(70% 62% at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0.24) 82%, rgba(255, 255, 255, 0.36) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-mask-image: linear-gradient(115deg, #000 0%, #000 calc(var(--vt-clear) - 24%), transparent var(--vt-clear));
  mask-image: linear-gradient(115deg, #000 0%, #000 calc(var(--vt-clear) - 24%), transparent var(--vt-clear));
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.vt-pane-r .vt-frost {
  background-position: 100% 0;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
/* condensation: thresholded noise, so the droplets fall where they like */
.vt-frost::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.36;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='0.35'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 26 -16.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='0.5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 24 -15.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  background-size: 180px 180px, 260px 260px;
  background-position: 0 0, 40px 70px;
  /* thicker toward the cold edges, sparse over the letter */
  -webkit-mask-image: radial-gradient(62% 54% at 50% 50%, rgba(0, 0, 0, 0.35) 20%, #000 95%);
  mask-image: radial-gradient(62% 54% at 50% 50%, rgba(0, 0, 0, 0.35) 20%, #000 95%);
}
/* grain */
.vt-frost::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* one slow diagonal glint */
.vt-glint {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-140%, 0, 0) skewX(-16deg);
  transition: opacity 0.4s ease;
}
.vt-room.is-live .vt-glint { animation: vt-glint 8.5s var(--ease-in-out-strong) 1.2s infinite; }
@keyframes vt-glint {
  0% { transform: translate3d(-140%, 0, 0) skewX(-16deg); }
  34%, 100% { transform: translate3d(420%, 0, 0) skewX(-16deg); }
}

/* the lock, thin, in the corner */
.vt-lock {
  position: absolute;
  top: 1.15rem;
  right: 1.2rem;
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: rgba(255, 249, 244, 0.78);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  transition: opacity 0.4s ease;
}
.vt-lock-shackle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vt-lock-open { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* tooltip */
.vt-tip {
  position: absolute;
  left: 50%;
  top: 1.1rem;
  max-width: calc(100% - 5.5rem);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 249, 244, 0.96);
  color: var(--maroon);
  font-size: clamp(0.76rem, 3.6vw, 0.86rem);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(20, 5, 10, 0.6);
  opacity: 0;
  transform: translate3d(-50%, 6px, 0) scale(0.94);
  transition: opacity 0.22s ease, transform 0.35s var(--ease-out-strong);
  pointer-events: none;
}
.vt-tip.is-on { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }

/* ---- Refusal ---- */
.vt-room.is-refuse .vt-glass { animation: vt-shake 0.52s var(--ease-out-strong); }
.vt-room.is-refuse .vt-frost { opacity: 1; filter: brightness(1.22); transition-duration: 0.18s; }
@keyframes vt-shake {
  0% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-6px, 0, 0); }
  32% { transform: translate3d(5px, 0, 0); }
  50% { transform: translate3d(-4px, 0, 0); }
  68% { transform: translate3d(3px, 0, 0); }
  84% { transform: translate3d(-1.5px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---- Entrance ---- */
.vt-anim .vt-room {
  opacity: 0;
  transform: translate3d(0, 70px, 0) rotateX(14deg) scale(0.95);
}
.vt-anim.is-in .vt-room {
  opacity: 1;
  transform: none;
  transition: transform 1.2s var(--ease-out-strong), opacity 0.6s ease;
}
.vt-anim ~ .vt-meta .vt-slot {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.vt-anim.is-in ~ .vt-meta .vt-slot {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease calc(0.35s + var(--i) * 70ms), transform 0.9s var(--ease-out-strong) calc(0.35s + var(--i) * 70ms);
}
.vt-anim ~ .vt-meta .vt-year { opacity: 0; transition: opacity 0.8s ease 0.75s; }
.vt-anim.is-in ~ .vt-meta .vt-year { opacity: 1; }

/* ---- Countdown ---- */
.vt-meta {
  max-width: 560px;
  margin: 1.8rem auto 0;
  transition: opacity 0.7s ease, transform 0.8s var(--ease-in-out-strong), filter 0.7s ease;
}
.vt-meta[hidden] { display: none; }
.vt-meta.is-gone {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  pointer-events: none;
}
.vt-count {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.25rem, 1.6vw, 0.9rem);
  padding: 0 0.2rem;
}
.vt-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.vt-num {
  display: inline-flex;
  font-size: clamp(2.35rem, 11.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.vt-slot:last-of-type .vt-num { color: var(--rose); }
.vt-d {
  display: inline-block;
  width: 0.62em;
  height: 1.08em;
  overflow: hidden;
  text-align: center;
}
.vt-r {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, -1em, 0);
  transition: transform 0.55s var(--ease-out-strong);
  will-change: transform;
}
.vt-r i {
  display: block;
  height: 1em;
  line-height: 1.08;
  font-style: normal;
}
.vt-sep {
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  padding-top: 0.18em;
  color: var(--rose-soft);
}
.vt-lbl {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the year, written so far */
.vt-year {
  max-width: 340px;
  margin: 1.9rem auto 0;
  text-align: center;
}
.vt-year-text {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.vt-year-text strong { font-weight: 700; color: var(--rose); font-variant-numeric: tabular-nums; }
.vt-year-track {
  position: relative;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 99px;
  background: rgba(217, 108, 138, 0.14);
  overflow: visible;
}
.vt-year-fill {
  --vt-p: 0;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rose-soft), var(--rose) 70%, var(--maroon-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.6s var(--ease-in-out-strong) 0.7s;
}
.vt-year-fill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  translate: 0 -50%;
  background: var(--rose);
  box-shadow: 0 0 0 3px rgba(253, 248, 245, 0.95), 0 0 14px 2px rgba(217, 108, 138, 0.5);
  transform: scaleX(calc(1 / max(var(--vt-p), 0.01)));
}
.vt-box.is-in ~ .vt-meta .vt-year-fill { transform: scaleX(var(--vt-p)); }
.vt-box:not(.vt-anim) ~ .vt-meta .vt-year-fill { transform: scaleX(var(--vt-p)); transition: none; }

/* ---- Paper ---- */
.vt-paper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.6rem, 7.5vw, 3.8rem) clamp(1.6rem, 6.4vw, 3.8rem) clamp(2.2rem, 6vw, 3.4rem);
  background:
    radial-gradient(120% 40% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #FFFDFB 0%, #FCF3EE 100%);
  border: 1px solid rgba(217, 108, 138, 0.16);
  box-shadow: var(--shadow-ambient), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  text-align: left;
}
.vt-paper[hidden] { display: none; }
.vt-paper::before {
  content: '';
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(217, 108, 138, 0.15);
  border-radius: calc(var(--radius-xl) - 0.7rem);
  pointer-events: none;
}
.vt-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vt-paper.is-enter {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.97);
}
.vt-paper.is-enter.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease 0.15s, transform 1.05s var(--ease-out-strong) 0.15s;
}
.vt-ribbon {
  position: absolute;
  top: 3rem;
  right: -4.6rem;
  z-index: 3;
  padding: 0.3rem 3.6rem;
  background: linear-gradient(145deg, var(--rose), var(--maroon-soft));
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(110, 36, 54, 0.6);
  transform: rotate(45deg) translate3d(0, -160%, 0);
  opacity: 0;
  transition: transform 0.7s var(--ease-out-strong) 0.9s, opacity 0.3s ease 0.9s;
  pointer-events: none;
}
.vt-paper.is-in .vt-ribbon { transform: rotate(45deg); opacity: 1; }
.vt-phead {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
}
.vt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.vt-kicker svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.vt-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.7rem 0 1.9rem;
  color: var(--rose);
}
.vt-ornament svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.vt-ornament span {
  width: 3.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 108, 138, 0.55));
}
.vt-ornament span:last-child { transform: scaleX(-1); }

.vt-body p {
  font-size: clamp(1.06rem, 4.1vw, 1.26rem);
  line-height: 2.05;
  color: var(--ink);
  text-wrap: pretty;
  margin-bottom: 1.35em;
}
.vt-body p:last-child { margin-bottom: 0; }
.vt-body .vt-salute {
  font-size: clamp(1.4rem, 5.6vw, 1.85rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.vt-body p.vt-beat {
  max-width: 17em;
  margin: 2.3em auto;
  font-size: clamp(1.28rem, 5.3vw, 1.65rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
  color: var(--maroon);
}
.vt-body p.vt-beat::before {
  content: '';
  display: block;
  width: 2.2rem;
  height: 1px;
  margin: 0 auto 1em;
  background: rgba(217, 108, 138, 0.5);
}
.vt-body p.ar {
  text-align: right;
  line-height: 2.2;
  font-size: clamp(1.14rem, 4.5vw, 1.34rem);
  margin-bottom: 0.5em;
}
.vt-body p.vt-beat + p.ar { margin-top: 0; }

/* masked words */
.vt-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0.04em 0.16em;
  margin: -0.14em -0.04em -0.16em;
}
.vt-w-ar { padding: 0.26em 0.06em 0.22em; margin: -0.26em -0.06em -0.22em; }
.vt-wi { display: inline-block; }
.vt-punct { display: inline; }
.vt-paper.is-masked .vt-wi { transform: translate3d(0, 108%, 0); }
.vt-paper.is-masked.is-inked .vt-wi {
  transform: none;
  transition: transform 0.85s var(--ease-out-strong) calc(var(--i, 0) * 15ms);
}

/* signature */
.vt-sign { position: relative; margin-top: 2.4rem; text-align: right; }
.vt-sign-name {
  display: inline-block;
  font-size: clamp(1.45rem, 5.6vw, 1.9rem);
  font-weight: 900;
  line-height: 1.6;
  background: linear-gradient(120deg, var(--rose), var(--maroon-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease-out-strong);
}
.vt-underline {
  display: block;
  width: min(13rem, 62%);
  height: 0.9rem;
  margin: 0.15rem 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: var(--rose-soft);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: scaleX(-1);
}
.vt-paper.is-signed .vt-sign-name { opacity: 1; transform: none; }
.vt-paper.is-signed .vt-underline {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s var(--ease-in-out-strong) 0.35s;
}
.vt-box.is-instant .vt-sign-name,
.vt-box.is-instant .vt-underline,
.vt-box.is-instant .vt-ribbon { transition: none; }

/* ---- The ceremony ---- */
/* 1. frost clears, the letter comes into focus */
.vt-box.is-clearing .vt-frost {
  --vt-clear: -10%;
  opacity: 0;
  transition: --vt-clear 1.35s var(--ease-in-out-strong), opacity 0.5s ease 1.05s;
}
.vt-box.is-clearing .vt-letter { filter: none; }
/* 2. the lock draws itself open */
.vt-box.is-unlocking .vt-lock-shackle {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s var(--ease-in-out-strong);
}
.vt-box.is-unlocking .vt-lock-open {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.55s var(--ease-in-out-strong) 0.42s;
}
.vt-box.is-unlocking .vt-lock-body { animation: vt-lock-nudge 0.5s var(--ease-spring) 0.9s; }
@keyframes vt-lock-nudge {
  0% { transform: translateY(0); }
  40% { transform: translateY(1.2px); }
  100% { transform: translateY(0); }
}
/* 3. the glass parts */
.vt-box.is-splitting .vt-pane-l { transform: translate3d(-106%, 0, 0) rotateY(-10deg); opacity: 0; }
.vt-box.is-splitting .vt-pane-r { transform: translate3d(106%, 0, 0) rotateY(10deg); opacity: 0; }
.vt-box.is-splitting .vt-pane::before { opacity: 1; }
.vt-box.is-splitting .vt-glass::before,
.vt-box.is-splitting .vt-glint,
.vt-box.is-splitting .vt-lock { opacity: 0; }
.vt-box.is-splitting .vt-lock { transition-delay: 0.3s; }
/* 4. the seal breaks */
.vt-seal-h { transition: transform 0.8s cubic-bezier(0.5, 0, 0.75, 0.3), opacity 0.3s ease 0.5s; }
.vt-box.is-breaking .vt-seal-l { transform: translate3d(-20px, 26px, 0) rotate(-30deg); opacity: 0; }
.vt-box.is-breaking .vt-seal-r { transform: translate3d(20px, 30px, 0) rotate(26deg); opacity: 0; }
.vt-box.is-breaking .vt-seal { animation: vt-seal-crack 0.28s var(--ease-out-strong); }
@keyframes vt-seal-crack {
  0% { scale: 1; }
  40% { scale: 1.1; }
  100% { scale: 1; }
}
/* 5. the letter rises and unfolds */
.vt-box.is-rising .vt-letter { transform: translate3d(0, -6%, 0) scale(1.03); }
.vt-flap-t,
.vt-flap-b { transition: transform 0.75s var(--ease-in-out-strong); }
.vt-box.is-unfold1 .vt-flap-t { transform: rotateX(0deg); }
.vt-box.is-unfold1 .vt-letter { transform: translate3d(0, 50%, 0) scale(1.03); transition: filter 1.2s ease, transform 0.75s var(--ease-in-out-strong), opacity 0.5s ease; }
.vt-box.is-unfold2 .vt-flap-b { transform: rotateX(0deg); }
.vt-box.is-unfold2 .vt-letter { transform: translate3d(0, 0, 0) scale(1.03); }
.vt-box.is-unfold1 .vt-pack::before,
.vt-box.is-unfold1 .vt-pack::after { opacity: 0; }
.vt-box.is-unfold1 .vt-pack { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: box-shadow 0.5s ease; }
/* 6. settles as paper: the room fades, the sheet grows into the page */
.vt-box.is-settling .vt-room {
  opacity: 0;
  transition: opacity 0.85s ease 0.1s;
  pointer-events: none;
}
.vt-box.is-settling .vt-letter {
  transform: translate3d(0, -4%, 0) scale(1.18);
  opacity: 0;
  transition: transform 1s var(--ease-in-out-strong), opacity 0.55s ease 0.25s;
}

/* ---- Desktop ---- */
@media (min-width: 768px) {
  .vault { padding: 8rem 1.2rem 10rem; }
  .vt-box { max-width: 480px; }
  .vt-box.is-open { max-width: 720px; }
  .vt-stage { aspect-ratio: 5 / 4; max-height: none; }
  .vt-letter { width: 52%; }
  .vt-meta { margin-top: 2.2rem; }
  .vt-lbl { font-size: 0.68rem; }
  .vt-body p { line-height: 2.1; }
}

/* ---- Hover only where hover exists ---- */
@media (hover: hover) and (pointer: fine) {
  .vt-stage:not(:disabled):hover .vt-lock { stroke: rgba(255, 249, 244, 0.95); }
}

/* ---- Reduced motion: no loops, plain updates, simple fades ---- */
@media (prefers-reduced-motion: reduce) {
  .vt-room.is-live::before,
  .vt-room.is-live .vt-glint,
  .vt-room.is-refuse .vt-glass,
  .vt-box.is-breaking .vt-seal,
  .vt-box.is-unlocking .vt-lock-body { animation: none; }
  .vt-r { transition: none; }
  .vt-anim .vt-room,
  .vt-anim ~ .vt-meta .vt-slot,
  .vt-anim ~ .vt-meta .vt-year { opacity: 1; transform: none; transition: none; }
  .vt-year-fill { transition: none; }
  .vt-meta { transition: opacity 0.3s ease; transform: none; filter: none; }
  .vt-meta.is-gone { transform: none; filter: none; }
  .vt-box.is-settling .vt-room { transition: opacity 0.4s ease; }
  .vt-paper.is-enter { transform: none; }
  .vt-paper.is-enter.is-in { transition: opacity 0.5s ease; }
  .vt-ribbon { transform: rotate(45deg); transition: opacity 0.3s ease; }
  .vt-underline { transition: none; }
  .vt-sign-name { transform: none; transition: opacity 0.3s ease; }
  .vt-letter { transition: none; }
}