/* =========================================================
   A Letter For You — styles
   ========================================================= */

:root {
  --bg-1: #2a0f24;
  --bg-2: #4a1538;
  --bg-3: #7a1f45;
  --rose: #e23a62;
  --rose-deep: #a3173f;
  --rose-light: #ff8fa3;
  --blush: #ffd6e0;
  --cream: #fff8f0;
  --paper: #fdf1e6;
  --ink: #4a1a2c;
  --gold: #e9c27a;

  /* card size (closed). JS fine-tunes the open / laid transforms. */
  --w: min(68vw, 290px, calc(56dvh / 1.38));
  --h: calc(var(--w) * 1.38);

  --open-scale: 1;
  --laid-scale: .8;
  --laid-top: 82%;
  --laid-tilt: 62deg;
  --persp-y: 60%;
  --glass-max: 60dvh;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--cream);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--bg-3) 0%, transparent 60%),
    radial-gradient(90% 70% at 85% 100%, #5b1a4a 0%, transparent 60%),
    radial-gradient(90% 70% at 10% 90%, #3d1240 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  background-color: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.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;
}

/* ---------- background sparkles ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sky i {
  position: absolute;
  width: var(--s, 2px); height: var(--s, 2px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 214, 224, .7);
  opacity: 0;
  animation: twinkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50% { opacity: var(--o, .8); transform: scale(1); }
}

.floor-glow {
  position: fixed;
  left: 50%; bottom: -18dvh;
  width: 140vw; height: 46dvh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 143, 163, .28), rgba(255, 143, 163, 0) 70%);
  opacity: 0;
  transition: opacity 2s ease 1s;
  pointer-events: none;
  z-index: 0;
}
body.is-open .floor-glow { opacity: 1; }

/* ---------- stage ---------- */
.stage {
  position: fixed;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 40%;
  transition: perspective-origin 1.6s var(--ease-io);
  z-index: 1;
}
/* when the card is laid down we look at it from just above, like a desk */
body.is-laid .stage { perspective-origin: 50% var(--persp-y); }

/* ---------- card ---------- */
.card-wrap {
  all: unset;
  position: absolute;
  left: 50%;
  top: 48%;
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%) rotateX(0deg) scale(1);
  transform-origin: 0% 50%; /* the spine: open spread scales/tilts around its centre */
  transform-style: preserve-3d;
  cursor: pointer;
  transition:
    transform 1.3s var(--ease-io),
    top 1.6s var(--ease-io);
  z-index: 2;
}
.card-wrap:focus-visible .card {
  outline: 2px dashed var(--blush);
  outline-offset: 10px;
  border-radius: 14px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: float 4.5s ease-in-out infinite;
}
.card-wrap:hover .card { animation-duration: 2.6s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotateZ(-1.2deg) rotateY(-6deg); }
  50%      { transform: translateY(-12px) rotateZ(1.2deg) rotateY(6deg); }
}

.card-shadow {
  position: absolute;
  left: 8%; right: 8%;
  bottom: -9%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
  filter: blur(4px);
  animation: shadow 4.5s ease-in-out infinite;
  transform: translateZ(-1px);
}
@keyframes shadow {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(.82); opacity: .5; }
}

/* inside page */
.card-inside {
  position: absolute;
  inset: 0;
  border-radius: 6px 12px 12px 6px;
  background:
    radial-gradient(120% 90% at 30% 20%, #fffaf4, var(--paper) 70%, #f5dfcf);
  box-shadow:
    inset 8px 0 18px -10px rgba(120, 50, 40, .35),
    0 24px 50px -16px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.inside-paper {
  position: absolute;
  inset: 9% 11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7%;
  padding-top: 6%;
}
.inside-heart {
  font-size: calc(var(--w) * .16);
  line-height: 1;
  color: var(--rose);
  margin-bottom: 4%;
  text-shadow: 0 2px 10px rgba(226, 58, 98, .35);
}
.inside-paper .line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(163, 23, 63, .28), rgba(163, 23, 63, .12));
}
.inside-paper .line.short { width: 62%; align-self: flex-start; }
.inside-sign {
  margin-top: auto;
  align-self: flex-end;
  font-family: "Great Vibes", cursive;
  font-size: calc(var(--w) * .12);
  color: var(--rose-deep);
}

/* front cover */
.card-cover {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: translateZ(1px); /* sit just above the inside page (no z-fighting) */
  transition: transform 1.4s var(--ease-io);
  z-index: 2;
}
.cover-front,
.cover-back {
  position: absolute;
  inset: 0;
  outline: 1px solid transparent; /* smoother edges while tilted in 3D */
  border-radius: 6px 12px 12px 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.cover-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
  background:
    radial-gradient(140% 100% at 20% 10%, rgba(255, 255, 255, .22), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 6px, transparent 6px 14px),
    linear-gradient(160deg, #ef4b72 0%, var(--rose) 40%, var(--rose-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset -10px 0 30px -12px rgba(0, 0, 0, .35),
    0 30px 60px -18px rgba(0, 0, 0, .65);
}
.cover-border {
  position: absolute;
  inset: 6%;
  border: 1.5px solid rgba(233, 194, 122, .75);
  border-radius: 4px 8px 8px 4px;
  pointer-events: none;
}
.cover-border::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(233, 194, 122, .35);
  border-radius: 2px 6px 6px 2px;
}
.cover-to {
  font-family: "Great Vibes", cursive;
  font-size: calc(var(--w) * .19);
  line-height: 1;
  color: #fff3e6;
  text-shadow: 0 2px 0 rgba(120, 10, 40, .35), 0 0 20px rgba(255, 214, 224, .35);
  text-align: center;
  padding: 0 12%;
}
.seal {
  width: calc(var(--w) * .27);
  height: calc(var(--w) * .27);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, #f6d79a, var(--gold) 45%, #b8873d 100%);
  box-shadow:
    0 6px 14px rgba(70, 0, 20, .45),
    inset 0 -4px 8px rgba(110, 70, 20, .45),
    inset 0 3px 6px rgba(255, 255, 255, .45);
  position: relative;
}
.seal::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.5px dashed rgba(120, 75, 20, .45);
}
.seal span {
  font-size: calc(var(--w) * .13);
  color: var(--rose-deep);
  text-shadow: 0 1px 0 rgba(255, 240, 210, .6);
  animation: beat 1.6s ease-in-out infinite;
}
@keyframes beat {
  0%, 40%, 100% { transform: scale(1); }
  20% { transform: scale(1.18); }
  30% { transform: scale(.96); }
}
.cover-sub {
  font-style: italic;
  font-size: calc(var(--w) * .062);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: rgba(255, 243, 230, .85);
}

.cover-back {
  transform: rotateY(180deg);
  background: linear-gradient(200deg, #fffaf4, var(--paper) 60%, #f1d9c6);
  box-shadow: inset -8px 0 18px -10px rgba(120, 50, 40, .35);
}
.cover-back-paper {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(163, 23, 63, .18);
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.cover-back-flower {
  font-size: calc(var(--w) * .3);
  color: rgba(226, 58, 98, .35);
}

/* ---------- click me ---------- */
.click-me {
  position: absolute;
  left: 50%;
  top: calc(48% + var(--h) / 2 + 22px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color: var(--blush);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
  z-index: 3;
}
.click-text {
  position: relative;
  padding: .1em .9em .2em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 214, 224, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: nudge 2.2s ease-in-out infinite;
}
.click-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 224, .6);
  transform: translate(-50%, -50%);
  animation: ring 2.2s ease-out infinite;
}
.click-arrow {
  position: absolute;
  right: -34px;
  top: -26px;
  width: 34px;
  height: 34px;
  color: var(--blush);
  transform: rotate(18deg);
  animation: nudge 2.2s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes ring {
  0% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45, 1.9); }
}
body.is-open .click-me {
  opacity: 0;
  transform: translate(-50%, 20px);
}

/* ---------- opening sequence ---------- */
/* 1. cover swings open; card slides so the open spread stays centred */
body.is-open .card { animation: none; }
body.is-open .card-shadow { animation: none; opacity: 0; transition: opacity .6s; }
body.is-open .card-cover { transform: translateZ(1px) rotateY(-178deg); }
body.is-open .card-wrap {
  cursor: default;
  transform: translate(0, -50%) rotateX(0deg) scale(var(--open-scale));
}

/* 2. the open card is laid down at the bottom of the page */
body.is-laid .card-wrap {
  top: var(--laid-top);
  transform: translate(0, -50%) rotateX(var(--laid-tilt)) scale(var(--laid-scale));
}
body.is-laid .card-inside,
body.is-laid .cover-back {
  box-shadow:
    inset 8px 0 18px -10px rgba(120, 50, 40, .3),
    0 0 60px rgba(255, 143, 163, .35);
}

/* ---------- light beam (card -> lens) ---------- */
.beam {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  background: linear-gradient(180deg,
    rgba(255, 214, 224, .02) 0%,
    rgba(255, 214, 224, .10) 55%,
    rgba(255, 214, 224, .22) 100%);
  filter: blur(2px);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  z-index: 1;
}
body.is-reading .beam { opacity: 1; }

/* ---------- hearts ---------- */
.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.heart {
  position: absolute;
  left: 0; top: 0;
  width: var(--size);
  height: var(--size);
  color: var(--c);
  opacity: 0;
  will-change: transform, opacity;
  animation: rise var(--dur) cubic-bezier(.3, .6, .4, 1) forwards;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent));
}
.heart svg { display: block; width: 100%; height: 100%; animation: sway var(--sway) ease-in-out infinite alternate; }
@keyframes rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.2) rotate(0deg); }
  10%  { opacity: var(--o); }
  70%  { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1) rotate(var(--rot)); }
}
@keyframes sway {
  from { transform: translateX(calc(var(--size) * -.6)) rotate(-12deg); }
  to   { transform: translateX(calc(var(--size) * .6)) rotate(12deg); }
}

/* ---------- glass lens / label ---------- */
.glass {
  position: absolute;
  left: 50%;
  top: max(16px, env(safe-area-inset-top), 3.5dvh);
  width: min(92vw, 600px);
  max-height: var(--glass-max);
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 4vw, 30px) clamp(18px, 5vw, 38px) clamp(14px, 3vw, 22px);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .06) 55%, rgba(255, 214, 224, .10));
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    0 30px 80px -20px rgba(20, 0, 15, .65),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .12),
    inset 0 0 40px rgba(255, 214, 224, .10);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  color: #fff7f2;
  transform: translate(-50%, 30px) scale(.92);
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter 1.1s var(--ease-out);
  overflow: hidden;
  z-index: 4;
}
.glass[hidden] { display: none; }
body.is-reading .glass {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  filter: blur(0);
}

/* soft moving highlight, like light passing over a lens */
.glass-shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 48%, transparent 56%);
  transform: translateX(-60%);
  animation: shine 7s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes shine {
  0%   { transform: translateX(-60%); }
  35%, 100% { transform: translateX(60%); }
}

.glass-label {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  margin-bottom: clamp(8px, 2vw, 14px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: clamp(.78rem, 2.6vw, .9rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blush);
  white-space: nowrap;
}
.lens-icon { width: 18px; height: 18px; color: var(--rose-light); flex: none; }

.glass-title {
  margin: 0 0 clamp(6px, 1.6vw, 12px);
  text-align: center;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(2.1rem, 8vw, 3.2rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 24px rgba(255, 143, 163, .55);
}

.glass-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 5.5em;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 214, 224, .45) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
  padding-bottom: 18px;
}

.message p {
  margin: 0 0 .85em;
  font-size: clamp(1.08rem, 3.8vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 247, 242, .95);
}
.message p.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--blush);
  animation: caret .9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.signature {
  margin: .4em 0 0;
  text-align: right;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.7rem, 6.4vw, 2.3rem);
  line-height: 1.2;
  color: var(--blush);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease, transform 1s ease;
  white-space: pre-line;
}
.signature.show { opacity: 1; transform: none; }

.glass-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 6px;
}
.ghost-btn {
  font: inherit;
  font-size: .95rem;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--blush);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.ghost-btn:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.ghost-btn:focus-visible { outline: 2px solid var(--blush); outline-offset: 2px; }
.ghost-btn[hidden] { display: none; }

/* short screens (phones in landscape) */
@media (max-height: 520px) {
  .glass { border-radius: 20px; padding-top: 12px; }
  .glass-label { margin-bottom: 4px; padding-block: 3px; }
  .glass-title { font-size: 1.8rem; margin-bottom: 4px; }
  .glass-actions { padding-top: 2px; }
  .ghost-btn { padding: 3px 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .card, .card-shadow, .seal span, .click-text, .click-ring, .click-arrow, .glass-shine, .sky i {
    animation: none !important;
  }
  .sky i { opacity: .5; }
  .card-wrap, .card-cover, .glass { transition-duration: .01s !important; }
}