/* ============================================================
   Memory Lane — For Ira
   Pink romantic theme
   ============================================================ */

/* ---------- Palette ---------- */
:root {
  --pink-50:  #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --cream:    #fff8f8;
  --text:     #4a1428;
  --text-mid: #7b3558;
  --text-light: #c084a4;
  --green-leaf: #6d9f5e;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Lato", ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  color: var(--text);
  background: linear-gradient(
    170deg,
    #fff0f6 0%,
    #fff8fa 30%,
    #fce7f3 60%,
    #fff0f6 100%
  );
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.8;
}

/* ---------- Sakura Canvas ---------- */
#sakura-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 40px 20px;
}

.hero__eyebrow {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: clamp(11px, 2.5vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink-500);
  opacity: 0;
  animation: fadeRise 1.2s ease forwards 0.3s;
}

.hero__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(52px, 14vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
  opacity: 0;
  animation: fadeRise 1.2s ease forwards 0.7s;
}

.hero__title em {
  font-style: italic;
  color: var(--pink-600);
  font-weight: 600;
  display: block;
}

.hero__rose {
  opacity: 0;
  animation: fadeRise 1s ease forwards 1.3s, roseFloat 4s ease-in-out infinite 2.5s;
  filter: drop-shadow(0 8px 24px rgba(236, 72, 153, 0.3));
}

.rose-svg {
  width: 80px;
  height: 93px;
}
.rose-svg--lg {
  width: 110px;
  height: 128px;
}
.rose-svg--xl {
  width: 160px;
  height: 187px;
  animation: roseSpin 12s linear infinite;
  transform-origin: center 55px;
}

@keyframes roseSpin {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  25% { transform: rotate(4deg) scale(1.04); }
  50% { transform: rotate(-2deg) scale(1.06); }
  75% { transform: rotate(5deg) scale(1.03); }
}

@keyframes roseFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

.hero__scroll {
  font-size: 11px;
  color: var(--text-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeRise 1s ease forwards 2s, bobDown 2.5s ease-in-out infinite 3s;
  margin-top: 28px;
}

@keyframes fadeRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ---------- Memory Lane ---------- */
.lane {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 80px;
  overflow: visible;
}

/* ---------- Letter (single flowing text + scattered photos) ---------- */
.letter {
  position: relative;
  z-index: 1;
  padding: 40px 20px 20px;
  overflow: visible;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.letter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.letter__stage {
  position: relative;
  max-width: min(1280px, 100vw);
  margin: 0 auto;
  padding: 24px 0 48px;
  overflow: visible;
  --text-col: 520px;
  --photo-w: clamp(112px, 11.5vw, 176px);
  --gutter-side: max(0.5rem, calc((100% - var(--text-col)) / 2 - var(--photo-w) - 14px));
}

.letter__text {
  position: relative;
  z-index: 2;
  max-width: var(--text-col, 520px);
  margin: 0 auto;
  padding: 24px 12px 80px;
}

.letter__eyebrow {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pink-500);
  margin-bottom: 12px;
}

.letter__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}

.letter__text p {
  font-size: clamp(15px, 2.1vw, 17px);
  color: var(--text-mid);
  line-height: 2;
  margin-bottom: 1.5em;
  font-weight: 300;
}

.letter__signoff {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(18px, 3vw, 22px);
  color: var(--pink-600);
  margin-top: 2em;
  margin-bottom: 0 !important;
}

/* Scattered polaroid-style photos */
.scatter {
  position: absolute;
  margin: 0;
  width: var(--photo-w);
  height: auto;
  border-radius: 10px;
  overflow: visible;
  background: var(--pink-50);
  border: 2px solid var(--pink-200);
  box-shadow: 0 6px 22px rgba(219, 39, 119, 0.14);
  padding: 5px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  z-index: 1;
}

.scatter img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
}

.scatter:hover {
  box-shadow: 0 12px 32px rgba(219, 39, 119, 0.24);
  z-index: 5;
}

/* Desktop: grid gutters so photos never stack on each other */
@media (min-width: 641px) {
  .hero {
    padding-inline: 0;
  }

  .letter {
    padding-inline: 0;
  }

  .closing {
    padding-inline: 0;
  }

  .lane-footer {
    padding-inline: 0;
  }

  .letter {
    overflow: visible;
  }

  .letter__stage {
    display: grid;
    grid-template-columns: var(--photo-w) minmax(0, var(--text-col)) var(--photo-w);
    column-gap: clamp(28px, 4.2vw, 66px);
    row-gap: clamp(20px, 3vh, 36px);
    justify-content: center;
    align-items: start;
    padding-bottom: 32px;
  }

  .letter__text {
    grid-column: 2;
    grid-row: 1 / 6;
    padding: 24px 8px 40px;
  }

  .scatter {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    justify-self: center;
  }

  .scatter--1 { grid-column: 1; grid-row: 1; transform: translate(-12px, -4px) rotate(-6deg); }
  .scatter--2 { grid-column: 3; grid-row: 1; transform: translate(10px, 8px) rotate(4deg); }
  .scatter--3 { grid-column: 1; grid-row: 2; transform: translate(-16px, 0) rotate(3deg); }
  .scatter--4 { grid-column: 3; grid-row: 2; transform: translate(14px, -8px) rotate(-5deg); }
  .scatter--5 { grid-column: 1; grid-row: 3; transform: translate(-8px, 8px) rotate(-3deg); }
  .scatter--6 { grid-column: 3; grid-row: 3; transform: translate(16px, 2px) rotate(5deg); }
  .scatter--7 { grid-column: 1; grid-row: 4; transform: translate(-14px, -2px) rotate(6deg); }
  .scatter--8 { grid-column: 3; grid-row: 4; transform: translate(8px, 8px) rotate(-4deg); }
  .scatter--9 { grid-column: 1; grid-row: 5; transform: translate(-10px, 2px) rotate(2deg); }

  .scatter--1:hover  { transform: translate(-10px, -4px) rotate(-2deg) scale(1.04); }
  .scatter--2:hover  { transform: translate(10px, 8px) rotate(2deg) scale(1.04); }
  .scatter--3:hover  { transform: translate(-14px, 0) rotate(1deg) scale(1.04); }
  .scatter--4:hover  { transform: translate(14px, -8px) rotate(-2deg) scale(1.04); }
  .scatter--5:hover  { transform: translate(-8px, 8px) rotate(-1deg) scale(1.04); }
  .scatter--6:hover  { transform: translate(16px, 2px) rotate(3deg) scale(1.04); }
  .scatter--7:hover  { transform: translate(-12px, -2px) rotate(3deg) scale(1.04); }
  .scatter--8:hover  { transform: translate(8px, 8px) rotate(-2deg) scale(1.04); }
  .scatter--9:hover  { transform: translate(-10px, 2px) rotate(1deg) scale(1.04); }
}

/* ---------- Closing ---------- */
.closing {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 20px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.closing.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.closing__rose {
  filter: drop-shadow(0 10px 30px rgba(236, 72, 153, 0.35));
  animation: roseFloat 4s ease-in-out infinite;
}

.closing__sub {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink-500);
  margin-top: 12px;
}

.closing__name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(52px, 12vw, 80px);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.closing__note {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(16px, 3vw, 20px);
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 420px;
}

/* ---------- Bottom gift button (in page flow) ---------- */
.lane-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 0 20px 72px;
}

.gift-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: min(100%, 320px);
  padding: 16px 32px;
  border-radius: 999px;
  border: 2px solid var(--pink-300);
  background: linear-gradient(135deg, var(--pink-100), var(--pink-300));
  cursor: pointer;
  box-shadow:
    0 6px 24px rgba(219, 39, 119, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: "Cormorant Garamond", serif;
}

.gift-btn__icon {
  font-size: 26px;
  line-height: 1;
}

.gift-btn__label {
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.gift-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--pink-200), var(--pink-400));
  box-shadow: 0 10px 32px rgba(219, 39, 119, 0.28);
}

.gift-btn:active {
  transform: translateY(0);
}

/* ---------- Bloom Overlay ---------- */
.bloom-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(
    ellipse at 50% 50%,
    #fff0f9 0%,
    #fce7f3 50%,
    #fbcfe8 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}

.bloom-overlay[hidden] { display: none; }

.bloom-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 110;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--pink-200);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  color: var(--pink-600);
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.bloom-close:hover { transform: scale(1.12); background: rgba(255,255,255,0.95); }

.bloom-scene {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-rose {
  opacity: 0;
  animation: fadeRise 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards 0.3s;
  filter: drop-shadow(0 10px 40px rgba(236,72,153,0.45));
}

.sparkles {
  position: absolute;
  inset: -50px;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  opacity: 0;
  animation: sparkleIn 0.5s ease forwards, sparklePulse 2.2s ease-in-out infinite;
  color: var(--pink-500);
}

.sparkle--1 { top:  6%; left: 14%; font-size: 18px; animation-delay: 0.9s, 1.4s; }
.sparkle--2 { top:  4%; left: 76%; font-size: 14px; animation-delay: 1.1s, 1.6s; color: var(--rose-400); }
.sparkle--3 { top: 28%; left:  2%; font-size: 16px; animation-delay: 1.2s, 1.7s; color: var(--pink-400); }
.sparkle--4 { top: 18%; left: 87%; font-size: 15px; animation-delay: 1.3s, 1.8s; }
.sparkle--5 { top: 52%; left:  6%; font-size: 12px; animation-delay: 1.4s, 1.9s; color: var(--rose-400); }
.sparkle--6 { top: 48%; left: 92%; font-size: 14px; animation-delay: 1.5s, 2.0s; }
.sparkle--7 { top:  8%; left: 48%; font-size: 11px; animation-delay: 1.6s, 2.1s; color: var(--pink-400); }
.sparkle--8 { top: 60%; left: 52%; font-size: 10px; animation-delay: 1.7s, 2.2s; }

@keyframes sparkleIn {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes sparklePulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.3); }
}

.bloom-message {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(22px, 6vw, 34px);
  color: var(--text);
  text-align: center;
  opacity: 0;
  animation: fadeRise 1s ease forwards 1.2s;
  z-index: 10;
  position: relative;
  letter-spacing: -0.01em;
}

/* ---------- Falling Petals ---------- */
.falling-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.falling-item {
  position: absolute;
  top: -30px;
  border-radius: 50% 50% 50% 0;
  opacity: 0.7;
  animation: petalFall linear infinite;
}

@keyframes petalFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}

/* ---------- Passcode Lock ---------- */
.lock {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(160deg, #fff0f6, #fce7f3 50%, #fff0f6);
}

.lock[hidden] { display: none; }

.lock__box {
  width: 100%;
  max-width: 320px;
  text-align: center;
  padding: 40px 30px;
  border-radius: 24px;
  border: 1px solid var(--pink-200);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 40px rgba(219, 39, 119, 0.12),
    0 2px 8px rgba(219, 39, 119, 0.06);
}

.lock__rose {
  font-size: 40px;
  margin-bottom: 12px;
  display: block;
  animation: roseFloat 3s ease-in-out infinite;
}

.lock__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.lock__input {
  width: 100%;
  padding: 14px 16px;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-align: center;
  border-radius: 14px;
  border: 2px solid var(--pink-200);
  background: rgba(255,255,255,0.9);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: "Lato", sans-serif;
}

.lock__input:focus {
  border-color: var(--pink-500);
  box-shadow: 0 0 0 3px rgba(236,72,153,0.18);
}

.lock__input::placeholder {
  color: var(--pink-200);
  letter-spacing: 0.2em;
}

.lock__error {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--rose-500);
  font-weight: 400;
}

@keyframes passcode-shake {
  0%, 100%            { transform: translateX(0); }
  10%,30%,50%,70%,90% { transform: translateX(-8px); }
  20%,40%,60%,80%     { transform: translateX(8px); }
}

/* ---------- Responsive: Tablet & Mobile ---------- */
@media (max-width: 900px) and (min-width: 641px) {
  .letter__stage {
    max-width: min(760px, 96vw);
    --text-col: 440px;
    --photo-w: clamp(90px, 12vw, 120px);
  }

  .scatter {
    width: var(--photo-w);
  }

  .letter__text {
    max-width: 440px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-inline: 20px;
  }

  .letter {
    padding-inline: 20px;
  }

  .closing {
    padding-inline: 20px;
  }

  .letter__stage {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .scatter {
    position: static;
    width: calc(50% - 8px);
    transform: none !important;
    padding: 4px;
  }

  .scatter:hover {
    transform: scale(1.02) !important;
  }

  .letter__stage {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }

  .letter__text {
    order: -1;
    width: 100%;
    max-width: none;
    padding: 8px 4px 32px;
  }

  .lane-footer {
    padding-inline: 20px;
    padding-bottom: 48px;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}