/* =========================================================================
   KREATO — animations.css
   GSAP-driven helpers + reduced-motion respect.
   ========================================================================= */

@keyframes spin   { from { transform: rotate(0); } to { transform: rotate(1turn); } }
@keyframes blink  { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn{ from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.kreato-fade-up    { animation: fadeUp  0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.kreato-fade-in    { animation: fadeIn  0.7s ease both; }
.kreato-scale-in   { animation: scaleIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Stagger container — reveals each child with a slight delay between them. */
.kreato-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--stagger-delay, 0.06s) * var(--i, 0));
}
.kreato-stagger.is-revealed > *,
.kreato-stagger > [data-kreato-reveal].is-in-view {
    opacity: 1;
    transform: translateY(0);
}
/* Auto-index up to 12 children so JS doesn't have to inject inline styles. */
.kreato-stagger > *:nth-child(1)  { --i: 0; }
.kreato-stagger > *:nth-child(2)  { --i: 1; }
.kreato-stagger > *:nth-child(3)  { --i: 2; }
.kreato-stagger > *:nth-child(4)  { --i: 3; }
.kreato-stagger > *:nth-child(5)  { --i: 4; }
.kreato-stagger > *:nth-child(6)  { --i: 5; }
.kreato-stagger > *:nth-child(7)  { --i: 6; }
.kreato-stagger > *:nth-child(8)  { --i: 7; }
.kreato-stagger > *:nth-child(9)  { --i: 8; }
.kreato-stagger > *:nth-child(10) { --i: 9; }
.kreato-stagger > *:nth-child(11) { --i: 10; }
.kreato-stagger > *:nth-child(12) { --i: 11; }

/* ScrollTrigger reveal targets — JS adds .is-in-view when they enter the viewport. */
[data-kreato-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-kreato-reveal].is-in-view {
    opacity: 1;
    transform: translateY(0);
}
[data-kreato-reveal][data-direction="left"]  { transform: translateX(-32px); }
[data-kreato-reveal][data-direction="right"] { transform: translateX(32px); }
[data-kreato-reveal][data-direction="up"]    { transform: translateY(32px); }
[data-kreato-reveal][data-direction="down"]  { transform: translateY(-32px); }
[data-kreato-reveal][data-direction="scale"] { transform: scale(0.94); }
[data-kreato-reveal][data-direction="left"].is-in-view,
[data-kreato-reveal][data-direction="right"].is-in-view,
[data-kreato-reveal][data-direction="up"].is-in-view,
[data-kreato-reveal][data-direction="down"].is-in-view { transform: translate(0, 0); }
[data-kreato-reveal][data-direction="scale"].is-in-view { transform: scale(1); }
/* Optional delay multiplier — `data-delay="2"` waits 2 × 0.08s before revealing. */
[data-kreato-reveal][data-delay] { transition-delay: calc(var(--reveal-step, 0.08s) * attr(data-delay number, 0)); }
[data-kreato-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-kreato-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-kreato-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-kreato-reveal][data-delay="4"] { transition-delay: 0.32s; }
[data-kreato-reveal][data-delay="5"] { transition-delay: 0.40s; }

/* ── data-reveal (IntersectionObserver-based scroll reveal) ──────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
                transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Glitch animation (for 404 page) ─────────────────────────────────── */
@keyframes glitch {
    0%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
    10% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); }
    20% { clip-path: inset(50% 0 30% 0); transform: translate(4px, -2px); }
    30% { clip-path: inset(70% 0 10% 0); transform: translate(-2px, 4px); }
    40% { clip-path: inset(10% 0 80% 0); transform: translate(2px, -4px); }
    50% { clip-path: inset(0 0 0 0); transform: none; }
}

.kreato-404__glitch {
    position: relative;
    display: inline-block;
}
.kreato-404__glitch::before,
.kreato-404__glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: var(--color-bg);
}
.kreato-404__glitch::before {
    color: var(--glow-electric);
    animation: glitch 3s infinite;
    left: 2px;
}
.kreato-404__glitch::after {
    color: var(--glow-pink);
    animation: glitch 3s infinite reverse;
    left: -2px;
    animation-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-kreato-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------------------
   Elementor editor / preview-iframe compatibility.
   ScrollTrigger + IntersectionObserver don't fire reliably inside the
   Elementor preview iframe, so reveal targets stayed at opacity:0 forever
   and the canvas appeared black. We force everything visible in editor
   contexts (PHP adds `kreato-elementor-editing` to body via Helpers.php).
   ------------------------------------------------------------------------- */
/* All three reveal-attribute variants + stagger children — force visible
   in Elementor editor (edit mode) and preview iframe (html.elementor-html). */
.kreato-elementor-editing [data-kreato-reveal],
.kreato-elementor-editing [data-reveal],
.kreato-elementor-editing .kreato-stagger > *,
body.elementor-editor-active [data-kreato-reveal],
body.elementor-editor-active [data-reveal],
body.elementor-editor-active .kreato-stagger > *,
html.elementor-html [data-kreato-reveal],
html.elementor-html [data-reveal],
html.elementor-html .kreato-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Hero char-split spans + lede/roles also start opacity:0 — force visible. */
.kreato-elementor-editing .kreato-hero__title-char,
.kreato-elementor-editing .kreato-hero__lede,
.kreato-elementor-editing .kreato-hero__roles,
body.elementor-editor-active .kreato-hero__title-char,
body.elementor-editor-active .kreato-hero__lede,
body.elementor-editor-active .kreato-hero__roles,
html.elementor-html .kreato-hero__title-char,
html.elementor-html .kreato-hero__lede,
html.elementor-html .kreato-hero__roles {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Char-split: .char spans generated by JS start opacity:0 via keyframe —
   skip the animation entirely in editor contexts. */
body.elementor-editor-active [data-kreato-split] .char,
html.elementor-html [data-kreato-split] .char {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Preloader must never block the editor canvas. */
body.elementor-editor-active .kreato-preloader,
html.elementor-html .kreato-preloader {
    display: none !important;
}