/* ───────────────────────── reset + base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:      #fff5ee;
  --milk:       #fff9f3;
  --pink-50:    #ffe4f1;
  --pink-100:   #ffd1e8;
  --pink-200:   #ffb3d9;
  --pink-400:   #ff7ab8;
  --pink-500:   #ff5aa8;
  --hot:        #ff3e9d;
  --lav-100:    #e8def9;
  --lav-200:    #d4c5f9;
  --lav-400:    #b39df5;
  --lav-600:    #8b5cf6;
  --peach:      #ffe0c2;
  --butter:     #fff2c2;
  --mint:       #c8f3e2;
  --sky:        #cfe6ff;
  --ink:        #4b2a52;
  --ink-soft:   #6b4471;
  --ink-faint:  #9b7ba4;
  --line:       #f0c7df;
  --shadow:     0 18px 40px -18px rgba(255, 90, 168, .45),
                0 4px 0 0 #ffb3d9,
                0 6px 0 0 #d4c5f9;
  --shadow-sm:  0 8px 22px -10px rgba(180, 100, 200, .45);
  --radius:     28px;
  --radius-lg:  44px;

  --font-display: 'Caprasimo', 'Caveat', cursive;
  --font-hand:    'Caveat', cursive;
  --font-body:    'Quicksand', system-ui, sans-serif;
}

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--peach) 0%, transparent 55%),
    radial-gradient(900px 700px at -10% 20%, var(--lav-100) 0%, transparent 55%),
    radial-gradient(900px 800px at 50% 110%, var(--pink-50) 0%, transparent 55%),
    linear-gradient(180deg, #fff7ee 0%, #ffe9f4 45%, #f1e3ff 100%);
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text y='24' font-size='22'>%E2%9C%A8</text></svg>") 6 6, auto;
}

/* film grain overlay */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  mix-blend-mode: soft-light; opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .8  0 0 0 0 .9  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* floating gradient blobs */
.bg-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .65;
  animation: drift 22s ease-in-out infinite alternate;
}
.b1 { width: 460px; height: 460px; background: var(--pink-200); top: -80px; left: -120px; }
.b2 { width: 520px; height: 520px; background: var(--lav-200); top: 30%; right: -160px; animation-duration: 28s; }
.b3 { width: 380px; height: 380px; background: var(--butter); bottom: -120px; left: 20%; animation-duration: 32s; }
.b4 { width: 300px; height: 300px; background: var(--mint); top: 50%; left: 40%; animation-duration: 36s; opacity: .45; }

@keyframes drift {
  0%   { transform: translate(0,0)   scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-30px,30px) scale(.96); }
}

/* ───────────────────────── sky (moon + stars) ───────────────────────── */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

.moon {
  position: absolute; top: 36px; right: 44px;
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e0 0%, #ffe69b 55%, #f4b85d 100%);
  box-shadow:
    inset -8px -8px 18px rgba(180, 90, 30, .25),
    0 0 0 6px rgba(255, 230, 155, .35),
    0 0 30px rgba(255, 220, 140, .55);
  display: grid; place-items: center;
  font-family: var(--font-display); color: #6b3a1a; font-size: 30px;
  cursor: pointer; pointer-events: auto;
  transition: transform .25s ease;
  animation: bob 6s ease-in-out infinite;
  z-index: 3;
  user-select: none;
}
.moon:hover { transform: rotate(-8deg) scale(1.06); }
.moon:active { transform: scale(.94); }
.moon-face { transform: translateY(-2px); }
.moon-blush {
  position: absolute; width: 12px; height: 8px; border-radius: 50%;
  background: rgba(255, 110, 160, .65); top: 50%; left: 14%;
  filter: blur(1px);
}
.moon-blush.r { left: auto; right: 14%; }

.moon.shake { animation: shake .4s ease both, bob 6s ease-in-out infinite; }
@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-3px, -2px) rotate(-6deg); }
  40% { transform: translate(3px, 1px)  rotate(5deg); }
  60% { transform: translate(-2px, 2px) rotate(-4deg); }
  80% { transform: translate(2px, -1px) rotate(3deg); }
}

@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.stars { position: absolute; inset: 0; }
.star {
  position: absolute; color: #fff;
  font-size: var(--s, 14px);
  text-shadow: 0 0 8px rgba(255, 220, 240, .9);
  animation: twinkle var(--d, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1)  rotate(180deg); }
}

/* ───────────────────────── layout ───────────────────────── */
.page {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px) 60px;
  display: grid;
  gap: clamp(36px, 6vw, 64px);
}

/* ───────────────────────── ribbon ───────────────────────── */
.ribbon {
  display: flex;
  gap: 12px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: #fff;
  background: var(--hot);
  padding: 10px 0;
  border-radius: 999px;
  border: 3px solid #4b2a52;
  box-shadow: 4px 4px 0 0 #4b2a52, 0 16px 30px -16px rgba(255, 60, 150, .8);
  transform: rotate(-1.4deg);
  margin-bottom: 6px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ribbon span {
  display: inline-block;
  animation: scroll 24s linear infinite;
}
@keyframes scroll { to { transform: translateX(-50%); } }

/* ───────────────────────── hero ───────────────────────── */
.hero { position: relative; padding-top: 8px; }
.hi-stack { position: relative; padding: 12px 0 4px; }

.hi {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 16vw, 200px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 2vw, 28px);
  position: relative;
}
.hi-word {
  display: inline-block;
  animation: pop .9s cubic-bezier(.2,1.6,.4,1) both;
}
.hi-word:nth-child(1) { animation-delay: .05s; }
.hi-word:nth-child(2) { animation-delay: .25s; }
.hi-word.maira {
  background: linear-gradient(180deg, #ff5aa8 0%, #ff7ab8 40%, #ffb3d9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 4px 0 rgba(180, 80, 140, .15);
  position: relative;
  transform-origin: bottom left;
}
.hi-word.maira::after {
  content: "";
  position: absolute; left: 2%; right: 4%; bottom: -.08em; height: .22em;
  background: var(--lav-200);
  border-radius: 999px;
  z-index: -1;
  transform: skew(-12deg);
  opacity: .8;
}
.envelope {
  font-size: .55em;
  display: inline-block;
  animation: wiggle 3s ease-in-out infinite, pop .9s cubic-bezier(.2,1.6,.4,1) .45s both;
  transform-origin: 30% 70%;
}
@keyframes wiggle {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(10deg) translateY(-6px); }
}
@keyframes pop {
  0%   { opacity: 0; transform: translateY(40px) scale(.85); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.kicker {
  margin-top: 18px;
  font-family: var(--font-hand);
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink-soft);
  max-width: 30ch;
  line-height: 1.2;
  animation: fadeUp 1s ease .6s both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* stickers scattered around hi */
.sticker {
  position: absolute;
  font-size: clamp(26px, 4vw, 44px);
  filter: drop-shadow(0 4px 0 rgba(180,90,140,.25));
  animation: floaty 6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.s1 { top: -10px;  left: 38%; color: var(--hot);    animation-delay: .3s; }
.s2 { top: 14%;    right: 8%; color: var(--lav-600); animation-delay: 1.2s; transform: rotate(14deg); }
.s3 { bottom: -6px; right: 32%; color: var(--pink-400); animation-delay: .7s; }
.s4 { top: 60%;    left: -6px; color: var(--lav-400); animation-delay: 1.7s; transform: rotate(-22deg); }
.s5 { top: 80%;   right: 14%; color: var(--peach); animation-delay: 2.4s; }
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%     { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 8deg)); }
}

/* ───────────────────────── countdown card ───────────────────────── */
.countdown-card {
  position: relative;
  background: var(--milk);
  border: 4px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 48px) clamp(22px, 4vw, 40px);
  box-shadow: var(--shadow);
  text-align: center;
  transform: rotate(-.6deg);
  overflow: hidden;
}
.countdown-card::before {
  content: ""; position: absolute; inset: 8px; border-radius: calc(var(--radius-lg) - 8px);
  border: 2px dashed var(--line); pointer-events: none;
}

.card-tape {
  position: absolute; width: 110px; height: 28px;
  background: repeating-linear-gradient(45deg, rgba(255, 122, 184, .55) 0 8px, rgba(212, 197, 249, .55) 8px 16px);
  border: 1.5px solid rgba(75,42,82,.25);
  border-radius: 4px;
  top: -10px;
}
.card-tape.t-l { left: 24px; transform: rotate(-10deg); }
.card-tape.t-r { right: 24px; transform: rotate(8deg); }

.eyebrow {
  font-family: var(--font-display);
  letter-spacing: .25em;
  color: var(--hot);
  font-size: 14px;
  text-transform: lowercase;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  margin-top: 6px;
  color: var(--ink);
  line-height: 1;
}
.card-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--lav-600), var(--hot));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-hand);
  font-style: italic;
}
.card-sub {
  font-family: var(--font-hand);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-soft);
  margin-top: 4px;
}

.clock {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(8px, 1.4vw, 18px);
  margin-top: clamp(20px, 3vw, 32px);
  flex-wrap: wrap;
}
.unit {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #fff 0%, #ffeaf4 100%);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: clamp(12px, 2vw, 20px) clamp(10px, 2.4vw, 22px);
  min-width: clamp(74px, 14vw, 120px);
  box-shadow: 0 6px 0 0 var(--pink-200), 0 12px 24px -10px rgba(180,90,140,.4);
  position: relative;
}
.unit::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 6px; height: 4px;
  background: rgba(255,255,255,.7); border-radius: 999px;
}
.digit {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6.5vw, 64px);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #4b2a52 0%, #8b5cf6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.label {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
}
.colon {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  color: var(--pink-400);
  align-self: center;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .3; } }

.card-foot {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.card-foot time { color: var(--hot); font-weight: 700; }

/* tick animation when seconds change */
.digit.tick { animation: tick .5s ease; }
@keyframes tick {
  0% { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ───────────────────────── note + footer ───────────────────────── */
.note {
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--ink-soft);
  transform: rotate(-1deg);
}
.note p::before { content: "“ "; color: var(--pink-400); }
.note p::after  { content: " ”"; color: var(--pink-400); }

.foot {
  text-align: center;
  padding-top: 20px;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.foot .wink { font-family: var(--font-hand); font-size: 18px; color: var(--lav-600); }

/* ───────────────────────── easter egg modal ───────────────────────── */
.moon-message {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(circle at 50% 40%, rgba(255, 195, 230, .85), rgba(120, 70, 150, .8));
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  padding: 20px;
}
.moon-message.show { opacity: 1; pointer-events: auto; }
.mm-card {
  position: relative;
  background: var(--milk);
  border: 4px solid var(--ink);
  border-radius: 32px;
  padding: 40px 36px;
  max-width: 460px; width: 100%;
  text-align: center;
  box-shadow: 0 30px 70px -20px rgba(75, 42, 82, .55), 0 8px 0 0 var(--lav-200);
  transform: scale(.7) rotate(-3deg);
  transition: transform .45s cubic-bezier(.2,1.6,.4,1);
}
.moon-message.show .mm-card { transform: scale(1) rotate(-1.5deg); }
.mm-close {
  position: absolute; top: 12px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--hot); color: white; cursor: pointer;
  display: grid; place-items: center;
  font-size: 22px; font-family: var(--font-display);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  user-select: none;
}
.mm-eyebrow {
  font-family: var(--font-display);
  color: var(--lav-600); letter-spacing: .2em;
  font-size: 12px;
}
.mm-text {
  margin-top: 16px;
  font-family: var(--font-hand);
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--ink);
  line-height: 1.35;
}
.mm-text strong {
  font-family: var(--font-display);
  color: var(--hot);
  font-weight: 400;
}

/* ───────────────────────── toast ───────────────────────── */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: .08em;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 60;
  font-size: 14px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ───────────────────────── sparkle canvas ───────────────────────── */
#sparkle-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 4;
}

/* ───────────────────────── floating click hearts ───────────────────────── */
.fly-heart {
  position: fixed;
  pointer-events: none;
  z-index: 6;
  font-size: 22px;
  animation: fly 1.4s ease-out forwards;
  user-select: none;
}
@keyframes fly {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  20%  { transform: translate(-50%, -60%) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 120px)) scale(.6); opacity: 0; }
}

/* ───────────────────────── konami heart-rain ───────────────────────── */
.rain-heart {
  position: fixed; top: -40px;
  font-size: var(--size, 22px);
  pointer-events: none;
  z-index: 7;
  animation: fall var(--dur, 5s) linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); }
}

/* ───────────────────────── disco mode ───────────────────────── */
body.disco {
  animation: disco-bg 8s linear infinite;
}
@keyframes disco-bg {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(60deg); }
}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width: 720px) {
  body { cursor: auto; }

  .page {
    padding: 24px 18px 48px;
    gap: 36px;
  }

  /* moon: smaller + safely tucked, big touch target */
  .moon {
    width: 54px; height: 54px; font-size: 22px;
    top: 16px; right: 16px;
  }

  /* ribbon: compact */
  .ribbon {
    font-size: 11px;
    padding: 8px 0;
    border-width: 2px;
    box-shadow: 3px 3px 0 0 #4b2a52, 0 12px 24px -16px rgba(255, 60, 150, .8);
    transform: rotate(-1deg);
    gap: 8px;
  }

  /* hero: stack vertically — feels portrait, not landscape */
  .hero { padding-top: 4px; }
  .hi-stack {
    padding: 28px 0 8px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hi {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: clamp(64px, 22vw, 110px);
    line-height: .92;
  }
  .hi-word { display: block; }
  .envelope {
    font-size: .8em;
    margin-top: 6px;
    align-self: flex-end;
    margin-right: 12%;
  }
  .hi-word.maira::after {
    bottom: -.04em;
    height: .18em;
  }
  .kicker {
    margin-top: 22px;
    font-size: 22px;
    max-width: 22ch;
  }

  /* stickers: pulled in tighter so nothing pokes off-screen */
  .sticker { font-size: 22px; filter: drop-shadow(0 3px 0 rgba(180,90,140,.2)); }
  .s1 { top: 4px;   left: 60%; }
  .s2 { top: 24%;   right: 4%; }
  .s3 { bottom: 4px; right: 8%; }
  .s4 { display: none; }
  .s5 { top: 70%;  right: 60%; left: auto; }

  /* countdown card: snug, 2×2 grid, no rotation, internal tapes */
  .countdown-card {
    transform: rotate(0);
    padding: 28px 18px 22px;
    border-width: 3px;
    border-radius: 32px;
  }
  .countdown-card::before { inset: 6px; border-radius: 26px; }
  .card-tape { width: 80px; height: 22px; top: -8px; }
  .card-tape.t-l { left: 18px; transform: rotate(-8deg); }
  .card-tape.t-r { right: 18px; transform: rotate(8deg); }

  .eyebrow { font-size: 12px; }
  .card-title { font-size: 38px; line-height: 1.02; }
  .card-sub { font-size: 19px; margin-top: 6px; }

  .clock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
  }
  .colon { display: none; }
  .unit {
    min-width: 0;
    padding: 14px 8px;
    border-width: 2px;
    border-radius: 18px;
    box-shadow: 0 4px 0 0 var(--pink-200), 0 10px 20px -10px rgba(180,90,140,.4);
  }
  .digit { font-size: 44px; }
  .label { font-size: 10px; letter-spacing: .18em; margin-top: 4px; }
  .card-foot { font-size: 12px; margin-top: 18px; }

  .note { font-size: 26px; }

  /* modal */
  .mm-card { padding: 32px 24px; border-radius: 26px; }
}

@media (max-width: 380px) {
  .hi { font-size: 56px; }
  .digit { font-size: 38px; }
  .card-title { font-size: 32px; }
  .kicker { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .1s !important; }
  .ribbon span { animation: none; }
}