/* =============================================
   PERFORMANCE.CSS
   GPU acceleration, alignment fixes, optimized
   animations for all devices
   ============================================= */

/* ── Contain paint/layout to reduce reflow ── */
#main-site,
#intro-scene {
  contain: layout style;
}

section {
  contain: layout;
}

/* ── GPU-promote animated layers ── */
#particle-canvas,
#particle-canvas-intro,
#finale-canvas,
#falling-petals,
#floating-orbs,
.cinematic-vignette,
.orb {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* ── Throttle will-change to only critical elements ── */
.hero-flower {
  will-change: transform;
}
.heart-pulse {
  will-change: transform;
}

/* ── Drop expensive glow on hover for low-end (class added by JS) ── */
body.perf-low .reason-card:hover,
body.perf-low .gallery-card:hover {
  animation: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

body.perf-low .glass {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

body.perf-low .gf-bloom {
  filter: none !important;
}

body.perf-mid .glass {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Optimized scrolling ── */
html {
  scroll-behavior: auto; /* Lenis handles smooth scroll */
}

* {
  /* Prevent tap highlight flash on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* =============================================
   ALIGNMENT & TYPOGRAPHY FIXES
   ============================================= */

/* ── Universal centering wrapper ── */
.section-inner {
  max-width: 1100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
  box-sizing: border-box;
}

/* ── Hero — perfectly centered on all screens ── */
#hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.hero-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-eyebrow,
.hero-title,
.hero-sub,
.hero-flowers,
.scroll-btn {
  text-align: center;
  align-self: center;
  width: 100%;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-title .line1,
.hero-title .line2 {
  display: block;
  text-align: center;
  width: 100%;
}

.hero-sub {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Section headings — enforced center ── */
.section-eyebrow,
.section-title,
.msg-label,
.msg-title,
.msg-body,
.msg-signature,
.finale-eyebrow,
.finale-title,
.finale-body,
.finale-sig,
.garden-note,
.gallery-note {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Message card inner balance ── */
.message-card {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 60px 50px;
}

.msg-body {
  max-width: 620px;
}

/* ── Reasons grid — center-aligned headings ── */
.reasons-grid {
  justify-items: center;
}

.reason-card {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Garden — centered ── */
.flower-garden {
  justify-content: center !important;
  align-items: flex-end !important;
}

/* ── Gallery grid center ── */
.gallery-grid {
  margin-left: auto;
  margin-right: auto;
}

/* ── Finale inner — perfect centering ── */
.finale-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.finale-flowers {
  justify-content: center !important;
}

.finale-body {
  max-width: 620px;
}

/* ── Footer centered ── */
footer {
  text-align: center;
}

/* ── Section separators — perfectly centered ── */
section + section::before {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =============================================
   SPACING CONSISTENCY SYSTEM
   ============================================= */

:root {
  --space-xs:  8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;
}

section {
  padding: var(--space-xl) var(--space-md);
}

/* =============================================
   ANIMATION OPTIMIZATION
   ============================================= */

/* Use transform-only animations (no layout thrash) */
@keyframes fade-up-optimized {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Cheaper heartbeat using only transform */
@keyframes heartbeat-optimized {
  0%,100% { transform: scale3d(1, 1, 1); }
  14%     { transform: scale3d(1.18, 1.18, 1); }
  28%     { transform: scale3d(1, 1, 1); }
  42%     { transform: scale3d(1.10, 1.10, 1); }
  56%     { transform: scale3d(1, 1, 1); }
}

.heart-pulse {
  animation: heartbeat-optimized 1.5s ease-in-out infinite !important;
}

/* Cheaper spin using only transform */
@keyframes spin-slow-optimized {
  from { transform: rotate3d(0, 0, 1, 0deg); }
  to   { transform: rotate3d(0, 0, 1, 360deg); }
}

.hero-flower {
  animation: spin-slow-optimized 14s linear infinite !important;
}

/* Cheaper float — only transform, no layout */
@keyframes float-flower-optimized {
  0%,100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50%     { transform: translate3d(0, -10px, 0) rotate(4deg); }
}

.inline-flower,
.ff {
  animation: float-flower-optimized 3s ease-in-out infinite !important;
}

.inline-flower.delay1 { animation-delay: 0.5s !important; }
.inline-flower.delay2 { animation-delay: 1s !important; }
.ff.delay1 { animation-delay: 0.3s !important; }
.ff.delay2 { animation-delay: 0.6s !important; }
.ff.delay3 { animation-delay: 0.9s !important; }
.ff.delay4 { animation-delay: 1.2s !important; }

/* Optimized reason-icon float */
.reason-icon {
  animation: float-flower-optimized 4s ease-in-out infinite !important;
}

/* Faster, cheaper sway for garden flowers */
@keyframes sway-optimized {
  0%,100% { transform: rotate3d(0, 0, 1, -4deg); }
  50%     { transform: rotate3d(0, 0, 1, 4deg); }
}

.gf-bloom {
  animation: sway-optimized 3s ease-in-out infinite !important;
}
.garden-flower:nth-child(odd)  .gf-bloom { animation-delay: 0.5s !important; }
.garden-flower:nth-child(3)    .gf-bloom { animation-delay: 1s !important; }
.garden-flower:nth-child(5)    .gf-bloom { animation-delay: 1.5s !important; }

/* Smooth hover for garden — no jank */
.garden-flower:hover .gf-bloom {
  transform: scale3d(1.28, 1.28, 1) rotate3d(0, 0, 1, 0deg) !important;
  filter: drop-shadow(0 6px 20px rgba(200,80,120,0.5));
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              filter 0.35s ease;
}

/* Reveal cards — GPU-only animation */
.reveal-card {
  transform: translate3d(0, 36px, 0);
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-card.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Bounce arrow — transform only */
@keyframes bounce-arrow-optimized {
  0%,100% { transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(0, 7px, 0); }
}
.scroll-arrow {
  animation: bounce-arrow-optimized 2s ease-in-out infinite !important;
}

/* =============================================
   RESPONSIVE ALIGNMENT FIXES
   ============================================= */

@media (max-width: 1024px) {
  .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .message-card {
    padding: 50px 36px;
  }
}

@media (max-width: 768px) {
  .section-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-content {
    padding: 0 16px;
  }

  .message-card {
    padding: 40px 24px;
  }

  .reasons-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .flower-garden {
    gap: 12px;
  }

  .finale-body {
    max-width: 100%;
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  section {
    padding: 60px 16px;
  }

  .hero-title {
    font-size: clamp(2.4rem, 11vw, 3.5rem) !important;
  }

  .section-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
  }

  .message-card {
    padding: 32px 18px;
    border-radius: 16px;
  }

  .msg-title {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
  }

  .finale-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
}

/* =============================================
   SCROLL PERFORMANCE
   ============================================= */

/* Promote scrollable area to its own compositor layer */
#main-site {
  transform: translate3d(0, 0, 0);
}

/* Fixed elements — ensure on their own layers */
#particle-canvas,
.cinematic-vignette,
#falling-petals,
#floating-orbs {
  will-change: auto; /* only add will-change where needed */
}