/* ============================================================
   Happy Birthday Allison — styles
   Palette: cream / blush / rose / gold
   ============================================================ */

:root {
  --cream:      #fffaf6;
  --blush:      #ffe3ec;
  --blush-soft: #fff0f5;
  --rose:       #ec6a9c;
  --rose-deep:  #d44d7e;
  --gold:       #f3c677;
  --text:       #6b4a57;
  --text-soft:  #a07c8b;
  --paper:      #fffdf8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Quicksand", "Segoe UI", sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}

/* ---------- floating layers ---------- */

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

#hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

#hearts span {
  position: absolute;
  bottom: -8vh;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0%   { transform: translateY(0)      translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translateY(-30vh)  translateX(16px); }
  50%  { transform: translateY(-60vh)  translateX(-14px); }
  75%  { transform: translateY(-90vh)  translateX(12px); }
  100% { transform: translateY(-120vh) translateX(0);     opacity: 0; }
}

/* ---------- hero ---------- */

.hero {
  /* no z-index: lets the fixed floating hearts (z-index 1) drift above the
     hero gradient while staying below the content sections (z-index 2) */
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse 60% 45% at 18% 20%, rgba(243, 198, 119, 0.25), transparent),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(236, 106, 156, 0.18), transparent),
    linear-gradient(160deg, #fff5f7 0%, #ffe8ee 45%, #ffd9e4 100%);
}

.eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #c08899;
  margin-bottom: 18px;
}

.script-heading {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  color: var(--rose-deep);
}

.hero .script-heading {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.1;
}

.hero-name {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: clamp(4.2rem, 15vw, 9rem);
  line-height: 1.05;
  background: linear-gradient(120deg, var(--rose) 20%, var(--rose-deep) 60%, var(--gold) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 4px 0 18px;
}

.hero-sub {
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  font-weight: 500;
  color: var(--text-soft);
}

.scroll-cue {
  margin-top: 54px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-soft);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.scroll-cue .chev {
  font-size: 1.5rem;
  animation: bounce 1.6s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ---------- sections ---------- */

.section {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 90px 22px 30px;
  text-align: center;
}

.section-title {
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  margin-bottom: 8px;
}

.section-sub {
  color: var(--text-soft);
  font-weight: 500;
  margin-bottom: 40px;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- love letter ---------- */

.paper {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid #f3e3da;
  border-radius: 16px;
  padding: 52px 46px 44px;
  box-shadow: 0 16px 40px rgba(180, 110, 140, 0.16);
  transform: rotate(-0.6deg);
  text-align: left;
  font-family: "Caveat", cursive;
  font-size: 1.5rem;
  line-height: 1.5;
}

.paper p + p { margin-top: 18px; }

.paper .signature {
  margin-top: 28px;
  font-size: 1.6rem;
  color: var(--rose-deep);
}

.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 110px;
  height: 30px;
  background: rgba(243, 200, 120, 0.45);
  transform: translateX(-50%) rotate(-2deg);
  border-left: 1px dashed rgba(255, 255, 255, 0.7);
  border-right: 1px dashed rgba(255, 255, 255, 0.7);
}

/* ---------- polaroid gallery ---------- */

.polaroids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 34px 26px;
  align-items: start;
}

.polaroid {
  position: relative;
  background: #fff;
  padding: 12px 12px 14px;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(160, 100, 125, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.polaroid:nth-child(odd)  { transform: rotate(-2.4deg); }
.polaroid:nth-child(even) { transform: rotate(2deg); }
.polaroid:nth-child(3n)   { transform: rotate(-1.2deg); }

.polaroid:hover,
.polaroid:focus-visible {
  transform: rotate(0deg) translateY(-7px) scale(1.025);
  box-shadow: 0 18px 38px rgba(160, 100, 125, 0.3);
  z-index: 3;
}

.polaroid .tape {
  width: 80px;
  height: 24px;
  top: -11px;
  background: rgba(248, 180, 205, 0.5);
}

.frame {
  height: 250px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--blush-soft);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.polaroid figcaption {
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  color: var(--text);
  padding-top: 10px;
}

/* missing-photo placeholder */
.polaroid.missing { cursor: default; }
.polaroid.missing .frame img { display: none; }

.polaroid.missing .frame {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #f0b9cc;
}

.polaroid.missing .frame::after {
  content: "add  " attr(data-file) "  💌";
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  color: #c98ba1;
  text-align: center;
  padding: 0 16px;
}

/* ---------- reasons cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 20px;
  text-align: center;
}

.card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.5;
  box-shadow: 0 10px 26px rgba(160, 100, 125, 0.13);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* small rose-to-gold accent bar where the emoji used to be */
.card::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, var(--rose), var(--gold));
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(160, 100, 125, 0.2);
}

/* ---------- cake ---------- */

.cake-wrap {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.cake {
  position: relative;
  width: 280px;
  height: 295px;
  cursor: pointer;
  outline-offset: 8px;
}

.plate {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 264px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(#ffffff, #f0e4ea);
  box-shadow: 0 8px 18px rgba(160, 100, 125, 0.25);
}

.layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 13px;
}

.layer.bottom {
  bottom: 13px;
  width: 212px;
  height: 76px;
  background: linear-gradient(#f8a5c2, #ef7fa9);
}

.layer.mid {
  bottom: 84px;
  width: 170px;
  height: 64px;
  background: linear-gradient(#fbd2a6, #f5b97e);
  background-image:
    radial-gradient(circle 3px at 24px 34px, #d44d7e 96%, transparent),
    radial-gradient(circle 3px at 62px 46px, #7ab8e0 96%, transparent),
    radial-gradient(circle 3px at 104px 32px, #76c79a 96%, transparent),
    radial-gradient(circle 3px at 138px 44px, #d44d7e 96%, transparent),
    linear-gradient(#fbd2a6, #f5b97e);
}

.layer.top {
  bottom: 143px;
  width: 132px;
  height: 56px;
  background: linear-gradient(#f8a5c2, #ef7fa9);
}

/* frosting drips on each layer */
.layer::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 22px;
  border-radius: 13px 13px 0 0;
  background:
    radial-gradient(circle 11px at 11px 0, var(--paper) 95%, transparent 100%);
  background-size: 22px 22px;
  background-repeat: repeat-x;
}

.candle {
  position: absolute;
  bottom: 194px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 48px;
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, #ffffff 0 6px, #f7b6cf 6px 12px);
}

.flame {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 28px;
  background: radial-gradient(circle at 50% 75%, #fff3b0 0%, #ffd34d 45%, #ff9447 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: 0 0 20px 7px rgba(255, 185, 90, 0.55);
  transform-origin: 50% 100%;
  animation: flicker 0.22s ease-in-out infinite alternate;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes flicker {
  from { transform: translateX(-50%) scale(1)    rotate(-2deg); }
  to   { transform: translateX(-50%) scale(0.92) rotate(2.5deg); }
}

.cake.blown .flame {
  animation: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.15);
  box-shadow: none;
}

.smoke {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(150, 140, 150, 0.55);
  filter: blur(4px);
  opacity: 0;
  transform: translateX(-50%);
}

.cake.blown .smoke {
  animation: smoke 1.7s ease-out forwards;
}

@keyframes smoke {
  0%   { opacity: 0.7; transform: translate(-50%, 0)     scale(0.6); }
  100% { opacity: 0;   transform: translate(-50%, -52px) scale(1.7); }
}

.wish-msg {
  font-family: "Dancing Script", cursive;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 600;
  color: var(--rose-deep);
  margin-top: 34px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.wish-msg.show {
  opacity: 1;
  transform: none;
}

.relight {
  margin-top: 16px;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-soft);
  background: #fff;
  border: 1.5px solid #f0c4d4;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.relight:hover {
  background: var(--blush-soft);
  transform: translateY(-2px);
}

/* ---------- footer ---------- */

footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 70px 20px 44px;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 0.95rem;
}

/* ---------- lightbox ---------- */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(58, 28, 40, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

#lightbox[hidden] { display: none; }

#lightbox figure {
  max-width: 92vw;
  text-align: center;
}

#lightbox img {
  max-width: 90vw;
  max-height: 82vh;
  border: 10px solid #fff;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  object-fit: contain;
}

#lightbox figcaption {
  font-family: "Caveat", cursive;
  font-size: 1.6rem;
  color: #ffe3ec;
  margin-top: 14px;
}

/* ---------- small screens ---------- */

@media (max-width: 540px) {
  .polaroids { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 18px; }
  .frame { height: 215px; }
  .paper { padding: 44px 28px 36px; font-size: 1.35rem; }
  .section { padding-top: 70px; }
}