/* ========================================
   Base Styles — Typography & Global
   ======================================== */

/* ---------- Floating Petals ---------- */
#main {
  position: relative;
  overflow: hidden;
}

.petals-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.petal {
  position: absolute;
  top: -80px;
  opacity: 0;
  will-change: transform, opacity;
}

/* Realistic lotus petal via inline SVG */
.petal__shape {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Petal 1 — wide lotus petal, soft pink */
.petal--rose .petal__shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Cdefs%3E%3ClinearGradient id='r1' x1='0' y1='0' x2='0.5' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f0c4d4'/%3E%3Cstop offset='40%25' stop-color='%23e8a0be'/%3E%3Cstop offset='100%25' stop-color='%23d47a9e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 2 C55 10, 75 35, 78 60 C80 80, 65 110, 40 118 C15 110, 0 80, 2 60 C5 35, 25 10, 40 2Z' fill='url(%23r1)' opacity='0.85'/%3E%3Cpath d='M40 15 C42 40, 43 70, 40 110' stroke='%23c97a9e' stroke-width='0.7' fill='none' opacity='0.4'/%3E%3Cpath d='M30 30 C35 50, 38 65, 38 85' stroke='%23c97a9e' stroke-width='0.4' fill='none' opacity='0.25'/%3E%3Cpath d='M50 30 C45 50, 42 65, 42 85' stroke='%23c97a9e' stroke-width='0.4' fill='none' opacity='0.25'/%3E%3C/svg%3E");
}

/* Petal 2 — narrow elegant lotus petal, lavender */
.petal--lavender .petal__shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 130'%3E%3Cdefs%3E%3ClinearGradient id='l1' x1='0.2' y1='0' x2='0.8' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ddd0f0'/%3E%3Cstop offset='45%25' stop-color='%23c4aee0'/%3E%3Cstop offset='100%25' stop-color='%23a088c8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 2 C45 15, 57 45, 58 70 C58 95, 45 120, 30 128 C15 120, 2 95, 2 70 C3 45, 15 15, 30 2Z' fill='url(%23l1)' opacity='0.8'/%3E%3Cpath d='M30 12 C31 45, 31 75, 30 120' stroke='%239878b8' stroke-width='0.6' fill='none' opacity='0.35'/%3E%3Cpath d='M22 35 C26 55, 28 75, 29 95' stroke='%239878b8' stroke-width='0.35' fill='none' opacity='0.2'/%3E%3Cpath d='M38 35 C34 55, 32 75, 31 95' stroke='%239878b8' stroke-width='0.35' fill='none' opacity='0.2'/%3E%3C/svg%3E");
}

/* Petal 3 — rounded lotus petal, blush with highlight */
.petal--blush .petal__shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 110'%3E%3Cdefs%3E%3ClinearGradient id='b1' x1='0' y1='0.2' x2='1' y2='0.8'%3E%3Cstop offset='0%25' stop-color='%23f5dae0'/%3E%3Cstop offset='50%25' stop-color='%23e8b8c8'/%3E%3Cstop offset='100%25' stop-color='%23d899ae'/%3E%3C/linearGradient%3E%3CradialGradient id='b2' cx='0.5' cy='0.3' r='0.5'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M45 2 C65 12, 85 40, 88 65 C90 85, 70 105, 45 108 C20 105, 0 85, 2 65 C5 40, 25 12, 45 2Z' fill='url(%23b1)' opacity='0.85'/%3E%3Cpath d='M45 2 C65 12, 85 40, 88 65 C90 85, 70 105, 45 108 C20 105, 0 85, 2 65 C5 40, 25 12, 45 2Z' fill='url(%23b2)'/%3E%3Cpath d='M45 14 C46 40, 46 70, 45 100' stroke='%23c08898' stroke-width='0.6' fill='none' opacity='0.3'/%3E%3C/svg%3E");
}

/* Petal 4 — pointed lotus petal, soft gold */
.petal--gold .petal__shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 130'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0.3' y1='0' x2='0.7' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f0e4c8'/%3E%3Cstop offset='50%25' stop-color='%23e0cfa0'/%3E%3Cstop offset='100%25' stop-color='%23c9b478'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M28 2 C40 18, 52 50, 53 75 C54 100, 42 122, 28 128 C14 122, 2 100, 3 75 C4 50, 16 18, 28 2Z' fill='url(%23g1)' opacity='0.8'/%3E%3Cpath d='M28 10 C29 45, 29 80, 28 120' stroke='%23a89868' stroke-width='0.6' fill='none' opacity='0.3'/%3E%3Cpath d='M20 40 C24 60, 26 80, 27 100' stroke='%23a89868' stroke-width='0.3' fill='none' opacity='0.2'/%3E%3Cpath d='M36 40 C32 60, 30 80, 29 100' stroke='%23a89868' stroke-width='0.3' fill='none' opacity='0.2'/%3E%3C/svg%3E");
}

/* Petal 5 — wide ivory lotus petal with sheen */
.petal--ivory .petal__shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85 105'%3E%3Cdefs%3E%3ClinearGradient id='i1' x1='0.2' y1='0' x2='0.5' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f8f0e8'/%3E%3Cstop offset='50%25' stop-color='%23ece0d0'/%3E%3Cstop offset='100%25' stop-color='%23ddd0c0'/%3E%3C/linearGradient%3E%3CradialGradient id='i2' cx='0.4' cy='0.25' r='0.4'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M42 2 C60 10, 80 35, 83 58 C85 78, 68 98, 42 103 C16 98, 0 78, 2 58 C5 35, 24 10, 42 2Z' fill='url(%23i1)' opacity='0.85'/%3E%3Cpath d='M42 2 C60 10, 80 35, 83 58 C85 78, 68 98, 42 103 C16 98, 0 78, 2 58 C5 35, 24 10, 42 2Z' fill='url(%23i2)'/%3E%3Cpath d='M42 12 C43 40, 43 65, 42 95' stroke='%23bbb0a0' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E");
}

/* Fall + sway animation */
@keyframes petalFall {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg) scale(0.8); }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(calc(100vh + 80px)) translateX(var(--drift)) rotate(var(--spin)) scale(1); }
}

.petal--falling {
  animation: petalFall var(--duration) var(--delay) ease-in-out forwards;
}

/* Smaller petals on mobile */
@media (max-width: 768px) {
  .petal { transform: scale(0.7); }
  .vfx-particle { transform: scale(0.7); }
}

/* ---------- Snowfall ❄ ---------- */
.vfx-snow {
  position: absolute;
  top: -20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, #e8eaf0);
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
}
@keyframes snowFall {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(calc(100vh + 40px)) translateX(var(--drift)) rotate(var(--spin)); }
}
.vfx-snow--falling {
  animation: snowFall var(--duration) var(--delay) ease-in forwards;
}

/* ---------- Golden Sparkles ✨ ---------- */
.vfx-sparkle {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.vfx-sparkle__shape {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='sg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23fff9e6'/%3E%3Cstop offset='40%25' stop-color='%23ffd700'/%3E%3Cstop offset='100%25' stop-color='%23b8860b' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 0 L23 15 L40 20 L23 25 L20 40 L17 25 L0 20 L17 15Z' fill='url(%23sg)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
@keyframes sparklePulse {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  20%  { opacity: 1; transform: scale(1.2) rotate(30deg); }
  50%  { opacity: 0.8; transform: scale(0.8) rotate(60deg); }
  70%  { opacity: 1; transform: scale(1) rotate(90deg); }
  100% { opacity: 0; transform: scale(0) rotate(120deg); }
}
.vfx-sparkle--active {
  animation: sparklePulse var(--duration) var(--delay) ease-in-out forwards;
}

/* ---------- Confetti 🎉 ---------- */
.vfx-confetti {
  position: absolute;
  top: -20px;
  opacity: 0;
  will-change: transform, opacity;
}
.vfx-confetti__shape {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
@keyframes confettiFall {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotateX(0) rotateY(0) rotateZ(0); }
  8%   { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(calc(100vh + 30px)) translateX(var(--drift)) rotateX(var(--spinX)) rotateY(var(--spinY)) rotateZ(var(--spinZ)); }
}
.vfx-confetti--falling {
  animation: confettiFall var(--duration) var(--delay) ease-in forwards;
}

/* ---------- Fireflies 🔥 ---------- */
.vfx-firefly {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 0 8px 3px rgba(255, 220, 80, 0.4);
}
@keyframes fireflyFloat {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15%  { opacity: 0.9; }
  30%  { opacity: 0.3; transform: translate(var(--dx1), var(--dy1)) scale(1); }
  50%  { opacity: 1; transform: translate(var(--dx2), var(--dy2)) scale(0.7); }
  70%  { opacity: 0.4; transform: translate(var(--dx3), var(--dy3)) scale(1.1); }
  85%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx4), var(--dy4)) scale(0.3); }
}
.vfx-firefly--active {
  animation: fireflyFloat var(--duration) var(--delay) ease-in-out forwards;
}

/* ---------- Floating Bubbles 🫧 ---------- */
.vfx-bubble {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), rgba(200,220,240,0.15) 50%, rgba(180,200,230,0.05));
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 -4px 8px rgba(200,220,255,0.15), 0 0 6px rgba(200,220,255,0.1);
}
@keyframes bubbleRise {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.6); }
  10%  { opacity: 0.7; }
  50%  { transform: translateY(calc(-50vh)) translateX(var(--drift)) scale(1); }
  90%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(calc(-100vh - 60px)) translateX(calc(var(--drift) * 1.5)) scale(1.1); }
}
.vfx-bubble--rising {
  animation: bubbleRise var(--duration) var(--delay) ease-out forwards;
}

/* ---------- Typography ---------- */
h1 {
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--lg {
  max-width: var(--container-lg);
}

/* ---------- Section ---------- */
.section {
  padding-top: var(--sp-3xl);
  padding-bottom: var(--sp-3xl);
}

.section--alt {
  background-color: var(--clr-bg-alt);
}

/* ---------- Section Header ---------- */
.section__header {
  text-align: center;
  margin-bottom: var(--sp-2xl);
}

.section__label {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: var(--sp-sm);
}

.section__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-md);
}

.section__subtitle {
  font-size: var(--fs-base);
  color: var(--clr-text-muted);
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--lh-relaxed);
}

/* ---------- Gold Divider ---------- */
.divider-gold {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--clr-gold);
  margin: var(--sp-md) auto;
  border: none;
}

.divider-gold--left {
  margin-left: 0;
}

/* ---------- Decorative Ornament ---------- */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.ornament__line {
  width: 40px;
  height: 1px;
  background: var(--clr-gold);
}

.ornament__diamond {
  width: 8px;
  height: 8px;
  border: 1px solid var(--clr-gold);
  transform: rotate(45deg);
}

/* ---------- Links ---------- */
.link {
  position: relative;
  font-weight: var(--fw-medium);
  transition: color var(--duration-fast) var(--easing);
}

.link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--clr-primary);
  transition: width var(--duration-normal) var(--easing);
}

.link:hover::after {
  width: 100%;
}

.link:hover {
  color: var(--clr-primary);
}

/* ---------- Selection ---------- */
::selection {
  background-color: var(--clr-primary);
  color: white;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--clr-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--clr-primary-light);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-primary);
}

/* ---------- Skip Link (Accessibility) ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-md);
  padding: var(--sp-xs) var(--sp-md);
  background: var(--clr-primary);
  color: white;
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
  font-size: var(--fs-sm);
  transition: top var(--duration-fast) var(--easing);
}

.skip-link:focus {
  top: var(--sp-md);
}

/* ---------- Desktop Typography Scale ---------- */
@media (min-width: 768px) {
  h1 {
    font-size: var(--fs-4xl);
  }

  h2 {
    font-size: var(--fs-3xl);
  }

  h3 {
    font-size: var(--fs-xl);
  }

  .section__title {
    font-size: var(--fs-3xl);
  }

  .section {
    padding-top: var(--sp-4xl);
    padding-bottom: var(--sp-4xl);
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--fs-5xl);
  }

  .container {
    --container-pad: 2rem;
  }

  .section {
    padding-top: var(--sp-5xl);
    padding-bottom: var(--sp-5xl);
  }
}