/**
 * za-animated-titles.css
 * ZA Framework Addon — Animated Section Titles  (Neonglass build, light-bg)
 *
 * FILE: assets/css/addons/za-animated-titles.css
 *
 * BACKGROUND TARGET: #F5F5F5 (or any near-white surface).
 *
 * Design language note:
 *   "Neon" requires a dark canvas — nothing painted can be brighter than a
 *   light background. On #F5F5F5, the visual language shifts from glowing
 *   neon to "polished metallic with shimmer". Same warm palette family;
 *   depth comes from darker tones and shadow layering, the "glass" feel
 *   comes from the moving gradient transitions.
 *
 * Architecture (unchanged from prior versions):
 *   The JS controller writes three CSS custom properties on .za-title
 *   (--za-at-py, --za-at-rx, --za-at-ry) inside an rAF write pass.
 *   .za-char children are inserted by JS; their entrance is pure CSS.
 *
 * Why the gradient lives on .za-char (not on .za-title):
 *   background-clip: text clips the parent's gradient to LAYOUT positions
 *   of text, not post-transform positions. Putting the gradient on each
 *   char ties gradient → char so they move together. They all run the
 *   same animation in sync, so the eye reads one continuous moving
 *   gradient across the whole title.
 *
 * Performance:
 *   - background-position is a paint-only animation (cheap).
 *   - Animations gated by .za-active — off-screen titles do zero work.
 *   - filter: drop-shadow is GPU-accelerated. Idle titles get a lighter
 *     filter; .za-active titles get the full layered shadow.
 */

/* ── PERSPECTIVE WRAPPER ────────────────────────────────────── */
.za-title-wrap {
  perspective:        1200px;
  perspective-origin: 50% 50%;
}

.elementor-widget-html .za-title-wrap {
  display: block;
}

/* ── TITLE — receives parallax (Y) + tilt (rX, rY) ──────────
   Three CSS vars are written by the JS rAF write pass.
   ──────────────────────────────────────────────────────────── */
.za-title {
  --za-at-py: 0px;
  --za-at-rx: 0deg;
  --za-at-ry: 0deg;

  display:        inline-block;
  position:       relative;
  margin:         0                                            !important;

  font-family:    'Plus Jakarta Sans', 'Inter', sans-serif     !important;
  font-weight:    800                                          !important;
  /* Fluid clamp — 1.75rem on small phones, 3.25rem max ≥ ~1366px viewport. */
  font-size:      clamp(1.75rem, 0.85rem + 3vw, 3.25rem)       !important;
  line-height:    1.12                                         !important;
  letter-spacing: -0.015em                                     !important;
  text-align:     left                                         !important;

  /* Color is set on .za-char via clipped gradient. Title itself transparent. */
  color:                  transparent                          !important;
  -webkit-text-fill-color: transparent                         !important;

  transform:
    translate3d(0, var(--za-at-py), 0)
    rotateX(var(--za-at-rx))
    rotateY(var(--za-at-ry));
  transform-style: preserve-3d;
  transition: transform 0.12s linear, filter 0.4s ease;

  overflow:       hidden;
  padding-bottom: 0.14em;

  /* Idle (off-screen) shadow — minimal, dark-warm depth only.
     On light bg we LIFT the title rather than glow around it. */
  filter:
    drop-shadow(0 1px 2px rgba(80, 25, 0, 0.22))
    drop-shadow(0 2px 6px rgba(80, 25, 0, 0.14));
}

/* In-viewport titles: layered depth + low-alpha amber wash.
   The wash tints a soft area around the title without bleaching the bg. */
.za-title.za-active {
  will-change: transform, filter;
  filter:
    drop-shadow(0 2px 4px  rgba(80, 25, 0, 0.30))
    drop-shadow(0 4px 10px rgba(80, 25, 0, 0.18))
    drop-shadow(0 0 22px   rgba(217, 119, 6, 0.22));
}

/* ── CHARACTERS — metallic copper/amber gradient + entrance ───
   Each char carries the gradient; all chars share the same animation
   and read as one continuous moving gradient.

   Palette: every stop sits below ~30% luminance so the title reads
   against #F5F5F5. Peak (#D97706, amber-600) hits the 3:1 contrast
   threshold for large display text — minimum WCAG AA for 24px+ bold.
   ──────────────────────────────────────────────────────────── */
.za-char {
  display:    inline-block;

  background-image: linear-gradient(
    100deg,
    #7C2D12  0%,    /* burnt umber — deepest anchor (~17:1 contrast) */
    #9A3412 20%,    /* dark rust */
    #C2410C 40%,    /* rust orange — main body */
    #D97706 50%,    /* amber peak — the "shimmer" moment */
    #C2410C 60%,    /* rust orange */
    #9A3412 80%,    /* dark rust */
    #7C2D12 100%    /* burnt umber */
  );
  background-size:     220% auto;
  background-position: 0% center;

  -webkit-background-clip:  text;
          background-clip:  text;
  -webkit-text-fill-color:  transparent;
  color:                    transparent;

  /* Dark warm rim — gives the "metallic edge" feel on light bg.
     Sub-pixel + low-alpha so it doesn't read as an outline. */
  -webkit-text-stroke: 0.4px rgba(80, 25, 0, 0.18);

  /* Entrance — translate from below the mask. */
  transform: translate3d(0, 110%, 0);
  opacity:   0;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.6s ease;

  /* Gradient flow. Paused by default — only runs while title is in view. */
  animation: zaTitleNeonShift 5s linear infinite;
  animation-play-state: paused;
}

/* Whitespace nodes render flat — transforming them breaks line wrap. */
.za-char--space {
  background-image:    none;
  -webkit-text-stroke: 0;
  transform:           none;
  opacity:             1;
  transition:          none;
  animation:           none;
}

/* Run the gradient flow only when the title is actually visible. */
.za-title.za-active .za-char {
  animation-play-state: running;
}

/* Entrance fires when the IO adds .za-in. */
.za-title.za-in .za-char {
  transform: translate3d(0, 0, 0);
  opacity:   1;
}

@keyframes zaTitleNeonShift {
  0%   { background-position:    0% center; }
  100% { background-position: -220% center; }
}

/* ── ACCENT SPAN — optional emphasis phrase ─────────────────
   Authors mark a phrase with <span>...</span> inside data-za-title.
   Slightly lighter and more gold-leaning than the base — distinct
   without losing legibility against #F5F5F5.
   ──────────────────────────────────────────────────────────── */
.za-accent {
  display: inline;
}

.za-accent .za-char {
  background-image: linear-gradient(
    100deg,
    #92400E  0%,
    #C2410C 25%,
    #D97706 50%,    /* amber peak — same readable threshold */
    #C2410C 75%,
    #92400E 100%
  );
  -webkit-text-stroke: 0.4px rgba(100, 30, 0, 0.20);
}

/* ── MOBILE BRANCH — lighter ──────────────────────────────── */
@media (pointer: coarse) {
  .za-title {
    filter:
      drop-shadow(0 1px 2px rgba(80, 25, 0, 0.24))
      drop-shadow(0 2px 4px rgba(80, 25, 0, 0.14));
  }
  .za-title.za-active {
    filter:
      drop-shadow(0 2px 3px rgba(80, 25, 0, 0.28))
      drop-shadow(0 3px 6px rgba(80, 25, 0, 0.18));
  }
  .za-char {
    transition-delay:    0s !important;
    animation-duration:  7s;
    -webkit-text-stroke: 0; /* fuzzes on small text — drop on mobile */
  }
  .za-accent .za-char {
    -webkit-text-stroke: 0;
  }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .za-title {
    --za-at-py: 0px  !important;
    --za-at-rx: 0deg !important;
    --za-at-ry: 0deg !important;
    transition: none !important;
  }
  .za-char {
    transform:           none    !important;
    opacity:             1       !important;
    transition:          none    !important;
    animation:           none    !important;
    background-position: 50% center !important;
  }
}