/* ─────────────────────────────────────────────────────────
   For Alyssa · 26 on the 26th
   bold serif headline, pink+camo torn backdrop, italian table
───────────────────────────────────────────────────────── */

:root {
  --cream: #fbf6ec;
  --rose: #c0394b;
  --rose-soft: #e98aa0;
  --gold: #c79858;
  --gold-deep: #8a5d23;
  --ink: #1a1a1a;
  --ink-soft: #6e4a2e;
  --gray: #888;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ink);
  min-height: 100vh;
  overflow: hidden;
  cursor: none;
}

/* ─── BACKDROP: pink gingham + scattered camo patches + torn paper ── */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Layer 1: pink gingham, full bleed, soft */
.bg__gingham {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 45%,
      rgba(255, 230, 200, 0) 0%,
      rgba(120, 50, 30, 0.14) 80%,
      rgba(80, 30, 20, 0.28) 100%),
    repeating-linear-gradient(0deg,
      rgba(233, 138, 160, 0.22) 0 26px,
      rgba(255, 255, 255, 0) 26px 52px),
    repeating-linear-gradient(90deg,
      rgba(233, 138, 160, 0.22) 0 26px,
      rgba(255, 255, 255, 0) 26px 52px),
    linear-gradient(135deg, #fff5e6 0%, #fbe6d2 60%, #f3cdb3 100%);
}

/* Layer 2: torn camo patches, scattered, irregular shapes */
.bg__camo {
  position: absolute;
  background:
    linear-gradient(135deg, rgba(255, 244, 220, 0.1), rgba(38, 22, 12, 0.2)),
    url("assets/camo-texture.png") center / cover no-repeat;
  /* irregular torn edge via clip-path polygon */
  clip-path: polygon(
    8% 4%, 22% 0%, 38% 6%, 55% 2%, 72% 8%, 90% 4%, 96% 18%,
    100% 32%, 92% 48%, 98% 64%, 88% 78%, 96% 92%, 78% 96%,
    62% 100%, 44% 94%, 28% 98%, 12% 92%, 2% 78%, 6% 60%, 0% 42%, 4% 22%
  );
  filter: saturate(1.55) contrast(1.2) drop-shadow(2px 5px 7px rgba(52, 29, 16, 0.3));
  opacity: 1;
}
/* paper-fiber edge: a slightly bigger lighter shape behind to fake torn paper */
.bg__camo::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: #fbf3df;
  clip-path: inherit;
  z-index: -1;
  filter: blur(0.5px);
  opacity: 0.7;
}
/* dense dot-pattern overlay — fake printed camo grain */
.bg__camo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 38% 65%, rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px);
  clip-path: inherit;
  mix-blend-mode: multiply;
  opacity: 0.34;
}

.bg__camo--1 { top: -4%;  left: -6%;  width: 320px; height: 280px; transform: rotate(-12deg); }
.bg__camo--2 { top: 8%;   right: -4%; width: 260px; height: 240px; transform: rotate(18deg); }
.bg__camo--3 { bottom: -6%; left: 18%; width: 340px; height: 220px; transform: rotate(8deg); }
.bg__camo--4 { bottom: 4%;  right: 12%; width: 220px; height: 200px; transform: rotate(-22deg); }

/* Layer 3: ripped paper strip across the middle, exposing white notebook paper */
.bg__paper {
  position: absolute;
  top: 50%;
  left: -4%;
  right: -4%;
  height: 90px;
  transform: translateY(-50%) rotate(-1.5deg);
  background:
    repeating-linear-gradient(0deg,
      rgba(120, 160, 200, 0.18) 0 1px,
      transparent 1px 22px),
    linear-gradient(180deg, #fff 0%, #f8f5ee 50%, #fff 100%);
  filter: drop-shadow(0 6px 12px rgba(60, 30, 20, 0.18));
  /* torn top + bottom edges */
  clip-path: polygon(
    0% 28%, 3% 22%, 7% 30%, 12% 18%, 18% 26%, 23% 16%, 28% 24%,
    34% 14%, 40% 22%, 46% 12%, 52% 20%, 58% 14%, 64% 22%,
    70% 16%, 76% 24%, 82% 18%, 88% 26%, 94% 20%, 100% 28%,
    100% 76%, 96% 82%, 91% 74%, 86% 84%, 80% 76%, 74% 86%,
    68% 78%, 62% 88%, 55% 76%, 48% 86%, 42% 78%, 36% 88%,
    30% 78%, 24% 86%, 18% 76%, 12% 84%, 6% 76%, 0% 82%
  );
}
.bg__paper-edge {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    rgba(180, 130, 80, 0.3) 0%,
    rgba(120, 80, 50, 0.5) 50%,
    rgba(180, 130, 80, 0.3) 100%);
}
.bg__paper-edge--top { top: 22%; }
.bg__paper-edge--bottom { bottom: 22%; }

/* ─── STAGE ─────────────────────────────────────── */
.stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.4vh 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.head {
  position: relative;
  z-index: 5;
  margin: 0 0 -1rem;
  width: 100%;
}

.kicker {
  margin: 0 0 0.4rem;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--rose);
}

.date {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: clamp(3.6rem, 9.5vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.18em;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.date .dot {
  font-size: 0.7em;
  color: var(--rose);
  transform: translateY(-0.08em);
}

.alyssa {
  margin: -0.3rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  color: var(--rose);
  line-height: 1;
  letter-spacing: -0.005em;
  text-shadow: 0 3px 8px rgba(192, 57, 75, 0.18);
  transform: translateY(-0.1em);
}

/* ─── SCENE (table) ─────────────────────────────── */
.scene {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  filter: drop-shadow(0 28px 36px rgba(80, 30, 20, 0.22));
}

/* Meatball — rolls around the RIGHT plate (~720,380 in 1000×620 viewBox = 72%, 61%) */
.meatball {
  position: absolute;
  left: 72%;
  top: 61%;
  width: clamp(50px, 7vw, 80px);
  height: clamp(50px, 7vw, 80px);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: none;
  z-index: 4;
  transform: translate(-50%, -50%) rotate(var(--spin, 0deg));
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              top  0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 12px 12px rgba(80, 30, 20, 0.4));
}
.meatball img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.meatball.is-caught { animation: caughtPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes caughtPop {
  0%   { transform: translate(-50%, -50%) rotate(var(--spin, 0deg)) scale(1); }
  40%  { transform: translate(-50%, -50%) rotate(var(--spin, 0deg)) scale(1.3); }
  100% { transform: translate(-50%, -50%) rotate(var(--spin, 0deg)) scale(0); opacity: 0; }
}

.fork {
  position: fixed;
  left: 0; top: 0;
  width: clamp(44px, 4.6vw, 58px);
  height: clamp(44px, 4.6vw, 58px);
  pointer-events: none;
  z-index: 100;
  transform: translate(-12px, -14px) rotate(-30deg);
  transition: transform 0.08s linear;
  filter: drop-shadow(0 4px 5px rgba(80, 30, 20, 0.4));
}
.fork img { width: 100%; height: 100%; display: block; }
.fork.is-stabbing { transform: translate(-12px, -14px) rotate(-12deg) scale(0.92); }

.trail {
  position: absolute;
  width: 280px; height: 280px;
  pointer-events: none;
  z-index: 3;
  display: block;
}
.trail path {
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 3px rgba(80, 30, 20, 0.35));
}

/* ─── NOTE under the table ─────────────────────── */
.note {
  position: relative;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  z-index: 5;
}
.note__line {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--gray);
  line-height: 1.35;
  margin: 0;
}
.note__line--red {
  color: var(--rose);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  margin-bottom: 0.25rem;
}
.note__sign {
  font-family: "Caveat", cursive;
  font-size: 1.4rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
}

/* heartbeat */
.heart {
  display: inline-block;
  color: var(--rose);
  animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  18%      { transform: scale(1.22); }
  35%      { transform: scale(1); }
  53%      { transform: scale(1.12); }
  70%      { transform: scale(1); }
}

/* ─── SURPRISE ─────────────────────────────────── */
.surprise {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(60, 30, 20, 0.7);
  backdrop-filter: blur(10px);
  z-index: 200;
  padding: 1.5rem;
}
.surprise.is-open { display: flex; animation: surpFade 0.45s ease; }
@keyframes surpFade { from { opacity: 0; } }

.surprise__panel {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  max-width: 480px;
  width: 100%;
  padding: 2.6rem 2.2rem 2.2rem;
  border-radius: 6px;
  text-align: center;
  border: 1px solid rgba(192, 57, 75, 0.3);
  box-shadow: 0 30px 60px rgba(60, 20, 10, 0.45);
  animation: surpRise 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes surpRise { from { transform: translateY(20px) scale(0.96); opacity: 0; } }

.surprise__close {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(192, 57, 75, 0.3);
  border-radius: 999px;
  color: var(--rose);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.surprise__kicker {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 0.6rem;
}

.surprise__title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 0 0 1.2rem;
  color: var(--ink);
  line-height: 1.05;
}
.surprise__title span { color: var(--rose); }

.surprise__body {
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}
.surprise__body em { color: var(--rose); }

.surprise__sign {
  font-family: "Caveat", cursive;
  font-size: 1.4rem;
  color: var(--rose);
  margin: 1.2rem 0 0;
  font-weight: 600;
}

/* ─── catch fx ──────────────────────────────────── */
.heart-puff {
  position: fixed;
  bottom: 30%;
  left: 50%;
  pointer-events: none;
  font-family: "Caveat", cursive;
  font-size: var(--size, 28px);
  color: var(--rose);
  z-index: 200;
  animation: heart-rise var(--dur, 2.6s) cubic-bezier(0.22, 0.68, 0.4, 1) forwards;
}
@keyframes heart-rise {
  0%   { transform: translate(0, 0) rotate(0) scale(0.6); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(var(--tx, 0), var(--ty, -60vh)) rotate(var(--rz, 0deg)) scale(1); opacity: 0; }
}

@media (max-width: 720px) {
  .stage { padding: 2vh 1rem 1.5rem; }
  .alyssa { transform: translateY(0); }
  .bg__camo--3, .bg__camo--4 { display: none; }
}