/* ════════════════════════════════════════════════════════════
   Animated Heading — YOOtheme Custom Element
   ════════════════════════════════════════════════════════════ */

/* ── Base lettere: invisibili finché non entra nel viewport ─ */
.ahe-heading .ahe-letter {
    display: inline-block;
    opacity: 0;
}

/* ── Accessibilità scramble ──────────────────────────────── */
.ahe-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Scramble: span costruiti via JS con opacity inline — nessun hiding CSS necessario */


/* ════════════════════════════════════════════════════════════
   TRIGGER: quando ahe-inview viene aggiunto dal scrollspy,
   si attiva l'animation-name corretto per ogni effetto.
   animation-duration e animation-delay vengono dagli stili
   inline di ogni <span> (impostati da template.php).
   ════════════════════════════════════════════════════════════ */

.ahe-effect-slide_left.ahe-inview .ahe-letter {
    animation-name: ahe-slide-left;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-slide_right.ahe-inview .ahe-letter {
    animation-name: ahe-slide-right;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-slide_bottom.ahe-inview .ahe-letter {
    animation-name: ahe-slide-bottom;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-slide_top.ahe-inview .ahe-letter {
    animation-name: ahe-slide-top;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-fade.ahe-inview .ahe-letter {
    animation-name: ahe-fade;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-scale.ahe-inview .ahe-letter {
    animation-name: ahe-scale;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-blur.ahe-inview .ahe-letter {
    animation-name: ahe-blur;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-wave.ahe-inview .ahe-letter {
    animation-name: ahe-wave;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.ahe-effect-typewriter.ahe-inview .ahe-letter {
    animation-name: ahe-appear;
    animation-timing-function: step-end;
    animation-fill-mode: forwards;
}

/* Typewriter: cursore lampeggiante */
.ahe-effect-typewriter[data-ahe-cursor="1"].ahe-inview::after {
    content: '|';
    opacity: 1;
    margin-left: 2px;
    animation: ahe-cursor-blink 0.7s step-end infinite;
}
@keyframes ahe-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}


/* ════════════════════════════════════════════════════════════
   EFFETTI WHOLE-ELEMENT: Glitch e Reveal
   duration/intensity impostati come CSS vars inline dal PHP
   ════════════════════════════════════════════════════════════ */

/* ── Glitch ──────────────────────────────────────────────── */
.ahe-effect-glitch.ahe-inview {
    animation-name: ahe-glitch;
    animation-duration: var(--ahe-glitch-dur, 600ms);
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

/* ── Reveal: stato iniziale (nascosto) per direzione ──────── */
.ahe-effect-reveal.ahe-reveal-left   { clip-path: inset(0 100% 0 0); }
.ahe-effect-reveal.ahe-reveal-right  { clip-path: inset(0 0 0 100%); }
.ahe-effect-reveal.ahe-reveal-top    { clip-path: inset(0 0 100% 0); }
.ahe-effect-reveal.ahe-reveal-bottom { clip-path: inset(100% 0 0 0); }

/* ── Reveal: animazione al trigger ─────────────────────────── */
.ahe-effect-reveal[data-ahe-dir="left"].ahe-inview  { animation-name: ahe-reveal-left; }
.ahe-effect-reveal[data-ahe-dir="right"].ahe-inview { animation-name: ahe-reveal-right; }
.ahe-effect-reveal[data-ahe-dir="top"].ahe-inview   { animation-name: ahe-reveal-top; }
.ahe-effect-reveal[data-ahe-dir="bottom"].ahe-inview { animation-name: ahe-reveal-bottom; }

.ahe-effect-reveal.ahe-inview {
    animation-duration: var(--ahe-reveal-dur, 800ms);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: forwards;
}


/* ── Marquee container ───────────────────────────────────── */
.ahe-effect-marquee {
    overflow: hidden;
    white-space: nowrap;
}
.ahe-effect-marquee .ahe-marquee-inner {
    display: inline-block;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Avvia quando l'elemento entra nel viewport */
.ahe-effect-marquee.ahe-inview .ahe-marquee-inner {
    animation-play-state: running !important;
}


/* ════════════════════════════════════════════════════════════
   KEYFRAMES — EFFETTI LETTERA PER LETTERA
   ════════════════════════════════════════════════════════════ */

@keyframes ahe-slide-left {
    from { opacity: var(--ahe-opacity-from, 0); transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ahe-slide-right {
    from { opacity: var(--ahe-opacity-from, 0); transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ahe-slide-bottom {
    from { opacity: var(--ahe-opacity-from, 0); transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ahe-slide-top {
    from { opacity: var(--ahe-opacity-from, 0); transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ahe-fade {
    from { opacity: var(--ahe-opacity-from, 0); }
    to   { opacity: 1; }
}
@keyframes ahe-scale {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ahe-blur {
    from { opacity: 0; filter: blur(var(--ahe-blur, 8px)); }
    to   { opacity: 1; filter: blur(0); }
}
@keyframes ahe-wave {
    0%   { opacity: 0; transform: translateY(var(--ahe-wave, 15px)); }
    55%  { transform: translateY(calc(var(--ahe-wave, 15px) * -0.35)); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes ahe-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════
   KEYFRAMES — EFFETTI WHOLE-ELEMENT
   ════════════════════════════════════════════════════════════ */

@keyframes ahe-glitch {
    0%   { opacity: 0;                transform: translate(0); }
    5%   { opacity: 1;                transform: translate(calc(var(--ahe-gi,5px)*-1),   calc(var(--ahe-gi,5px)*.5));  color: #ff0040; }
    7%   { opacity: var(--ahe-gf,.5); transform: translate(0); }
    10%  { opacity: 1;                transform: translate(calc(var(--ahe-gi,5px)*.8),   calc(var(--ahe-gi,5px)*-.4)); color: #00e5ff; }
    12%  { opacity: var(--ahe-gf,.5); transform: translate(0); color: inherit; }
    15%  { opacity: 1;                transform: translate(calc(var(--ahe-gi,5px)*-.5),  calc(var(--ahe-gi,5px)*.8));  color: #ff0040; }
    17%  { opacity: var(--ahe-gf,.5); }
    20%  { opacity: 1;                transform: translate(calc(var(--ahe-gi,5px)*.3),   0);  color: #00e5ff; }
    22%  { opacity: var(--ahe-gf,.5); transform: translate(0); color: inherit; }
    25%  { opacity: 1;                transform: translate(0); color: inherit; }
    40%  { opacity: 1;                transform: translate(calc(var(--ahe-gi,5px)*-.3),  calc(var(--ahe-gi,5px)*.2));  color: #ff0040; }
    42%  { opacity: var(--ahe-gf,.5); }
    45%  { opacity: 1;                transform: translate(calc(var(--ahe-gi,5px)*.2),   calc(var(--ahe-gi,5px)*-.3)); color: #00e5ff; }
    47%  { opacity: var(--ahe-gf,.5); transform: translate(0); color: inherit; }
    50%  { opacity: 1;                transform: translate(0); color: inherit; }
    100% { opacity: 1;                transform: translate(0); color: inherit; }
}

@keyframes ahe-reveal-left {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}
@keyframes ahe-reveal-right {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
}
@keyframes ahe-reveal-top {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
}
@keyframes ahe-reveal-bottom {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}