/* ==========================================
   VARSHA BIRTHDAY SURPRISE - STYLES
   Cute Kitty Theme | Pink Palette
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---- CSS Custom Properties ---- */
: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;

  --white: #ffffff;
  --text-dark: #4a2040;
  --text-medium: #7c4d6e;
  --text-light: #b06e9a;

  --font-main: 'Quicksand', 'Outfit', sans-serif;
  --font-handwriting: 'Dancing Script', cursive;

  --shadow-soft: 0 4px 20px rgba(236, 72, 153, 0.15);
  --shadow-glow: 0 0 30px rgba(244, 114, 182, 0.4);
  --shadow-card: 0 8px 32px rgba(236, 72, 153, 0.12);

  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

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

body {
  font-family: var(--font-main);
  background: var(--pink-50);
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Section System ---- */
.section {
  display: none;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.section.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: sectionFadeIn 0.8s ease-out;
}

@keyframes sectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-content {
  max-width: 500px;
  width: 90%;
  padding: 2rem 1.5rem;
  text-align: center;
  z-index: 10;
  position: relative;
}

/* ---- Backgrounds ---- */
.bg-gradient-pink {
  background: linear-gradient(135deg, var(--pink-50) 0%, var(--pink-100) 30%, var(--pink-200) 70%, var(--pink-100) 100%);
}

.bg-gradient-warm {
  background: linear-gradient(160deg, #fff5f7 0%, var(--pink-100) 50%, #ffe4f0 100%);
}

/* Floating Paw Prints Background */
.paw-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.paw-bg .paw {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.08;
  animation: floatPaw linear infinite;
}

@keyframes floatPaw {
  0% {
    transform: translateY(110vh) rotate(0deg);
  }

  100% {
    transform: translateY(-10vh) rotate(360deg);
  }
}

/* Falling Hearts */
.hearts-bg .heart {
  position: absolute;
  font-size: 1.2rem;
  opacity: 0.15;
  animation: fallHeart linear infinite;
  color: var(--pink-400);
}

@keyframes fallHeart {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.15;
  }

  90% {
    opacity: 0.15;
  }

  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

/* Falling Petals */
.petals-bg .petal {
  position: absolute;
  width: 12px;
  height: 16px;
  background: var(--pink-300);
  border-radius: 50% 0 50% 50%;
  opacity: 0.2;
  animation: fallPetal linear infinite;
}

@keyframes fallPetal {
  0% {
    transform: translateY(-10vh) rotate(0deg) translateX(0);
  }

  25% {
    transform: translateY(25vh) rotate(90deg) translateX(30px);
  }

  50% {
    transform: translateY(50vh) rotate(180deg) translateX(-20px);
  }

  75% {
    transform: translateY(75vh) rotate(270deg) translateX(15px);
  }

  100% {
    transform: translateY(110vh) rotate(360deg) translateX(0);
  }
}

/* ---- Typography ---- */
.title-xl {
  font-family: var(--font-handwriting);
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--pink-600);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.title-lg {
  font-family: var(--font-main);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

.title-md {
  font-family: var(--font-main);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.text-body {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.text-handwriting {
  font-family: var(--font-handwriting);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--pink-600);
}

.text-emoji {
  font-size: 2rem;
  margin: 0.5rem 0;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 50px;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  color: white;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-glow);
}

.btn-primary:active {
  transform: translateY(-1px) scale(0.98);
}

.btn-secondary {
  background: white;
  color: var(--pink-500);
  border: 2px solid var(--pink-300);
}

.btn-secondary:hover {
  background: var(--pink-50);
  border-color: var(--pink-400);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--pink-500);
  border: 2px solid var(--pink-300);
}

.btn-outline:hover {
  background: var(--pink-500);
  color: white;
  transform: translateY(-2px);
}

.btn-small {
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
}

.btn-large {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
}

.btn-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Runaway button */
.btn-runaway {
  transition: none !important;
  position: relative;
}

/* Teasing NO button that roams the full page */
.btn-no-tease {
  position: absolute;
  z-index: 50;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
  padding: 0.7rem 1.8rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: var(--shadow-soft);
  }

  50% {
    box-shadow: 0 0 30px rgba(244, 114, 182, 0.6), 0 0 60px rgba(244, 114, 182, 0.3);
  }
}

/* ---- Cards ---- */
.card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-polaroid {
  background: white;
  border-radius: 8px;
  padding: 12px 12px 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
  transition: var(--transition-bounce);
}

.card-polaroid:hover {
  transform: rotate(0deg) scale(1.05);
}

/* ---- Input Fields ---- */
.input-field {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--pink-200);
  border-radius: 16px;
  font-family: var(--font-main);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-dark);
  transition: var(--transition-smooth);
  outline: none;
  margin-bottom: 1rem;
}

.input-field:focus {
  border-color: var(--pink-400);
  box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.15);
  background: white;
}

.input-field::placeholder {
  color: var(--text-light);
  font-size: 0.9rem;
}

.input-label {
  display: block;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-medium);
  margin-bottom: 0.4rem;
  padding-left: 0.5rem;
}

/* ---- Kitty Image ---- */
.kitty-img {
  max-width: 200px;
  width: 60%;
  border-radius: 50%;
  border: 4px solid var(--pink-200);
  box-shadow: var(--shadow-soft);
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.1) rotate(5deg);
  }

  70% {
    transform: scale(0.95) rotate(-2deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.gif-display {
  max-width: 300px;
  width: 80%;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

/* ---- Matrix Countdown ---- */
.matrix-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.matrix-number {
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 700;
  font-family: var(--font-main);
  color: var(--pink-400);
  text-shadow: 0 0 40px var(--pink-500), 0 0 80px var(--pink-400), 0 0 120px var(--pink-300);
  z-index: 10;
  animation: countPulse 0.8s ease-out;
}

@keyframes countPulse {
  0% {
    transform: scale(3);
    opacity: 0;
  }

  50% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

/* Birthday word reveal */
.word-reveal {
  font-family: var(--font-handwriting);
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--pink-500);
  text-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
  animation: wordPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  margin: 0.3rem 0;
}

@keyframes wordPop {
  0% {
    transform: scale(0) translateY(30px);
    opacity: 0;
  }

  70% {
    transform: scale(1.15) translateY(-5px);
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ---- Age Timer ---- */
.timer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.timer-unit {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1rem 0.5rem;
  border: 1px solid var(--pink-200);
}

.timer-value {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--pink-600);
  font-family: var(--font-main);
}

.timer-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.3rem;
}

/* ---- Compliment Section ---- */
.scanning-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid var(--pink-300);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
  position: relative;
  overflow: hidden;
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pink-400), transparent);
  animation: scanMove 2s ease-in-out infinite;
}

@keyframes scanMove {

  0%,
  100% {
    top: 10%;
  }

  50% {
    top: 85%;
  }
}

.scanning-text {
  font-size: 3rem;
}

/* Invoice card */
.invoice-card {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  text-align: left;
  border: 2px dashed var(--pink-200);
}

.invoice-header {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px dashed var(--pink-200);
  margin-bottom: 1rem;
}

.invoice-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.6rem 0;
  font-size: 0.95rem;
  color: var(--text-dark);
  opacity: 0;
  animation: invoiceSlide 0.4s ease-out forwards;
}

@keyframes invoiceSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.invoice-item .emoji {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Letter */
.letter-container {
  background: #fffbf0;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0e6d3;
  font-family: var(--font-handwriting);
  font-size: 1.1rem;
  color: var(--text-dark);
  line-height: 1.8;
  text-align: left;
  position: relative;
}

.letter-container::before {
  content: '💌';
  position: absolute;
  top: -15px;
  right: 15px;
  font-size: 2rem;
}

/* ---- Cake Section ---- */
.cake-container {
  width: 250px;
  height: 250px;
  margin: 1rem auto;
  position: relative;
}

.cake-svg {
  width: 100%;
  height: 100%;
}

.candle-flame {
  animation: flicker 0.3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes flicker {
  0% {
    transform: scaleY(1) scaleX(1);
  }

  100% {
    transform: scaleY(1.1) scaleX(0.9);
  }
}

/* Balloons */
.balloon-container {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.balloon {
  width: 60px;
  height: 75px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  animation: floatBalloon 3s ease-in-out infinite;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.balloon::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 1px;
  height: 30px;
  background: var(--text-light);
  transform: translateX(-50%);
}

.balloon:nth-child(1) {
  background: var(--pink-300);
  animation-delay: 0s;
}

.balloon:nth-child(2) {
  background: var(--pink-400);
  animation-delay: 0.5s;
}

.balloon:nth-child(3) {
  background: var(--pink-200);
  animation-delay: 1s;
}

.balloon:nth-child(4) {
  background: #a78bfa;
  animation-delay: 1.5s;
}

.balloon:nth-child(5) {
  background: #fbbf24;
  animation-delay: 0.8s;
}

@keyframes floatBalloon {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-15px) rotate(3deg);
  }
}

.balloon.popped {
  animation: pop 0.3s ease-out forwards;
}

@keyframes pop {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* ---- Photo Gallery ---- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.photo-item {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 1;
  background: var(--pink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.photo-item:first-child {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Rating Stars ---- */
.rating-container {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.star {
  font-size: 2rem;
  cursor: pointer;
  transition: var(--transition-bounce);
  filter: grayscale(1);
  opacity: 0.4;
}

.star.active {
  filter: grayscale(0);
  opacity: 1;
  animation: starPop 0.3s ease-out;
}

@keyframes starPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4) rotate(15deg);
  }

  100% {
    transform: scale(1);
  }
}

.rating-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--pink-500);
  margin-top: 0.5rem;
}

/* ---- Audio Player ---- */
.audio-player {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--pink-200);
}

.audio-visualizer {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  height: 40px;
  margin: 1rem 0;
}

.audio-bar {
  width: 4px;
  background: linear-gradient(to top, var(--pink-400), var(--pink-200));
  border-radius: 2px;
  animation: audioWave 1s ease-in-out infinite;
}

@keyframes audioWave {

  0%,
  100% {
    height: 10px;
  }

  50% {
    height: 35px;
  }
}

/* ---- Popup / Modal ---- */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: fadeIn 0.3s ease-out;
  padding: 1rem;
}

.popup-card {
  background: white;
  border-radius: 24px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: popupBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-align: center;
}

@keyframes popupBounce {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---- Confetti Canvas ---- */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

/* ---- Arrow Indicator ---- */
.arrow-left {
  font-size: 3rem;
  animation: pointLeft 1s ease-in-out infinite;
  display: inline-block;
}

@keyframes pointLeft {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-15px);
  }
}

/* ---- Messages Animation ---- */
.message-fade {
  animation: messageFade 0.5s ease-out;
}

@keyframes messageFade {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typewriter {
  border-right: 2px solid var(--pink-400);
  animation: blink 0.8s step-end infinite;
  display: inline;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* ---- Misc Animations ---- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.4s ease-in-out;
}

/* Decorative Dots Background */
.dots-pattern {
  background-image: radial-gradient(var(--pink-200) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Grid pattern (valentine style) */
.grid-pattern {
  background-image:
    linear-gradient(var(--pink-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--pink-200) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: var(--pink-50);
}

/* Wavy border */
.wavy-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: white;
  clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z'%3E%3C/path%3E%3C/svg%3E");
}

/* ---- Progress Indicator ---- */
.progress-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 2rem;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-200);
  transition: var(--transition-smooth);
}

.progress-dot.active {
  background: var(--pink-500);
  width: 24px;
  border-radius: 4px;
}

/* ---- Decorative Elements ---- */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--pink-300);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: sparkleFloat 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sparkleFloat {

  0%,
  100% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(180deg);
    opacity: 1;
  }
}

/* ---- EarPods ---- */
.earpods-icon {
  font-size: 5rem;
  animation: bounceIn 0.8s ease-out;
  margin: 1rem 0;
}

/* ---- Loading Spinner ---- */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--pink-200);
  border-top-color: var(--pink-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 1rem auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .section-content {
    padding: 1.5rem 1rem;
  }

  .timer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .card {
    padding: 1.5rem;
    border-radius: 20px;
  }

  .balloon {
    width: 45px;
    height: 55px;
  }
}

@media (min-width: 768px) {
  .timer-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---- Lyrics Section ---- */
.lyrics-container {
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--pink-300) transparent;
}

.lyrics-line {
  font-family: var(--font-handwriting);
  font-size: 1.3rem;
  color: var(--text-light);
  margin: 0.5rem 0;
  transition: all 0.3s ease;
  padding: 0.3rem;
}

.lyrics-line.active {
  color: var(--pink-600);
  font-size: 1.5rem;
  font-weight: 700;
}

.lyrics-line.past {
  color: var(--pink-400);
  opacity: 0.7;
}

/* ---- Video Container ---- */
.video-container {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9/16;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-card);
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Playful message bubble ---- */
.message-bubble {
  background: white;
  border-radius: 20px 20px 20px 4px;
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow-card);
  display: inline-block;
  margin: 0.5rem 0;
  animation: messageFade 0.4s ease-out;
}

/* ---- Hidden utility ---- */
.hidden {
  display: none !important;
}

.invisible {
  opacity: 0;
  pointer-events: none;
}

/* ---- Sub-section transitions ---- */
.sub-section {
  display: none;
}

.sub-section.active {
  display: block;
  animation: sectionFadeIn 0.6s ease-out;
}

/* ---- Scrapbook style ---- */
.scrapbook-card {
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.15);
  transform: rotate(-1deg);
  margin: 1rem 0;
  transition: var(--transition-smooth);
}

.scrapbook-card:nth-child(even) {
  transform: rotate(1.5deg);
}

.scrapbook-card:hover {
  transform: rotate(0) scale(1.02);
}

.scrapbook-card img {
  width: 100%;
  border-radius: 2px;
  display: block;
}

.scrapbook-caption {
  font-family: var(--font-handwriting);
  font-size: 1rem;
  color: var(--text-dark);
  margin-top: 10px;
  text-align: center;
}

/* ---- Sweet text reveal ---- */
.sweet-reveal-text {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.sweet-reveal-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   LANDING PAGE - Valentine Style Background
   ============================================ */

/* Main valentine background with pink grid */
.landing-valentine-bg {
  background-color: #fce4ec;
  background-image:
    linear-gradient(rgba(244, 143, 177, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 143, 177, 0.25) 1px, transparent 1px);
  background-size: 32px 32px;
  position: relative;
}

/* Scalloped wavy border at top */
.scallop-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 5;
  background: white;
}

.scallop-top::after {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 25px;
  background:
    radial-gradient(circle at 12px 0px, transparent 12px, white 12px, white 25px, transparent 25px);
  background-size: 24px 25px;
  background-repeat: repeat-x;
}

/* Scalloped wavy border at bottom */
.scallop-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 5;
  background: linear-gradient(to right, #f8bbd0, #ffe0b2);
}

.scallop-bottom::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 25px;
  background:
    radial-gradient(circle at 12px 25px, transparent 12px, #f8bbd0 12px, #f8bbd0 25px, transparent 25px);
  background-size: 24px 25px;
  background-repeat: repeat-x;
}

/* Floating hearts container */
.landing-hearts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.landing-hearts .lh {
  position: absolute;
  color: #e91e63;
  opacity: 0.25;
  animation: landingHeartFloat linear infinite;
}

@keyframes landingHeartFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(-30px) rotate(15deg) scale(1.1);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* Floating diamond shapes */
.landing-diamonds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.landing-diamonds .ld {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #f48fb1;
  opacity: 0.2;
  transform: rotate(45deg);
  animation: landingDiamondFloat 5s ease-in-out infinite;
}

@keyframes landingDiamondFloat {

  0%,
  100% {
    transform: rotate(45deg) translateY(0);
  }

  50% {
    transform: rotate(45deg) translateY(-20px);
  }
}

/* Tilted card */
.landing-card {
  background: white;
  border-radius: 6px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 3px 4px 18px rgba(0, 0, 0, 0.12);
  transform: rotate(-2deg);
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  transition: transform 0.4s ease;
  animation: cardEntrance 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes cardEntrance {
  0% {
    transform: rotate(-8deg) scale(0.7);
    opacity: 0;
  }

  60% {
    transform: rotate(1deg) scale(1.03);
  }

  100% {
    transform: rotate(-2deg) scale(1);
    opacity: 1;
  }
}

.landing-card:hover {
  transform: rotate(0deg) scale(1.01);
}

/* Tape decorations */
.tape {
  position: absolute;
  width: 50px;
  height: 20px;
  background: rgba(244, 143, 177, 0.45);
  z-index: 20;
  border-radius: 2px;
}

.tape-left {
  top: -8px;
  left: 20px;
  transform: rotate(-35deg);
}

.tape-right {
  top: -8px;
  right: 20px;
  transform: rotate(35deg);
}

/* Landing card image */
.landing-card-img {
  max-width: 180px;
  width: 55%;
  border-radius: 12px;
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.5s both;
}

/* Landing buttons — pink border style matching valentine site */
.btn-landing {
  background: white;
  color: var(--pink-500);
  border: 2px solid var(--pink-400);
  border-radius: 6px;
  padding: 0.55rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: var(--font-handwriting);
}

.btn-landing:hover {
  background: var(--pink-500);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

/* ============================================
   MATRIX COUNTDOWN & DARK FIREWORKS
   ============================================ */

.matrix-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.matrix-number {
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 700;
  font-family: var(--font-main);
  color: var(--pink-400);
  text-shadow: 0 0 40px var(--pink-500), 0 0 80px var(--pink-400), 0 0 120px var(--pink-300);
  z-index: 10;
  animation: countPulse 0.8s ease-out;
}

@keyframes countPulse {
  0% {
    transform: scale(3);
    opacity: 0;
  }

  50% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

/* Matrix-style birthday word — glowing pink on dark */
.matrix-birthday-word {
  font-family: var(--font-handwriting);
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: #f472b6;
  text-shadow:
    0 0 10px rgba(244, 114, 182, 0.8),
    0 0 30px rgba(244, 114, 182, 0.6),
    0 0 60px rgba(244, 114, 182, 0.4),
    0 0 100px rgba(236, 72, 153, 0.3);
  z-index: 10;
  animation: matrixWordReveal 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes matrixWordReveal {
  0% {
    transform: scale(0) translateY(40px);
    opacity: 0;
    text-shadow: 0 0 0 transparent;
  }

  60% {
    transform: scale(1.15) translateY(-8px);
    text-shadow:
      0 0 20px rgba(244, 114, 182, 1),
      0 0 60px rgba(244, 114, 182, 0.8),
      0 0 120px rgba(236, 72, 153, 0.5);
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes matrixFlash {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 80px rgba(244, 114, 182, 1), 0 0 160px rgba(236, 72, 153, 0.8);
  }

  75% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

/* ============================================
   COMPLIMENT FLOW (compliment-v2 clone)
   ============================================ */

/* Animations */
@keyframes compFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes compSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes compPulseRing {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.8;
  }
}

@keyframes compRadarSweep {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes compPetalFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Title "Just for you" */
.comp-title {
  font-family: var(--font-handwriting);
  font-size: clamp(2rem, 6vw, 3rem);
  color: #e63b7a;
  margin-bottom: 2rem;
}

/* Heart button */
.comp-heart-btn {
  cursor: pointer;
  margin: 0 auto 1.5rem;
  width: fit-content;
}

.comp-heart-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(230, 59, 122, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: compPulseRing 2s ease-in-out infinite;
}

.comp-heart-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 4px 20px rgba(230, 59, 122, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.comp-heart-btn:hover .comp-heart-circle {
  transform: scale(1.1);
}

.comp-tap-text {
  color: #e8a0b5;
  font-size: 0.95rem;
  font-family: var(--font-body);
}

/* Radar scanner — double concentric rings */
.comp-radar-container {
  margin: 2rem auto;
  width: fit-content;
}

.comp-radar-outer {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 2px solid rgba(230, 59, 122, 0.22);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-radar-inner {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(230, 59, 122, 0.18);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Filled sweep (conic gradient inside inner ring) */
.comp-radar-fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(230, 59, 122, 0.12) 0deg,
      rgba(230, 59, 122, 0.04) 120deg,
      transparent 120deg);
  animation: compRadarSweep 2.5s linear infinite;
}

/* Scanning line */
.comp-radar-line {
  position: absolute;
  width: 50%;
  height: 2px;
  background: linear-gradient(to right, rgba(230, 59, 122, 0.6), rgba(230, 59, 122, 0.1));
  top: 50%;
  left: 50%;
  transform-origin: left center;
  animation: compRadarSweep 2.5s linear infinite;
}

.comp-radar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 4px 20px rgba(230, 59, 122, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Petal indicator rotating on outer ring */
.comp-radar-indicator {
  position: absolute;
  width: 16px;
  height: 12px;
  background: rgba(230, 59, 122, 0.25);
  border-radius: 50% 0 50% 0;
  animation: compIndicatorOrbit 2.5s linear infinite;
  transform-origin: 130px 6px;
  top: calc(50% - 6px);
  left: calc(50% - 130px);
}

@keyframes compIndicatorOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.comp-scan-label {
  color: #e63b7a;
  font-size: 1.15rem;
  font-weight: 500;
  margin-top: 1.5rem;
  font-family: var(--font-body);
}

/* Invoice / Official Report */
.comp-invoice {
  background: white;
  border-radius: 12px 12px 0 0;
  padding: 2rem 1.5rem 2.5rem;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.comp-invoice-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.comp-invoice-title {
  font-family: var(--font-main);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #2d3748;
  margin-bottom: 0.3rem;
}

.comp-invoice-date {
  font-size: 0.85rem;
  color: #718096;
}

.comp-invoice-divider {
  border-top: 2px dashed #e2e8f0;
  margin: 1rem 0;
}

.comp-invoice-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.9rem;
}

.comp-label {
  color: #718096;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.comp-value {
  color: #2d3748;
  font-weight: 700;
}

.comp-invoice-total {
  color: #e63b7a;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-top: 0.5rem;
}

.comp-barcode {
  color: #2d3748;
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-top: 0.5rem;
  opacity: 0.5;
}

.comp-invoice-heart-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.comp-invoice-zigzag {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 12px;
  background: linear-gradient(135deg, white 25%, transparent 25%) -12px 0,
    linear-gradient(225deg, white 25%, transparent 25%) -12px 0,
    linear-gradient(315deg, white 25%, transparent 25%),
    linear-gradient(45deg, white 25%, transparent 25%);
  background-size: 24px 12px;
  background-color: transparent;
}

/* Continue button */
.comp-continue-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.9rem 2.5rem;
  background: linear-gradient(135deg, #e63b7a, #ec6a9c);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(230, 59, 122, 0.3);
}

.comp-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 59, 122, 0.4);
}

/* Favorite things title */
.comp-fav-title {
  font-family: var(--font-handwriting);
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  color: #e63b7a;
  margin-bottom: 1.5rem;
}

/* Polaroid flip cards */
.comp-polaroid-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  perspective: 800px;
}

.comp-polaroid {
  width: 170px;
  cursor: pointer;
  background: white;
  padding: 10px 10px 28px;
  border-radius: 4px;
  box-shadow: 2px 3px 18px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.comp-polaroid-inner {
  width: 100%;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.comp-polaroid.flipped .comp-polaroid-inner {
  transform: rotateY(180deg);
}

.comp-polaroid-front,
.comp-polaroid-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-polaroid-front {
  background: #e63b7a;
}

.comp-polaroid-back {
  background: #fff5f7;
  transform: rotateY(180deg);
  padding: 1rem;
}

.comp-polaroid-back p {
  font-size: 0.85rem;
  color: #4a3040;
  text-align: center;
  line-height: 1.5;
  font-weight: 500;
}

.comp-smiley {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fake text lines below image area */
.comp-polaroid-label {
  height: 14px;
  margin-top: 10px;
  background: repeating-linear-gradient(90deg,
      #e8d5de 0px, #e8d5de 40px,
      transparent 40px, transparent 50px);
  border-radius: 2px;
  opacity: 0.5;
}

.comp-flip-hint {
  color: #c9a0b0;
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* Envelope v2 — proper pink rectangle with flaps */
.comp-envelope-v2 {
  cursor: pointer;
  margin: 2rem auto;
  width: fit-content;
  transition: transform 0.3s ease;
}

.comp-envelope-v2:hover {
  transform: scale(1.03);
}

.comp-env-body {
  width: 280px;
  height: 180px;
  background: linear-gradient(180deg, #f4a0b5, #f2869e);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 8px 30px rgba(230, 59, 122, 0.2);
  overflow: visible;
}

/* Top V-flap */
.comp-env-flap-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: linear-gradient(180deg, #f7b6c9, rgba(244, 160, 181, 0.3));
  clip-path: polygon(0 0, 50% 70%, 100% 0);
  z-index: 2;
}

/* Left diagonal flap */
.comp-env-flap-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 1;
}

/* Right diagonal flap */
.comp-env-flap-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  z-index: 1;
}

/* Seal circle with mail icon */
.comp-env-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.comp-env-label {
  color: #e8a0b5;
  font-size: 0.95rem;
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-handwriting);
}

/* Letter content */
.comp-letter {
  background: white;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: left;
  line-height: 1.7;
  font-size: 0.95rem;
  color: #4a3040;
}

.comp-letter p {
  margin-bottom: 0.8rem;
}

/* Falling petals */
.comp-petals {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.comp-petal {
  position: absolute;
  width: 12px;
  height: 8px;
  background: rgba(230, 59, 122, 0.3);
  border-radius: 50% 0 50% 0;
  animation: compPetalFall linear infinite;
}

/* ============================================
   CAKE SECTION (birthday-v3-light clone)
   ============================================ */

/* 3D CSS Cake */
.cake-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cake {
  position: relative;
  width: 220px;
  height: 170px;
}

.plate {
  width: 240px;
  height: 100px;
  position: absolute;
  bottom: -30px;
  left: -10px;
  border-radius: 50%;
  background-color: #f9f9f9;
  box-shadow: 0 2px 0 #e0e0e0, 0 4px 0 #d0d0d0, 0 5px 30px rgba(0, 0, 0, 0.25);
}

.cake>* {
  position: absolute;
}

.layer {
  display: block;
  width: 220px;
  height: 90px;
  border-radius: 50%;
  background-color: #f7c1cf;
  box-shadow:
    0 2px 0 #f4b6c5, 0 4px 0 #f1acbb, 0 6px 0 #eea1b1,
    0 8px 0 #eb97a7, 0 10px 0 #e88d9d, 0 12px 0 #e58393,
    0 14px 0 #e27989, 0 16px 0 #df707f, 0 18px 0 #dc6676,
    0 20px 0 #d95c6d, 0 22px 0 #d65264, 0 24px 0 #d3485b,
    0 26px 0 #cf3f53, 0 28px 0 #cb3a4f, 0 30px 0 #c6354b;
}

.layer-top {
  top: 0;
}

.layer-middle {
  top: 33px;
}

.layer-bottom {
  top: 66px;
}

.icing {
  top: 1px;
  left: 3px;
  background-color: #fff3e6;
  width: 215px;
  height: 90px;
  border-radius: 50%;
}

.icing::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  bottom: 6px;
  left: 5px;
  background-color: #f5ead8;
  box-shadow: 0 0 4px #f7eee0, 0 0 4px #f7eee0, 0 0 4px #f7eee0;
  border-radius: 50%;
  z-index: 1;
}

.drip {
  display: block;
  width: 46px;
  height: 60px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color: #f0e4d0;
}

.drip1 {
  top: 53px;
  left: 5px;
  transform: skewY(15deg);
  height: 48px;
  width: 36px;
}

.drip2 {
  top: 55px;
  left: 161px;
  transform: skewY(-25deg);
}

.drip3 {
  top: 54px;
  left: 80px;
  width: 70px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

.candle {
  background-color: #ff8fab;
  width: 16px;
  height: 50px;
  border-radius: 8px / 4px;
  top: -20px;
  left: 50%;
  margin-left: -8px;
  z-index: 10;
}

.candle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 8px;
  border-radius: 50%;
  background-color: #da6f8a;
}

/* Candle flame */
.flame {
  position: absolute;
  background-color: orange;
  width: 15px;
  height: 35px;
  border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
  top: -34px;
  left: 50%;
  margin-left: -7.5px;
  z-index: 10;
  box-shadow:
    0 0 10px rgba(255, 165, 0, 0.5),
    0 0 20px rgba(255, 165, 0, 0.5),
    0 0 60px rgba(255, 165, 0, 0.5),
    0 0 80px rgba(255, 165, 0, 0.5);
  transform-origin: 50% 90%;
  animation: flicker 1s ease-in-out alternate infinite;
}

@keyframes flicker {
  0% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.2), 0 0 60px rgba(255, 165, 0, 0.2);
  }

  25% {
    transform: skewX(-5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5);
  }

  50% {
    transform: skewX(10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3), 0 0 20px rgba(255, 165, 0, 0.3), 0 0 60px rgba(255, 165, 0, 0.3);
  }

  75% {
    transform: skewX(-10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.4), 0 0 20px rgba(255, 165, 0, 0.4), 0 0 60px rgba(255, 165, 0, 0.4);
  }

  100% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5);
  }
}

@keyframes flameGrow {
  from {
    opacity: 0;
    transform: scaleY(0.2) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

/* Cake card container */
.cake-card {
  background: #fff8fc;
  padding: 1.8rem;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(230, 59, 122, 0.06);
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cake-card-inner {
  position: relative;
  height: 280px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(242, 134, 158, 0.2));
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 30px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
  padding-bottom: 2.5rem;
}

/* Cake action button */
.cake-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 2rem;
  background: #ffccd3;
  color: #9b3c49;
  border: none;
  border-radius: 40px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-handwriting);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(230, 59, 122, 0.15);
}

.cake-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 59, 122, 0.25);
}

/* Happy birthday title */
.cake-hbd-title {
  font-family: var(--font-handwriting);
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: #9b3c49;
  text-align: center;
  line-height: 1.3;
  animation: compFadeIn 1s ease-out;
}

/* Bunting flags */
.cake-bunting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
}

.cake-bunting-svg {
  width: 100%;
  height: auto;
}

/* Confetti pieces */
.cake-confetti-piece {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  animation: cakeConfettiFall ease-out forwards;
}

@keyframes cakeConfettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(400px) rotate(720deg);
    opacity: 0;
  }
}

.cake-confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

/* Balloon area */
.cake-balloon-area {
  position: relative;
  width: 100%;
  height: 300px;
}

.cake-balloon-title {
  font-family: var(--font-handwriting);
  font-size: 1.3rem;
  color: #9b3c49;
  margin-bottom: 0.5rem;
}

.cake-balloon {
  position: absolute;
  width: 75px;
  height: 92px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10;
  animation: balloonFloat 3s ease-in-out infinite;
}

.cake-balloon:nth-child(even) {
  animation-delay: 1.5s;
}

@keyframes balloonFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.cake-balloon:hover {
  transform: scale(1.15);
  animation-play-state: paused;
}

/* Balloon colors */
#cballoon-0 {
  background: radial-gradient(circle at 35% 35%, #ffb3c6, #ff8fab);
}

#cballoon-1 {
  background: radial-gradient(circle at 35% 35%, #ffd9a0, #ffd166);
}

#cballoon-2 {
  background: radial-gradient(circle at 35% 35%, #d8b4fe, #c084fc);
}

#cballoon-3 {
  background: radial-gradient(circle at 35% 35%, #d4c5f9, #a78bfa);
}

/* Balloon shine highlight */
.cake-balloon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  top: 16px;
  left: 18px;
}

/* Balloon knot */
.balloon-knot {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid currentColor;
}

#cballoon-0 .balloon-knot {
  border-top-color: #ff8fab;
}

#cballoon-1 .balloon-knot {
  border-top-color: #ffc9a0;
}

#cballoon-2 .balloon-knot {
  border-top-color: #c084fc;
}

#cballoon-3 .balloon-knot {
  border-top-color: #a78bfa;
}

/* Balloon strings SVG */
.cake-balloon-strings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Words hidden behind balloons */
.cake-balloon-word {
  position: absolute;
  font-family: var(--font-handwriting);
  font-size: 1.6rem;
  font-weight: 700;
  color: #7c3aed;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 5;
}

/* Bigger cake buttons */
.cake-btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
  background: linear-gradient(135deg, #f7a0b5, #e8475f);
  color: white;
  box-shadow: 0 4px 20px rgba(230, 59, 122, 0.3);
}

.cake-btn-lg:hover {
  box-shadow: 0 6px 25px rgba(230, 59, 122, 0.45);
}

/* Wish text */
.cake-wish-text {
  font-family: var(--font-handwriting);
  font-size: 1.1rem;
  color: #c06070;
  text-align: center;
  animation: wishPulse 2s ease-in-out infinite;
}

@keyframes wishPulse {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Smoke wisps */
.cake-smoke {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(180, 180, 180, 0.5);
  z-index: 30;
  pointer-events: none;
  animation: smokeRise 1.5s ease-out forwards;
}

@keyframes smokeRise {
  0% {
    opacity: 0.7;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-20px + 40px * var(--rand, 0.5)), -80px) scale(3);
  }
}

.cake-smoke:nth-child(odd) {
  --rand: 0.2;
}

.cake-smoke:nth-child(even) {
  --rand: 0.8;
}

/* Cake slice */
.cake-slice-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
  position: relative;
}

.cake-slice {
  transform: scale(0.3) translateY(100px);
  opacity: 0;
}

@keyframes cakeSliceZoom {
  0% {
    transform: scale(0.3) translateY(100px);
    opacity: 0;
  }

  40% {
    transform: scale(1.2) translateY(-20px);
    opacity: 1;
  }

  60% {
    transform: scale(2) translateY(-10px);
    opacity: 1;
  }

  100% {
    transform: scale(2.5) translateY(0);
    opacity: 1;
  }
}

/* Decoration items that pop in */
.cake-deco-item {
  position: absolute;
  font-size: 2rem;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
}

@keyframes decoPopIn {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-30deg);
  }

  60% {
    opacity: 1;
    transform: scale(1.3) rotate(10deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ==========================================
   LOVE LYRICS SECTION (love-lyrics-site clone)
   ========================================== */
.love-lyrics-section {
  background: linear-gradient(135deg, #080818 0%, #0d0a2b 30%, #1a0833 60%, #0a0a2e 100%);
  position: relative;
  overflow: hidden;
  color: #e4e4e4;
}

.lyrics-stars-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.lyrics-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

.lyrics-content .sub-section {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Heart icon */
.lyrics-heart-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 77, 255, 0.3), rgba(155, 77, 255, 0.1));
  border: 2px solid rgba(155, 77, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  animation: lyricsPulse 2s ease-in-out infinite;
}

.lyrics-heart-icon span {
  font-size: 2.5rem;
}

@keyframes lyricsPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(155, 77, 255, 0.2);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(155, 77, 255, 0.4);
  }
}

/* Title */
.lyrics-title {
  font-family: 'Shantell Sans', var(--font-handwriting), cursive;
  font-size: 2.8rem;
  font-weight: 500;
  color: #e4e4e4;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.lyrics-purple {
  color: #9b4dff;
}

.lyrics-subtitle {
  font-family: 'Shantell Sans', var(--font-handwriting), cursive;
  font-size: 1.1rem;
  color: rgba(228, 228, 228, 0.7);
  margin-bottom: 2rem;
}

/* Purple gradient button */
.lyrics-btn {
  font-family: 'Shantell Sans', var(--font-handwriting), cursive;
  font-size: 1.2rem;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #9b4dff, #c026d3);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 25px rgba(155, 77, 255, 0.4);
  margin-top: 1rem;
}

.lyrics-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 35px rgba(155, 77, 255, 0.6);
}

.lyrics-btn-ghost {
  background: transparent;
  border: 2px solid rgba(155, 77, 255, 0.5);
  box-shadow: none;
}

.lyrics-btn-ghost:hover {
  background: rgba(155, 77, 255, 0.15);
  box-shadow: 0 0 20px rgba(155, 77, 255, 0.2);
}

.lyrics-btn-group {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.lyrics-ready {
  font-size: 3.5rem;
}

.lyrics-wait-msg {
  font-family: 'Shantell Sans', var(--font-handwriting), cursive;
  color: rgba(155, 77, 255, 0.8);
  font-size: 1.1rem;
  margin-top: 1.5rem;
}

/* Lyrics display */
.lyrics-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: 0.5rem;
}

.lyrics-line-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}

.lyrics-word {
  font-family: 'Shantell Sans', var(--font-handwriting), cursive;
  font-size: 2.5rem;
  font-weight: 400;
  color: white;
  opacity: 0;
  animation: lyricsWordFade 0.6s ease-out forwards;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

@keyframes lyricsWordFade {
  0% {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Page fade in */
@keyframes lyricsFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Final screen */
.lyrics-final-cat {
  font-size: 6rem;
  margin-bottom: 1rem;
  animation: lyricsCatBounce 1.5s ease-in-out infinite;
}

@keyframes lyricsCatBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.lyrics-final-text {
  font-family: 'Shantell Sans', var(--font-handwriting), cursive;
  font-size: 1.8rem;
  color: #e4e4e4;
}
/* ========================================== */
/* SECTION 10: SWEET REVEAL (Cloned Styles)   */
/* ========================================== */

.sweet-reveal-section {
  background: #000;
  background: linear-gradient(135deg, rgba(54, 15, 87, 0.8) 0%, #000000 50%, rgba(87, 15, 64, 0.7) 100%) !important;
  color: white;
  overflow: hidden;
  position: relative;
}

.sweet-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.sweet-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
}

.sweet-gif-container {
  margin-bottom: 2rem;
}

.sweet-main-gif {
  width: 180px;
  height: auto;
  border-radius: 20px;
}

.sweet-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.sweet-pink {
  background: linear-gradient(to right, #ec4899, #d946ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sweet-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2.5rem;
}

.sweet-btn {
  background: linear-gradient(to right, #ef4444, #db2777);
  color: white;
  font-weight: 600;
  padding: 1rem 3rem;
  border-radius: 9999px;
  font-size: 1.25rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.4);
}

.sweet-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 35px -5px rgba(239, 68, 68, 0.5);
}

/* Lyrics Screen */
.sweet-lyrics-display {
  padding: 2rem;
  max-width: 800px;
}

.sweet-lyric-text {
  font-size: 4.5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.35), 0 0 40px rgba(255, 192, 203, 0.25);
  line-height: 1.3;
}

@keyframes sweetLyricGrow {
  0% { opacity: 0; transform: translateY(50px) scale(0.8); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Floating elements */
.sweet-floating-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sweet-floating-item {
  position: absolute;
  bottom: -50px;
  opacity: 0.25;
  animation: sweetFloatUp linear infinite;
}

@keyframes sweetFloatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  20% { opacity: 0.35; }
  80% { opacity: 0.35; }
  100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

.sweet-bg-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: sweetTwinkle ease-in-out infinite;
}

@keyframes sweetTwinkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.6; transform: scale(1); }
}

.sweet-final-text {
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .sweet-title { font-size: 2.2rem; }
  .sweet-lyric-text { font-size: 2.8rem; }
  .sweet-main-gif { width: 140px; }
}

/* ========================================== */
/* SECTION 9: VALENTINE MEMORIES (Sequence)   */
/* ========================================== */

.memory-section {
    background: #fff5f7 !important;
}

.memory-collage {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.collage-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1;
}

.collage-2 {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 1.5;
}

.collage-slot, .collage-item {
    background: rgba(255, 182, 193, 0.2);
    border: 2px dashed #fce7f3;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collage-slot img, .collage-item img, .memory-full-img, .fav-reveal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.memory-full-container {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 3/4;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Entering Animations */
.img-enter-left { animation: imgEnterSlideLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.img-enter-scale { animation: imgEnterScale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.img-enter-up { animation: imgEnterSlideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.img-enter-blur { animation: imgEnterBlur 1s ease-out forwards; }

@keyframes imgEnterSlideLeft {
    0% { transform: translateX(-100px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes imgEnterScale {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes imgEnterSlideUp {
    0% { transform: translateY(100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes imgEnterBlur {
    0% { filter: blur(20px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

/* Reveal Specifics */
.img-reveal-left { opacity: 0; animation: imgEnterSlideLeft 1s ease-out 0.2s forwards; }
.img-reveal-scale { opacity: 0; animation: imgEnterScale 1s ease-out 0.2s forwards; }
.img-reveal-up { opacity: 0; animation: imgEnterSlideUp 1s ease-out 0.2s forwards; }
.img-reveal-blur { opacity: 0; animation: imgEnterBlur 1.2s ease-out 0.2s forwards; }
.img-reveal-slide-up { opacity: 0; animation: imgEnterSlideUp 1s ease-out 0.3s forwards; }

/* Favorite Reveal Step */
.fav-text-container {
    min-height: 4rem;
    font-family: 'Shantell Sans', cursive;
    font-size: 2.2rem;
    color: var(--pink-600);
    margin-bottom: 2rem;
}

.fav-image-container {
    width: 280px;
    height: 380px;
    margin: 0 auto;
    border-radius: 30px;
    border: 8px solid white;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    animation: favReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes favReveal {
    0% { transform: scale(0) rotate(-15deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.fav-emoji-burst {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    pointer-events: none;
    animation: emojiBurst 2s ease-out forwards;
}

@keyframes emojiBurst {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

@media (max-width: 600px) {
    .collage-4 { gap: 0.5rem; }
    .memory-full-container { max-width: 100%; }
    .fav-text-container { font-size: 1.8rem; }
    .fav-image-container { width: 220px; height: 300px; }
}

/* ========================================== */
/* REFINED SECTION 9: VALENTINE (New Theme)   */
/* ========================================== */

.memory-section {
    background: #FFDED4 !important; /* Peach background base */
    background-image: radial-gradient(#FFB7A2 1px, transparent 0) !important;
    background-size: 30px 30px !important;
    position: relative;
    overflow: hidden;
}

/* Wavy Borders */
.wavy-border {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px;
    background: #FFF5F7;
    z-index: 1;
}

.wavy-top {
    top: -50px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    transform: scaleX(1.1);
    box-shadow: 0 10px 0 #FFF5F7, 0 20px 0 #FFECEF;
}

.wavy-bottom {
    bottom: -50px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: scaleX(1.1);
    box-shadow: 0 -10px 0 #FFF5F7, 0 -20px 0 #FFECEF;
}

/* Polaroid Card Frame */
.polaroid-card {
    background: white;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 4px;
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    transform: rotate(-1deg);
    transition: transform 0.3s ease;
}

.polaroid-card:hover {
    transform: rotate(0deg) translateY(-5px);
}

.polaroid-card h3 {
    font-family: 'Shantell Sans', cursive;
    color: #DB2777;
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.polaroid-card p.subtitle {
    font-size: 1rem;
    color: #9CA3AF;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Tape/Sticker styles */
.tape {
    position: absolute;
    width: 80px;
    height: 30px;
    background: rgba(251, 207, 232, 0.6);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
    z-index: 2;
}

.tape-tl { top: -10px; left: -25px; transform: rotate(-35deg); }
.tape-br { bottom: -10px; right: -25px; transform: rotate(-35deg); }

/* Image Frame Adjustment */
.polaroid-img-container {
    width: 100%;
    border: 1px solid #F3F4F6;
    background: #F9FAFB;
    border-radius: 4px;
    overflow: hidden;
}

.polaroid-img-container img {
    width: 100%;
    height: auto; /* Frame adjusts for image */
    display: block;
}

/* Complex Loading Animations */
@keyframes wavingFade {
    0% { transform: scale(0.8) rotate(-15deg) translateY(50px); opacity: 0; filter: blur(10px); }
    50% { transform: scale(1.05) rotate(5deg) translateY(-10px); opacity: 0.8; }
    100% { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; filter: blur(0); }
}

@keyframes spinningIn {
    0% { transform: scale(0) rotate(-360deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(20deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes wavingAround {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    25% { transform: rotate(2deg) translate(3px, -3px); }
    50% { transform: rotate(-1deg) translate(-2px, 2px); }
    75% { transform: rotate(1.5deg) translate(1px, -1px); }
}

.anim-waving-in { animation: wavingFade 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.anim-spinning-in { animation: spinningIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.anim-wave-continuous { animation: wavingAround 4s ease-in-out infinite; }

/* Hearts floating in BG */
.floating-heart {
    position: absolute;
    color: #FBCFE8;
    pointer-events: none;
    z-index: 0;
    animation: heartFly Up 6s linear infinite;
}

@keyframes heartFlyUp {
    0% { transform: translateY(110vh) scale(0); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}

/* Fix Favorite Reveal Cropping */
#val-step-5 .polaroid-card {
    max-width: 400px; /* Allow wider card if needed */
}

.fav-image-container {
    width: 100% !important; /* Take full width of card */
    height: auto !important; /* Height based on image */
    max-height: 500px;
    border: 8px solid white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    animation: favReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Interaction Section Styles */
.val-interaction-box {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    margin: 2rem auto;
    max-width: 500px;
    text-align: center;
}

.val-interaction-box h4 {
    font-family: 'Shantell Sans', cursive;
    color: var(--pink-600);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.interaction-msg {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: #FFF5F7;
    color: #BE185D;
    font-weight: 600;
    animation: fade-in 0.5s ease-out;
}

/* Countdown Styles */
.countdown-container {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-number {
    font-size: 8rem;
    font-weight: 800;
    color: var(--pink-500);
    text-shadow: 0 5px 15px rgba(219, 39, 119, 0.3);
    animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.look-left-text {
    font-family: 'Shantell Sans', cursive;
    font-size: 3.5rem;
    color: #DB2777;
    font-weight: 700;
    animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.special-msg {
    font-size: 2.5rem;
    color: var(--pink-600);
    margin: 2rem 0;
    font-family: 'Shantell Sans', cursive;
}

/* Placeholder for your images */
.placeholder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.placeholder-card {
    background: #fdf2f2;
    border: 3px dashed #fecaca;
    border-radius: 10px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    font-size: 0.9rem;
}

/* ========================================== */
/* EXPANDED PERSONAL MEMORY ANIMATIONS        */
/* ========================================== */

/* GOOD: Soft Fade + Float */
@keyframes goodIn {
    0% { opacity: 0; transform: translateY(20px); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.anim-good-in { animation: goodIn 1.2s ease-out forwards; }

/* FUNNY: Elastic Boing Bounce */
@keyframes funnyIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}
.anim-funny-in { animation: funnyIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }

/* CRINGE: Slow Shimmering Zoom + Rotation */
@keyframes cringeIn {
    0% { transform: scale(0.8) rotate(-10deg); opacity: 0; filter: contrast(150%) brightness(150%); }
    50% { transform: scale(1.05) rotate(5deg); opacity: 0.8; filter: contrast(120%) brightness(120%); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; filter: contrast(100%) brightness(100%); }
}
.anim-cringe-in { animation: cringeIn 1.5s ease-in-out forwards; }

/* New Collage Layouts */
.collage-3 {
    display: grid;
    gap: 1rem;
    width: 100%;
}

/* v1-v3: Large left, two small right */
.collage-v1v3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.collage-v1v3 .item-1 { grid-row: span 2; }

/* v4-v6: Staggered/fan layout */
.collage-v4v6 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    position: relative;
    padding: 2rem;
}
.collage-v4v6 .collage-item {
    position: absolute;
    width: 150px;
    height: 200px;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.collage-v4v6 .item-1 { transform: rotate(-10deg) translateX(-60px); z-index: 1; }
.collage-v4v6 .item-2 { transform: rotate(0deg) translateY(-10px); z-index: 2; }
.collage-v4v6 .item-3 { transform: rotate(10deg) translateX(60px); z-index: 1; }

/* v7-v9: Horizontal film-strip style */
.collage-v7v9 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
}

/* Video Frame Style */
.val-video-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: black;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 1.5rem;
}

.val-video-container video {
    width: 100%;
    display: block;
}

.collage-item img, .collage-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================== */
/* PERSONAL MEMORY REFINEMENTS                */
/* ========================================== */

/* Slidable Carousel for v4-v6 */
.val-slider-container {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.val-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.val-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.val-slide .polaroid-img-container {
    max-width: 80%;
    transform: rotate(var(--rot, 0deg));
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.val-slider-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 1rem;
}

.val-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFD1DC;
    cursor: pointer;
    transition: all 0.3s ease;
}

.val-dot.active {
    background: var(--pink-500);
    transform: scale(1.3);
}

/* Click-to-Expand for v7-v9 */
.val-expandable-item {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    z-index: 1;
}

.val-expandable-item:hover {
    transform: scale(1.05) rotate(2deg);
    z-index: 10;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Image Expansion Overlay */
.val-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.val-image-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.val-expanded-img-container {
    max-width: 90%;
    max-height: 80%;
    background: white;
    padding: 15px 15px 60px 15px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.val-image-overlay.active .val-expanded-img-container {
    transform: scale(1);
}

.val-expanded-img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.val-overlay-close {
    position: absolute;
    top: 30px;
    right: 30px;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
}

.val-overlay-close:hover {
    transform: scale(1.2);
}

/* Adjusting Collage v7-v9 to be less narrow */
.collage-v7v9 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem !important;
    padding: 0.5rem;
}

/* ========================================== */
/* FINAL MESSAGE SCROLLING ANIMATION          */
/* ========================================== */

.scrolling-message-container {
    width: 100%;
    max-width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin: 2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.scrolling-text {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0 1.5rem;
    color: white;
    font-size: 1.5rem;
    line-height: 1.8;
    animation: scroll-up 12s linear forwards;
    opacity: 0;
}

@keyframes scroll-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.special-telugu-text {
    font-weight: 700;
    color: var(--pink-300);
}