/**
 * Text Reveal Animation Styles
 * Dr. Yıldız Digital Ecosystem
 * 
 * CSS styles for text splitting and reveal animations.
 * Requirements: 28.3
 * - Letter-by-letter reveal for hero headlines
 * - Word-by-word reveal for subheadlines
 * - Scroll-triggered animations
 */

/* ============================================
 * CSS CUSTOM PROPERTIES (DEFAULTS)
 * ============================================ */

:root {
  --text-reveal-duration: 0.5s;
  --text-reveal-stagger: 0.03s;
  --text-reveal-delay: 0s;
  --text-reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --text-reveal-distance: 100%;
  --text-reveal-blur: 4px;
}

/* ============================================
 * BASE TEXT REVEAL STYLES
 * ============================================ */

[data-text-reveal] {
  position: relative;
}

.text-reveal__wrapper {
  display: inline;
}

.text-reveal__wrapper--lines {
  display: block;
}

/* ============================================
 * LETTER REVEAL STYLES
 * ============================================ */

.text-reveal--letters .text-reveal__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--text-reveal-distance));
  filter: blur(var(--text-reveal-blur));
  transition: 
    opacity var(--reveal-duration, var(--text-reveal-duration)) var(--reveal-easing, var(--text-reveal-easing)),
    transform var(--reveal-duration, var(--text-reveal-duration)) var(--reveal-easing, var(--text-reveal-easing)),
    filter var(--reveal-duration, var(--text-reveal-duration)) var(--reveal-easing, var(--text-reveal-easing));
  transition-delay: calc(
    var(--reveal-delay, var(--text-reveal-delay)) + 
    (var(--char-index, 0) * var(--reveal-stagger, var(--text-reveal-stagger)))
  );
  will-change: opacity, transform, filter;
}

.text-reveal--letters .text-reveal__char--space {
  /* Spaces don't need animation */
  opacity: 1;
  transform: none;
  filter: none;
}

/* Revealed state for letters */
.text-reveal--letters.text-reveal--revealed .text-reveal__char {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ============================================
 * WORD REVEAL STYLES
 * ============================================ */

.text-reveal--words .text-reveal__word {
  display: inline-block;
  overflow: visible;
  vertical-align: bottom;
  padding-right: 0.05em;
}

.text-reveal--words .text-reveal__word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--text-reveal-distance));
  transition: 
    opacity var(--reveal-duration, var(--text-reveal-duration)) var(--reveal-easing, var(--text-reveal-easing)),
    transform var(--reveal-duration, var(--text-reveal-duration)) var(--reveal-easing, var(--text-reveal-easing));
  transition-delay: calc(
    var(--reveal-delay, var(--text-reveal-delay)) + 
    (var(--word-index, 0) * var(--reveal-stagger, 0.08s))
  );
  will-change: opacity, transform;
}

.text-reveal--words .text-reveal__space {
  display: inline;
}

/* Revealed state for words */
.text-reveal--words.text-reveal--revealed .text-reveal__word-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
 * LINE REVEAL STYLES
 * ============================================ */

.text-reveal--lines .text-reveal__line {
  display: block;
  overflow: hidden;
}

.text-reveal--lines .text-reveal__line-inner {
  display: block;
  opacity: 0;
  transform: translateY(var(--text-reveal-distance));
  transition: 
    opacity var(--reveal-duration, var(--text-reveal-duration)) var(--reveal-easing, var(--text-reveal-easing)),
    transform var(--reveal-duration, var(--text-reveal-duration)) var(--reveal-easing, var(--text-reveal-easing));
  transition-delay: calc(
    var(--reveal-delay, var(--text-reveal-delay)) + 
    (var(--line-index, 0) * var(--reveal-stagger, 0.15s))
  );
  will-change: opacity, transform;
}

/* Revealed state for lines */
.text-reveal--lines.text-reveal--revealed .text-reveal__line-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
 * HERO SLIDER TEXT REVEAL OVERRIDES
 * ============================================ */

.hero-slider__headline[data-text-reveal] {
  --text-reveal-distance: 120%;
  --text-reveal-blur: 6px;
}

.hero-slider__headline .text-reveal__char {
  /* Slightly longer duration for hero headlines */
  --reveal-duration: 0.6s;
}

.hero-slider__subheadline[data-text-reveal] {
  --text-reveal-distance: 100%;
}

.hero-slider__subheadline .text-reveal__word-inner {
  /* Slightly longer duration for subheadlines */
  --reveal-duration: 0.5s;
}

/* ============================================
 * SECTION HEADLINE REVEAL STYLES
 * ============================================ */

.section__title[data-text-reveal="words"] {
  --text-reveal-distance: 80%;
}

.section__subtitle[data-text-reveal="words"] {
  --text-reveal-distance: 60%;
  --text-reveal-stagger: 0.05s;
}

/* ============================================
 * ALTERNATIVE REVEAL ANIMATIONS
 * ============================================ */

/* Fade up reveal (default) */
[data-text-reveal][data-reveal-style="fade-up"] .text-reveal__char,
[data-text-reveal][data-reveal-style="fade-up"] .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="fade-up"] .text-reveal__line-inner {
  transform: translateY(var(--text-reveal-distance));
}

/* Fade down reveal */
[data-text-reveal][data-reveal-style="fade-down"] .text-reveal__char,
[data-text-reveal][data-reveal-style="fade-down"] .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="fade-down"] .text-reveal__line-inner {
  transform: translateY(calc(var(--text-reveal-distance) * -1));
}

/* Fade left reveal */
[data-text-reveal][data-reveal-style="fade-left"] .text-reveal__char,
[data-text-reveal][data-reveal-style="fade-left"] .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="fade-left"] .text-reveal__line-inner {
  transform: translateX(var(--text-reveal-distance));
}

/* Fade right reveal */
[data-text-reveal][data-reveal-style="fade-right"] .text-reveal__char,
[data-text-reveal][data-reveal-style="fade-right"] .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="fade-right"] .text-reveal__line-inner {
  transform: translateX(calc(var(--text-reveal-distance) * -1));
}

/* Scale reveal */
[data-text-reveal][data-reveal-style="scale"] .text-reveal__char,
[data-text-reveal][data-reveal-style="scale"] .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="scale"] .text-reveal__line-inner {
  transform: scale(0.8);
}

[data-text-reveal][data-reveal-style="scale"].text-reveal--revealed .text-reveal__char,
[data-text-reveal][data-reveal-style="scale"].text-reveal--revealed .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="scale"].text-reveal--revealed .text-reveal__line-inner {
  transform: scale(1);
}

/* Blur only reveal */
[data-text-reveal][data-reveal-style="blur"] .text-reveal__char,
[data-text-reveal][data-reveal-style="blur"] .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="blur"] .text-reveal__line-inner {
  transform: none;
  filter: blur(10px);
}

[data-text-reveal][data-reveal-style="blur"].text-reveal--revealed .text-reveal__char,
[data-text-reveal][data-reveal-style="blur"].text-reveal--revealed .text-reveal__word-inner,
[data-text-reveal][data-reveal-style="blur"].text-reveal--revealed .text-reveal__line-inner {
  filter: blur(0);
}

/* ============================================
 * REVEALING STATE (ANIMATION IN PROGRESS)
 * ============================================ */

.text-reveal--revealing {
  /* Ensure visibility during animation */
  visibility: visible !important;
}

/* ============================================
 * NO ANIMATION STATE (REDUCED MOTION)
 * ============================================ */

.text-reveal--no-animation,
.text-reveal--no-animation .text-reveal__char,
.text-reveal--no-animation .text-reveal__word-inner,
.text-reveal--no-animation .text-reveal__line-inner {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ============================================
 * MOBILE OPTIMIZATIONS
 * ============================================ */

@media (max-width: 767px) {
  /* Reduce animation complexity on mobile */
  .text-reveal--letters .text-reveal__char {
    filter: none;
    --text-reveal-blur: 0;
  }
  
  /* Faster animations on mobile */
  :root {
    --text-reveal-duration: 0.4s;
    --text-reveal-stagger: 0.02s;
  }
  
  .hero-slider__headline .text-reveal__char {
    --reveal-duration: 0.4s;
  }
  
  .hero-slider__subheadline .text-reveal__word-inner {
    --reveal-duration: 0.35s;
  }
}

/* ============================================
 * REDUCED MOTION PREFERENCES
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  [data-text-reveal],
  [data-text-reveal] .text-reveal__char,
  [data-text-reveal] .text-reveal__word-inner,
  [data-text-reveal] .text-reveal__line-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
 * GPU ACCELERATION
 * ============================================ */

.text-reveal__char,
.text-reveal__word-inner,
.text-reveal__line-inner {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
 * CURSOR STYLES FOR ANIMATED TEXT
 * ============================================ */

[data-text-reveal] {
  cursor: default;
}

/* ============================================
 * ACCESSIBILITY: SCREEN READER SUPPORT
 * ============================================ */

/* The wrapper is hidden from screen readers, 
   but the aria-label on the parent provides the full text */
.text-reveal__wrapper[aria-hidden="true"] {
  /* Visual presentation only */
}

/* Ensure the element itself is accessible */
[data-text-reveal][aria-label] {
  /* Screen readers will read the aria-label */
}