/**
 * =============================================================================
 * SECTION 1: THE MULTILINGUAL TYPOGRAPHIC HEART (HERO)
 * Exactly reproduces the iconic Love Heart aesthetic from user's reference:
 * - Pure pitch-black background
 * - Glowing fiery coral-red typographic rows
 * - Dual lobes at top with distinct center cleft
 * - Continuous wide chest tapering to triangular tip
 * =============================================================================
 */

.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #FF3B30;
  padding: 40px 16px 60px 16px;
  overflow: hidden;
  z-index: 10;
}

/* Hero Header Branding */
.hero-header-block {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: 28px;
}

.hero-sub-eyebrow {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #D4A359;
  margin-bottom: 6px;
  opacity: 0.85;
}

/* Beautiful Romantic Font for Dugyala Sanju Sri */
.hero-main-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  color: #FFF2E6;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-shadow: 
    0 0 20px rgba(255, 77, 46, 0.45),
    0 0 40px rgba(212, 163, 89, 0.25);
  margin-bottom: 0;
}

/* =============================================================================
 * THE EXACT LOVE HEART CONTAINER (MATCHING REFERENCE IMAGE)
 * ============================================================================= */
.love-heart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(96vw, 760px);
  margin: 0 auto;
  user-select: none;
  animation: heartSubtleBeat 2.8s ease-in-out infinite;
}

@keyframes heartSubtleBeat {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(255, 59, 48, 0.55));
  }
  50% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 22px rgba(255, 59, 48, 0.85));
  }
}

.love-heart-row {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.35;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(9px, 1.35vw, 12.8px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FF3B30;
  text-shadow: 
    0 0 8px rgba(255, 59, 48, 0.8),
    0 0 16px rgba(255, 69, 58, 0.4);
  white-space: nowrap;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.love-heart-row:hover {
  transform: scale(1.025);
  text-shadow: 
    0 0 12px rgba(255, 59, 48, 1),
    0 0 24px rgba(255, 110, 80, 0.8);
}

/* Dual Lobes at Top */
.love-heart-row.is-lobes {
  width: 100%;
  display: flex;
  justify-content: center;
}

.heart-lobe {
  display: flex;
  align-items: center;
}

.lobe-left {
  justify-content: flex-end;
  text-align: right;
}

.lobe-right {
  justify-content: flex-start;
  text-align: left;
}

/* Controlled Gap between the Two Top Lobes */
.row-1 .heart-lobe-gap { width: clamp(80px, 15vw, 150px); }
.row-2 .heart-lobe-gap { width: clamp(65px, 12vw, 120px); }
.row-3 .heart-lobe-gap { width: clamp(45px, 9vw, 90px); }
.row-4 .heart-lobe-gap { width: clamp(28px, 6vw, 60px); }
.row-5 .heart-lobe-gap { width: clamp(14px, 3vw, 30px); }

/* Central Hero Row Highlight */
.is-hero-row {
  font-size: clamp(9.5px, 1.45vw, 13.5px);
}

.hero-name-highlight {
  color: #FF9E6D;
  text-shadow: 
    0 0 10px rgba(255, 158, 109, 0.9),
    0 0 20px rgba(255, 77, 46, 0.7);
  font-weight: 700;
}

.heart-phrase {
  display: inline-block;
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.18s ease;
  padding: 1px 2px;
  border-radius: 3px;
}

.heart-phrase:hover,
.heart-phrase:focus-visible {
  color: #FFFFFF;
  text-shadow: 
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 24px rgba(255, 77, 46, 0.95),
    0 0 36px rgba(212, 163, 89, 0.8);
  transform: scale(1.18);
  z-index: 50;
  outline: none;
}

/* Floating Heart Adoration Tooltip Card */
.heart-adoration-tooltip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: rgba(18, 14, 15, 0.96);
  border: 1px solid rgba(255, 110, 80, 0.45);
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(255, 77, 46, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  width: min(340px, 86vw);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.heart-adoration-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tooltip-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(255, 158, 109, 0.3);
  padding-bottom: 5px;
}

.tooltip-lang-badge {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D4A359;
}

.tooltip-script-tag {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.64rem;
  color: #FFAAA6;
  opacity: 0.85;
}

.tooltip-name-display {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFF2E6;
  text-shadow: 0 0 12px rgba(255, 77, 46, 0.6);
  margin-bottom: 6px;
  line-height: 1.3;
}

.tooltip-quote-native {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #FFB2BA;
  line-height: 1.45;
  margin-bottom: 6px;
}

.tooltip-quote-english {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  color: #D6CCC0;
  line-height: 1.45;
  opacity: 0.95;
}

/* Scroll Down Button */
.hero-scroll-cue {
  margin-top: 36px;
  z-index: 10;
}

.scroll-cue-btn {
  background: transparent;
  border: 1px solid rgba(255, 59, 48, 0.35);
  color: #FF9E6D;
  border-radius: 9999px;
  padding: 8px 20px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.scroll-cue-btn:hover {
  border-color: #FF3B30;
  background: rgba(255, 59, 48, 0.12);
  color: #FFFFFF;
  transform: translateY(2px);
}

.scroll-cue-arrow {
  font-size: 0.85rem;
  animation: bounceDown 1.8s ease-in-out infinite;
}

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