:root {
  --electric-magenta: #FF2D78;
  --cyber-lemon: #D4FF2A;
  --deep-ultraviolet: #1A0A2E;
  --plasma-orange: #FF6B2C;
  --bubble-gum: #FF8DC7;
  --laser-mint: #2AFFC6;
  --white-hot: #FFF0F5;
  --void-black: #0A0510;
}

/* Design terms: Interactive element highlights heart-bubbles:** heart-bubbles* heart-bubbles:* heart-bubbles::::* On scroll IntersectionObserver` to trigger a `card-flip` style entrance animation — each card starts `rotateX(90deg */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  background: var(--void-black);
  color: var(--white-hot);
  overflow-x: hidden;
}

main { isolation: isolate; }

.hero-zone {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 45, 120, .95) 0 14%, transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(212, 255, 42, .9) 0 12%, transparent 33%),
    radial-gradient(circle at 62% 72%, rgba(42, 255, 198, .92) 0 16%, transparent 38%),
    radial-gradient(circle at 24% 82%, rgba(255, 107, 44, .92) 0 18%, transparent 40%),
    radial-gradient(ellipse at 30% 20%, #FF2D78 0%, #FF6B2C 35%, #D4FF2A 70%, #2AFFC6 100%);
  background-size: 150% 150%, 130% 130%, 145% 145%, 155% 155%, 200% 200%;
  animation: meshDrift 20s infinite alternate ease-in-out;
}

.hero-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 45%, rgba(10, 5, 16, .28));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 7vw 4vw;
}

.lovebot-title {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.16rem, .7vw, .7rem);
}

.lovebot-title span {
  width: clamp(4.1rem, 11vw, 10.4rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 46% 54% 48% 52% / 55% 44% 56% 45%;
  background: rgba(255, 240, 245, .22);
  box-shadow: inset 0 0 28px rgba(255, 240, 245, .28), 0 18px 50px rgba(26, 10, 46, .34);
  text-shadow: 0 5px 0 rgba(26, 10, 46, .18);
  animation: letterFloat 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
}

.lovebot-title span:nth-child(1), .lovebot-title span:nth-child(5) { color: #FF2D78; }
.lovebot-title span:nth-child(2), .lovebot-title span:nth-child(6) { color: #D4FF2A; }
.lovebot-title span:nth-child(3), .lovebot-title span:nth-child(7) { color: #2AFFC6; }
.lovebot-title span:nth-child(4) { color: #FF6B2C; }

.type-subtitle {
  min-height: 1.4em;
  margin: clamp(1rem, 2vw, 2rem) 0 0;
  font-family: "Caveat", cursive;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 700;
  color: var(--deep-ultraviolet);
  opacity: 0;
  transition: opacity .4s ease;
}

.type-subtitle.visible { opacity: 1; }

.hero-bubbles, .closing-bubbles, .heart-pop-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -130px;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 245, .7), rgba(255, 45, 120, .25), rgba(42, 255, 198, .18));
  animation: rise var(--dur, 12s) var(--delay, 0s) infinite ease-in;
}

.b1{left:3%;width:44px;height:44px;--dur:9s}.b2{left:7%;width:94px;height:94px;--dur:14s;--delay:-4s}.b3{left:12%;width:28px;height:28px;--dur:10s;--delay:-2s}.b4{left:17%;width:72px;height:72px;--dur:12s;--delay:-7s}.b5{left:23%;width:34px;height:34px;--dur:8s;--delay:-1s}.b6{left:28%;width:112px;height:112px;--dur:15s;--delay:-9s}.b7{left:34%;width:54px;height:54px;--dur:11s;--delay:-3s}.b8{left:39%;width:24px;height:24px;--dur:9s;--delay:-6s}.b9{left:44%;width:86px;height:86px;--dur:14s;--delay:-2s}.b10{left:49%;width:38px;height:38px;--dur:12s;--delay:-5s}.b11{left:54%;width:118px;height:118px;--dur:15s;--delay:-10s}.b12{left:58%;width:30px;height:30px;--dur:8s;--delay:-4s}.b13{left:62%;width:64px;height:64px;--dur:13s;--delay:-8s}.b14{left:67%;width:42px;height:42px;--dur:10s;--delay:-1s}.b15{left:72%;width:98px;height:98px;--dur:14s;--delay:-5s}.b16{left:76%;width:26px;height:26px;--dur:9s;--delay:-7s}.b17{left:80%;width:76px;height:76px;--dur:12s;--delay:-3s}.b18{left:84%;width:52px;height:52px;--dur:11s;--delay:-6s}.b19{left:88%;width:108px;height:108px;--dur:15s;--delay:-11s}.b20{left:94%;width:36px;height:36px;--dur:8s;--delay:-2s}.b21{left:5%;width:20px;height:20px;--dur:12s;--delay:-9s}.b22{left:15%;width:58px;height:58px;--dur:10s;--delay:-8s}.b23{left:25%;width:88px;height:88px;--dur:14s;--delay:-12s}.b24{left:35%;width:32px;height:32px;--dur:9s;--delay:-4s}.b25{left:45%;width:68px;height:68px;--dur:13s;--delay:-10s}.b26{left:55%;width:40px;height:40px;--dur:8s;--delay:-6s}.b27{left:65%;width:104px;height:104px;--dur:15s;--delay:-13s}.b28{left:75%;width:48px;height:48px;--dur:11s;--delay:-9s}.b29{left:85%;width:82px;height:82px;--dur:13s;--delay:-12s}.b30{left:96%;width:22px;height:22px;--dur:9s;--delay:-5s}

.card-garden {
  min-height: 300vh;
  padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 4vw, 4rem);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 45, 120, .28), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(212, 255, 42, .24), transparent 26%),
    radial-gradient(circle at 50% 95%, rgba(42, 255, 198, .2), transparent 34%),
    var(--deep-ultraviolet);
}

.section-kicker {
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  color: var(--cyber-lemon);
  text-align: center;
  transform: rotate(-2deg);
}

h2 {
  margin: .25rem auto clamp(2rem, 5vw, 4rem);
  max-width: 960px;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: .9;
  text-align: center;
  color: var(--white-hot);
}

.garden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-flow: dense;
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 1320px;
  margin: 0 auto;
}

.garden-card {
  min-height: 260px;
  position: relative;
  overflow: hidden;
  margin-top: var(--card-offset);
  padding: clamp(20px, 3vw, 32px);
  border-radius: clamp(16px, 3vw, 32px);
  color: var(--deep-ultraviolet);
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 240, 245, .55), transparent 26%),
    radial-gradient(circle at 90% 8%, var(--accent), transparent 34%),
    radial-gradient(circle at 75% 85%, rgba(42, 255, 198, .48), transparent 42%),
    rgba(255, 141, 199, .85);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(26, 10, 46, 0.3);
  transform: rotateX(90deg) scale(.8) rotate(var(--rot));
  opacity: 0;
  transition: transform .7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .5s ease, box-shadow .25s ease;
}

.garden-card.in-view { transform: rotate(var(--rot)); opacity: 1; }
.garden-card:hover { transform: rotate(var(--rot)) rotateY(8deg) scale(1.015); box-shadow: 0 0 30px rgba(255, 45, 120, 0.4), 0 0 60px rgba(212, 255, 42, 0.2); }
.garden-card.tapped { transform: rotate(var(--rot)) rotateY(8deg) scale(1.015); }
.garden-card.wide { grid-column: span 2; }
.garden-card.tall { grid-row: span 2; min-height: 548px; }

.garden-card::before, .garden-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--cyber-lemon);
  box-shadow: 22px 12px 0 rgba(255, 45, 120, .72), -16px 24px 0 rgba(42, 255, 198, .72), 36px -10px 0 rgba(255, 107, 44, .65);
}

.garden-card::before { width: 22px; height: 22px; right: 24px; top: 24px; }
.garden-card::after { width: 14px; height: 14px; left: 30px; bottom: 28px; opacity: .75; }

.garden-card h3 {
  margin: 0 0 .65rem;
  max-width: 76%;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--deep-ultraviolet);
}

.garden-card p { margin: 0; max-width: 92%; font-weight: 600; }

.scribble {
  position: absolute;
  right: 24px;
  bottom: 18px;
  font-family: "Caveat", cursive;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 700;
  color: var(--electric-magenta);
  transform: rotate(-8deg);
}

.flip-zone {
  min-height: 100vh;
  padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 4vw, 4rem);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 45, 120, .28), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255, 107, 44, .25), transparent 34%),
    var(--void-black);
}

.flip-grid {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 200px));
  justify-content: center;
  gap: clamp(16px, 3vw, 28px);
  perspective: 1000px;
}

.flip-card { aspect-ratio: 1; perspective: 1000px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s ease-in-out; animation-fill-mode: both; }
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg) scale(1.03); }
.card-front, .card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: clamp(16px, 3vw, 32px);
  backface-visibility: hidden;
  box-shadow: 0 8px 32px rgba(26, 10, 46, 0.3);
}
.card-front { background: radial-gradient(circle at 20% 25%, #FFF0F5, transparent 24%), radial-gradient(circle at 80% 20%, #D4FF2A, transparent 30%), radial-gradient(circle at 50% 80%, #2AFFC6, transparent 40%), #FF8DC7; }
.card-back { padding: 1.3rem; transform: rotateY(180deg); background: radial-gradient(circle at 25% 25%, #FF2D78, transparent 35%), radial-gradient(circle at 78% 80%, #D4FF2A, transparent 38%), #1A0A2E; color: #FFF0F5; text-align: center; font-family: "Caveat", cursive; font-size: clamp(1.3rem, 2.8vw, 2rem); font-weight: 700; line-height: 1.05; }
.mesh-heart { width: 45%; aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, #FFF0F5, #FF2D78 30%, #FF6B2C 62%, #D4FF2A); clip-path: polygon(50% 88%, 12% 50%, 8% 26%, 24% 8%, 46% 18%, 50% 28%, 54% 18%, 76% 8%, 92% 26%, 88% 50%); filter: drop-shadow(0 12px 20px rgba(26, 10, 46, .35)); animation: heartPulse 1.8s ease-in-out infinite; }

.closing-field {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0A0510;
}

.closing-message {
  position: relative;
  z-index: 2;
  max-width: 980px;
  padding: 2rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  text-align: center;
  color: #FF8DC7;
  opacity: 0;
  transform: scale(.92) translateY(20px);
  transition: opacity .9s ease, transform .9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.closing-message.visible { opacity: 1; transform: scale(1) translateY(0); }
.field-bubble { position: absolute; bottom: -90px; border-radius: 50%; opacity: .7; animation: floatUp var(--duration) var(--delay) infinite linear; background: radial-gradient(circle at 30% 25%, rgba(255,240,245,.85), var(--fill)); }

.radial-nav { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; z-index: 20; }
.heart-button { position: absolute; inset: 0; border: 0; border-radius: 50%; background: #FF2D78; color: #FFF0F5; font-size: 2rem; box-shadow: 0 12px 32px rgba(255,45,120,.42); cursor: pointer; transition: transform .25s ease; }
.heart-button:hover { transform: scale(1.08) rotate(8deg); }
.nav-bubble { position: absolute; inset: 6px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; color: #1A0A2E; font-family: "Caveat", cursive; font-weight: 700; font-size: 1rem; background: #D4FF2A; transform: translate(0,0) scale(.2); opacity: 0; transition: transform .4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity .25s ease; pointer-events: none; }
.radial-nav.open .nav-bubble { opacity: 1; pointer-events: auto; }
.radial-nav.open .n1 { transform: translate(-6px, -88px) scale(1); background:#D4FF2A; }
.radial-nav.open .n2 { transform: translate(-68px, -68px) scale(1); background:#2AFFC6; }
.radial-nav.open .n3 { transform: translate(-88px, -7px) scale(1); background:#FF8DC7; }
.radial-nav.open .n4 { transform: translate(-64px, 49px) scale(1); background:#FF6B2C; color:#FFF0F5; }

.cursor-bubble { position: fixed; z-index: 30; border-radius: 50%; pointer-events: none; animation: cursorFade .8s forwards ease-out; }
.heart-pop { position: fixed; z-index: 18; width: 24px; height: 24px; background: #FF2D78; clip-path: polygon(50% 88%, 12% 50%, 8% 26%, 24% 8%, 46% 18%, 50% 28%, 54% 18%, 76% 8%, 92% 26%, 88% 50%); pointer-events: none; animation: popHeart 1.4s forwards ease-out; }

@keyframes meshDrift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 50%; } 100% { background-position: 100% 60%, 10% 80%, 0% 20%, 80% 10%, 100% 50%; } }
@keyframes letterFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes rise { 0% { transform: translateY(0) translateX(0) scale(.8); opacity: 0; } 15% { opacity: .42; } 50% { transform: translateY(-55vh) translateX(28px) scale(1); } 100% { transform: translateY(-118vh) translateX(-20px) scale(1.2); opacity: 0; } }
@keyframes heartPulse { 0%,100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.12) rotate(4deg); } }
@keyframes floatUp { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .62; } 52% { transform: translateY(-55vh) translateX(34px); } 100% { transform: translateY(-116vh) translateX(-24px); opacity: 0; } }
@keyframes cursorFade { to { transform: translateY(-18px) scale(0); opacity: 0; } }
@keyframes popHeart { 0% { transform: translateY(0) scale(.2) rotate(0deg); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-130px) scale(1.2) rotate(24deg); opacity: 0; } }

@media (max-width: 760px) {
  .garden-card.wide { grid-column: span 1; }
  .garden-card.tall { min-height: 300px; }
  .flip-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .lovebot-title span { width: clamp(3.7rem, 20vw, 5.8rem); }
}