@font-face {
  font-family: "Share Tech Mono";
  src: url("assets/fonts/ShareTechMono-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --pink: #d47e8c;
  --cream: #fefbf8;
  --red-ink: #ae2700;
  --blue-ink: #21445d;
  --blue-soft: #86afcb;
  --mono: "Share Tech Mono", ui-monospace, "Courier New", monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* background tile = one 1366×768 Canva section, scaled like the stage */
  --tile: min(100vw, 1600px);
}

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

html {
  background-color: #fcd2d6;
  background-image: url("assets/bg-page1.webp");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: var(--tile) auto;
  -webkit-text-size-adjust: 100%;
}
html[data-view="page-2"] { background-color: #efeeee; background-image: url("assets/bg-page2.webp"); }
html[data-view="page-3"] { background-color: #dcecef; background-image: url("assets/bg-page3.webp"); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mono);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

main { position: relative; z-index: 1; }

img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }

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

/* ───────────── stage: Canva coordinates (1366 × 1536) ───────────── */

.view { container-type: inline-size; position: relative; overflow: clip; }
.view[hidden] { display: none; }

.stage {
  --u: calc(min(100cqw, 1600px) / 1366);
  --ox: calc((100cqw - 1366 * var(--u)) / 2);
  position: relative;
  height: calc(1536 * var(--u));
}

.el {
  position: absolute;
  left: calc(var(--ox) + var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
}
img.el, .el img { height: auto; }

.fx { position: absolute; left: 0; width: 100%; pointer-events: none; }

/* ───────────── PAGE 1 ───────────── */

.fx--home-glow {
  top: calc(1113.24 * var(--u));
  height: calc(422.76 * var(--u));
  opacity: .78;
  background: linear-gradient(to top, rgb(254 103 103) 0%, rgb(255 101 101 / .6) 50%, rgb(255 255 255 / 0) 100%);
}
.fx--home-strip {
  top: calc(1471.89 * var(--u));
  height: calc(66.15 * var(--u));
  background: linear-gradient(to bottom, rgb(255 101 101 / .135), rgb(254 103 103));
}

.title, .photo, .clip, .star, .cursor { pointer-events: none; }
.photo { z-index: 1; }
.sticker { z-index: 2; pointer-events: none; }
.clip { z-index: 2; }

.clickus, .clickus-sub, .footer {
  width: auto;
  color: var(--cream);
  line-height: 1;
  white-space: pre;
  font-family: var(--mono);
  z-index: 3;
}
.clickus { font-size: calc(51.4 * var(--u)); letter-spacing: calc(2.8 * var(--u)); }
.clickus-sub, .footer { font-size: calc(21.4 * var(--u)); letter-spacing: calc(-.36 * var(--u)); }
.cursor--home { z-index: 3; transform-origin: 12% 8%; }

/* envelopes */
.env {
  z-index: 4;
  display: block;
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  transition: translate .45s var(--ease-spring), scale .45s var(--ease-spring);
}
.env__float {
  display: block;
  animation: env-float 5.2s ease-in-out infinite alternate;
}
.env--blue .env__float { animation-duration: 4.6s; animation-delay: -2.3s; }
.env img {
  width: 100%;
  transition: filter .45s var(--ease-out);
  filter: drop-shadow(0 0 0 rgb(120 40 50 / 0));
}
.env:hover, .env:focus-visible { translate: 0 calc(-16 * var(--u)); scale: 1.045; }
.env:hover img, .env:focus-visible img { filter: drop-shadow(0 calc(18 * var(--u)) calc(16 * var(--u)) rgb(150 50 60 / .22)); }
.env:active { scale: .985; transition-duration: .12s; }
.env:focus-visible .env__float { outline: 3px dashed var(--cream); outline-offset: 6px; border-radius: 14px; }
.env.is-opening { visibility: hidden; }

@keyframes env-float {
  from { transform: translateY(-1.6%) rotate(-1.1deg); }
  to   { transform: translateY(1.6%) rotate(1.1deg); }
}

/* intro choreography (restarted every time page 1 is shown) */
.is-intro .el[data-anim="write"] { animation: a-write 1.5s var(--ease-out) .15s both; }
.is-intro .el[data-anim="photo"] { animation: a-photo 1s var(--ease-out) .25s both; }
.is-intro .el[data-anim="stamp"] { animation: a-stamp .7s var(--ease-out) 1.05s both; }
.is-intro .el[data-anim="drop"]  { animation: a-drop .9s var(--ease-out) .7s both; }
.is-intro .el[data-anim="rise"]  { animation: a-rise .9s var(--ease-spring) .95s both; }
.is-intro .env--blue[data-anim="rise"] { animation-delay: 1.1s; }
.is-intro .el[data-anim="type"]  { animation: a-type .8s steps(8, end) 1.4s both; }
.is-intro .el[data-anim="fade"]  { animation: a-fade .6s ease 1.9s both; }
.is-intro .el.cursor--home { animation: a-fade .5s ease 1.9s both, a-tap 2.4s ease-in-out 2.6s infinite; }
.is-intro .star { animation: a-pop .8s var(--ease-spring) 1.2s both, a-twinkle 7s ease-in-out 2.2s infinite; }
.is-intro .star--flower { animation-delay: 1.35s, 2.4s; animation-duration: .8s, 9s; }

@keyframes a-write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -2% -10% 0); } }
@keyframes a-photo {
  from { opacity: 0; transform: translateY(5%) rotate(3.5deg) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes a-stamp {
  0%   { opacity: 0; transform: scale(1.9) rotate(-28deg); }
  55%  { opacity: 1; transform: scale(.9) rotate(5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes a-drop {
  0%   { opacity: 0; transform: translateY(-35%) rotate(-20deg); }
  60%  { opacity: 1; transform: translateY(4%) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes a-rise {
  from { opacity: 0; transform: translateY(22%) scale(.86) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes a-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -5% 0 0); } }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-pop {
  from { opacity: 0; transform: scale(0) rotate(-120deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes a-twinkle {
  0%, 100% { transform: rotate(0) scale(1); }
  30%      { transform: rotate(14deg) scale(1.08); }
  60%      { transform: rotate(-8deg) scale(.96); }
}
@keyframes a-tap {
  0%, 55%, 100% { transform: none; }
  65%           { transform: translate(-9%, -7%); }
  72%           { transform: translate(-9%, -7%) scale(.86); }
  80%           { transform: translate(-9%, -7%); }
}

/* ───────────── balloons ───────────── */

.balloons {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
html:not([data-view="home"]) .balloons { display: none; }

.balloon {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--size);
  opacity: var(--alpha, 1);
  animation: balloon-rise var(--dur) cubic-bezier(.35, .1, .55, .95) var(--delay, 0s) both;
  will-change: transform;
}
.balloon__sway {
  display: block;
  transform-origin: 50% 20%;
  animation: balloon-sway var(--sway-dur) ease-in-out infinite alternate;
}
.balloon svg { display: block; width: 100%; height: auto; overflow: visible; }

@keyframes balloon-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(calc(-100vh - 100%)); }
}
@keyframes balloon-sway {
  from { transform: translateX(calc(var(--sway) * -1)) rotate(calc(var(--tilt) * -1)); }
  to   { transform: translateX(var(--sway)) rotate(var(--tilt)); }
}

/* ───────────── PAGES 2 & 3 · letters ───────────── */

.view--white { --ink: var(--red-ink); --tapos: var(--pink); }
.view--blue  { --ink: var(--blue-ink); --tapos: var(--blue-soft); }

.letter {
  position: absolute;
  left: calc(var(--ox) + 74.8 * var(--u));
  top: calc(189.6 * var(--u));
  margin: 0;
  color: var(--ink);
  font-size: calc(32.2 * var(--u));
  line-height: calc(43.6 * var(--u));
  letter-spacing: calc(-1.79 * var(--u));
  text-transform: uppercase;
  z-index: 2;
}
.letter p { margin: 0; }
.letter p + p { margin-top: calc(43.6 * var(--u)); }
.letter p.gap-2 { margin-top: calc(87.2 * var(--u)); }
.ln { display: block; white-space: pre; }
.ln--seam { margin-top: calc(11 * var(--u)); }

.ln {
  opacity: 0;
  transform: translateY(.3em);
  filter: blur(3px);
  transition: opacity .7s ease, transform .7s var(--ease-out), filter .7s ease;
  transition-delay: calc(var(--i, 0) * 55ms);
}
.ln.is-in { opacity: 1; transform: none; filter: none; }

.fx--letter-glow {
  top: calc(1189.46 * var(--u));
  height: calc(346.54 * var(--u));
  opacity: .78;
  z-index: 1;
}
.view--white .fx--letter-glow {
  background: linear-gradient(to top, rgb(254 103 103 / .856) 0%, rgb(255 101 101 / .6) 39%, rgb(255 255 255 / 0) 100%);
}
.view--blue .fx--letter-glow {
  background: linear-gradient(to top, rgb(65 94 113 / .804) 0%, rgb(107 145 171 / .455) 39%, rgb(72 76 111 / 0) 100%);
}

.letter-end { position: static; }

.tapos {
  --x: 77; --y: 1330.1;
  width: auto;
  color: var(--tapos);
  font-size: calc(23.6 * var(--u));
  letter-spacing: calc(1.36 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  z-index: 3;
}

.back {
  --x: 49; --y: 1365; --w: 362;
  height: calc(137 * var(--u));
  display: block;
  z-index: 3;
  outline: none;
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
}
.back__pill {
  position: absolute; left: 0; top: 0;
  width: calc(296.5 * var(--u));
  transition: transform .3s var(--ease-spring), filter .3s ease;
}
.back__label {
  position: absolute;
  left: calc(26 * var(--u));
  top: calc(11 * var(--u));
  font-size: calc(57.1 * var(--u));
  letter-spacing: calc(.2 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .3s var(--ease-spring);
}
.back__cursor {
  position: absolute;
  left: calc(274.4 * var(--u));
  top: calc(26.9 * var(--u));
  width: calc(87.5 * var(--u));
  transform-origin: 12% 8%;
  animation: back-hint 2.6s ease-in-out 1.2s infinite;
  transition: transform .3s var(--ease-spring);
}
.back:hover .back__pill, .back:focus-visible .back__pill { transform: translateY(calc(3 * var(--u))) scale(.985); filter: brightness(1.06) saturate(1.08); }
.back:hover .back__label, .back:focus-visible .back__label { transform: translateY(calc(3 * var(--u))); }
.back:hover .back__cursor, .back:focus-visible .back__cursor { animation: none; transform: translate(calc(-14 * var(--u)), calc(-6 * var(--u))) scale(.9); }
.back:active .back__pill { transform: translateY(calc(6 * var(--u))) scale(.97); filter: brightness(.96); transition-duration: .08s; }
.back:active .back__label { transform: translateY(calc(6 * var(--u))) scale(.98); transition-duration: .08s; }
.back:focus-visible .back__pill { outline: 3px dashed var(--cream); outline-offset: 5px; border-radius: 999px; }

@keyframes back-hint {
  0%, 60%, 100% { transform: none; }
  70%           { transform: translate(-10%, -6%); }
  77%           { transform: translate(-10%, -6%) scale(.86); }
  85%           { transform: translate(-10%, -6%); }
}

.view.is-leaving { animation: view-leave .42s ease forwards; pointer-events: none; }
@keyframes view-leave { to { opacity: 0; transform: scale(.975); filter: blur(4px); } }
.view.is-entering { animation: view-enter .5s ease both; }
@keyframes view-enter { from { opacity: 0; } }

/* ───────────── envelope opening overlay ───────────── */

.opening { position: fixed; inset: 0; z-index: 50; }
.opening__shade {
  position: absolute; inset: 0;
  background: var(--shade-tint);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
}
.env3d { position: absolute; transform-origin: 50% 50%; will-change: transform; }
.env3d__shadow {
  position: absolute; left: 4%; right: 4%; bottom: -9%; height: 16%;
  background: radial-gradient(closest-side, rgb(90 30 40 / .3), transparent);
  filter: blur(3px);
}
.env3d__body { position: absolute; inset: 0; perspective: 1600px; }
.env3d__back {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--inner), var(--shade));
  border-radius: 2.4% / 3.2%;
}
.env3d__paper {
  position: absolute; left: 6.5%; right: 6.5%; top: 5%; height: 88%;
  z-index: 2;
  background-color: var(--paper-color);
  background-image: var(--paper-img);
  background-size: var(--paper-tile) auto;
  background-position: center top;
  border-radius: 1.6% / 2.2%;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
  overflow: hidden;
}
.env3d__mini {
  position: absolute;
  color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;
  white-space: pre;
  transform-origin: 0 0;
}
.env3d__mini span { display: block; }
.env3d__front { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; }
.env3d__flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 71%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.flap-face {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 51% 100%, 49% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flap-face--front { background: linear-gradient(170deg, var(--light) 0%, var(--base) 70%, var(--shade) 100%); }
.flap-face--back { background: linear-gradient(to top, var(--inner), var(--shade)); transform: rotateX(180deg); }
.env3d__skin { position: absolute; z-index: 6; pointer-events: none; }

.sheet {
  position: fixed; inset: 0; z-index: 60;
  --tile: min(100vw, 1600px);
  background-color: var(--paper-color);
  background-image: var(--paper-img);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: var(--tile) auto;
}

.confetti {
  position: fixed; z-index: 55;
  width: 9px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
}

/* ───────────── phones / narrow screens ───────────── */

@media (max-width: 759px) {
  :root { --tile: 1100px; }
  html[data-view="home"] { --tile: calc(100vw / 430 * 1366); }

  .view--home .stage {
    --u: calc(100cqw / 430);
    --ox: 0px;
    height: calc(1190 * var(--u));
  }
  .view--home .el {
    left: calc(var(--mx) * var(--u));
    top: calc(var(--my) * var(--u));
    width: calc(var(--mw) * var(--u));
  }
  .fx--home-glow { top: calc(862 * var(--u)); height: calc(328 * var(--u)); }
  .fx--home-strip { top: calc(1139 * var(--u)); height: calc(51 * var(--u)); }
  .clickus { font-size: calc(40 * var(--u)); letter-spacing: calc(2.2 * var(--u)); width: auto; }
  .clickus-sub { font-size: calc(17 * var(--u)); letter-spacing: 0; width: auto; }
  .view--home .footer {
    left: 0; width: 100%;
    text-align: center;
    font-size: calc(16 * var(--u));
    letter-spacing: 0;
  }

  .view--letter .stage { height: auto; min-height: 100vh; --ox: 0px; display: flex; flex-direction: column; }
  .letter {
    position: relative;
    left: auto; top: auto;
    padding: 76px 22px 0;
    font-size: clamp(14.5px, 4.2cqw, 18px);
    line-height: 1.75;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ln { display: inline; transform: none; white-space: normal; }
  .ln::after { content: " "; }
  .ln--seam { margin-top: 0; }
  .letter p + p { margin-top: 1.75em; }
  .letter p.gap-2 { margin-top: 3.5em; }

  .letter-end {
    position: relative;
    z-index: 3;
    margin-top: auto;
    padding: 64px 22px calc(56px + env(safe-area-inset-bottom));
  }
  .tapos {
    position: relative; left: auto; top: auto;
    font-size: 19px; letter-spacing: .06em;
    margin: 0 0 10px 8px;
  }
  .back {
    position: relative; left: auto; top: auto;
    --u: .78px;
    width: calc(362 * var(--u));
  }
  .fx--letter-glow { top: auto; bottom: 0; height: min(420px, 60vh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .balloons { display: none; }
}