/* assets/css/gradient-text.css - Universal Gradient Text Motion Controller
   Glitch-free, center-aligned, one-time luxury reveal with single-pass light sweep */

.gradient-headline,
[data-gradient-text] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  color: #1a1a1a;
  box-sizing: border-box;
  filter: none !important;
  -webkit-filter: none !important;
  font-weight: 500 !important;
}

/* Word wrapper to preserve natural word spacing and avoid awkward mid-word breaks */
.gradient-headline .word,
[data-gradient-text] .word {
  display: inline-block;
  white-space: nowrap;
}

/* Individual letter spans:
   Initial state: Clean opacity 0, gentle vertical offset.
   CRITICAL: No blur filter or parent background-clip during transform to avoid Chromium compositor letter-stacking glitch */
.gradient-headline .letter,
[data-gradient-text] .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  color: inherit;
  transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 32ms);
}

/* Phase 1: is-lit -> Letters arrive sequentially into place */
.gradient-headline.is-lit .letter,
[data-gradient-text].is-lit .letter {
  opacity: 1;
  transform: translateY(0);
}

/* Phase 2: is-clipped -> Handover to metallic luxury gradient
   Applied ONLY after letters have reached their final positions */
.gradient-headline.is-clipped,
[data-gradient-text].is-clipped {
  background-image: linear-gradient(135deg, #1a1a1a 0%, #80451d 38%, #b37346 55%, #1a1a1a 80%, #80451d 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-headline.is-clipped .letter,
[data-gradient-text].is-clipped .letter {
  display: inline !important;
  transform: none !important;
  opacity: 1 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  transition: color 500ms ease !important;
  transition-delay: 0s !important;
}

/* Phase 3: is-sweeping -> Single-pass elegant light sweep across gradient (runs once) */
.gradient-headline.is-sweeping,
[data-gradient-text].is-sweeping {
  background-image: 
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%),
    linear-gradient(135deg, #1a1a1a 0%, #80451d 38%, #b37346 55%, #1a1a1a 80%, #80451d 100%);
  background-size: 250% 100%, 200% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: lightSweepOnce 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lightSweepOnce {
  0% {
    background-position: 100% 0, 100% 0;
  }
  100% {
    background-position: -80% 0, 0% 0;
  }
}

/* Sublines associated with gradient headings */
.gradient-subline,
[data-gradient-subline] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.gradient-subline.is-revealed,
[data-gradient-subline].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Dark theme support for hero banner */
.cinematic-hero-section .gradient-headline,
.gradient-headline.is-dark,
[data-gradient-text].is-dark {
  color: #ffffff;
}

.cinematic-hero-section .gradient-headline .letter,
.gradient-headline.is-dark .letter,
[data-gradient-text].is-dark .letter {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.cinematic-hero-section .gradient-headline.is-clipped,
.gradient-headline.is-dark.is-clipped,
[data-gradient-text].is-dark.is-clipped {
  background-image: linear-gradient(135deg, #ffffff 0%, #f7dfcb 36%, #ffffff 62%, #c49a7a 85%, #ffffff 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cinematic-hero-section .gradient-headline.is-sweeping,
.gradient-headline.is-dark.is-sweeping,
[data-gradient-text].is-dark.is-sweeping {
  background-image: 
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f7dfcb 36%, #ffffff 62%, #c49a7a 85%, #ffffff 100%);
  background-size: 250% 100%, 200% 100%;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Phase 4: is-solidified -> Permanent, rock-solid, ultra-crisp typography after sweep */
.gradient-headline.is-solidified,
[data-gradient-text].is-solidified {
  animation: none !important;
  background-image: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: #1a1a1a !important;
}

.gradient-headline.is-solidified .letter,
[data-gradient-text].is-solidified .letter {
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  text-shadow: none !important;
}

/* Dark theme / Hero final state: Crisp radiant white with luxury warm glow */
.cinematic-hero-section .gradient-headline.is-solidified,
.cinematic-hero-section .gradient-headline.is-solidified .letter,
.gradient-headline.is-dark.is-solidified,
.gradient-headline.is-dark.is-solidified .letter,
[data-gradient-text].is-dark.is-solidified,
[data-gradient-text].is-dark.is-solidified .letter {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.85), 0 0 40px rgba(243, 186, 142, 0.35) !important;
}

/* Overview section final state: Rich espresso bronze */
.orbis-legacy .gradient-headline.is-solidified,
.orbis-legacy .gradient-headline.is-solidified .letter {
  color: #2c160a !important;
  -webkit-text-fill-color: #2c160a !important;
  text-shadow: none !important;
}

/* Prefers Reduced Motion: Immediately show final styled text without motion */
@media (prefers-reduced-motion: reduce) {
  .gradient-headline,
  [data-gradient-text] {
    background-image: linear-gradient(135deg, #1a1a1a 0%, #80451d 38%, #b37346 55%, #1a1a1a 80%, #80451d 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: none !important;
  }
  .cinematic-hero-section .gradient-headline,
  .gradient-headline.is-dark,
  [data-gradient-text].is-dark {
    background-image: linear-gradient(135deg, #ffffff 0%, #f7dfcb 36%, #ffffff 62%, #c49a7a 85%, #ffffff 100%) !important;
  }
  .gradient-headline .letter,
  [data-gradient-text] .letter {
    opacity: 1 !important;
    transform: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    transition: none !important;
  }
  .gradient-subline,
  [data-gradient-subline] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}