/* =================================================================
   KAHLANI — Animations
   Pure CSS wherever possible; IntersectionObserver in JS only
   flips a .is-visible class. Elementor editor always shows everything.
   ================================================================= */

/* ------- The Elementor editor safeguard (MOST IMPORTANT) -------
   When the Elementor editor is loaded, body has .elementor-editor-active.
   In that mode, force ALL animated elements to be immediately visible
   so the canvas never appears blank. This is enforced in THREE places
   (here + main.css .elementor-editor-active blocks + functions.php
   inline block) for defense-in-depth. */
body.elementor-editor-active [data-kahlani-animate],
body.elementor-editor-active .kahlani-fade-up,
body.elementor-editor-active .kahlani-fade-in,
body.elementor-editor-active .kahlani-slide-up,
body.elementor-editor-active .kahlani-zoom-in,
body.elementor-editor-active .kahlani-hero-rotating-title,
body.elementor-editor-active .kahlani-hero-sub,
body.elementor-editor-active .kahlani-hero-cta,
body.elementor-editor-active .kahlani-hero-skip {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
}

/* Same safeguard when animations are disabled via prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    [data-kahlani-animate],
    .kahlani-fade-up, .kahlani-fade-in, .kahlani-slide-up, .kahlani-zoom-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Initial state for elements that will animate in */
[data-kahlani-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity  700ms cubic-bezier(.2,.7,.2,1),
        transform 700ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
[data-kahlani-animate="fade-in"]   { transform: none; }
[data-kahlani-animate="fade-up"]   { transform: translateY(40px); }
[data-kahlani-animate="fade-right"]{ transform: translateX(-30px); }
[data-kahlani-animate="fade-left"] { transform: translateX(30px); }
[data-kahlani-animate="zoom-in"]   { transform: scale(0.94); }

[data-kahlani-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* Staggering — if JS sets --stagger, each item delays a bit more */
[data-kahlani-animate] {
    transition-delay: calc(var(--stagger, 0) * 80ms);
}

/* Simple utility keyframes */
@keyframes kahlani-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}
@keyframes kahlani-pulse-red {
    0%,100% { box-shadow: 0 0 0 0 rgba(224,0,0,0.4); }
    50%     { box-shadow: 0 0 0 12px rgba(224,0,0,0); }
}
@keyframes kahlani-fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* Hero final-title gentle entry — the rotator's non-final titles are
   animated via JS class toggles (opacity swap) so we keep the keyframes
   strictly for the settle title. */
.kahlani-hero .kahlani-hero-title-final { animation: kahlani-fade-slide-up 900ms cubic-bezier(.2,.7,.2,1) both; }

/* CTA button in hero — subtle pulse to draw attention. Delay is
   generous so the pulse fires AFTER the title rotator has settled
   and the CTA has faded in from its "rotator-active" hidden state. */
.kahlani-hero .kahlani-btn-primary {
    animation: kahlani-pulse-red 2600ms 3200ms 3 ease-out;
}

/* Scroll indicator on hero — anchored to bottom of the FIRST viewport
   (the hero is 200vh; anchoring to bottom of the section would place it
   invisibly at y=200vh). Uses top: calc(100vh - N) instead. Fades out
   in sync with the curtain retracting rather than the final scrim (the
   scrim now starts LATE — using it here would leave the cue floating
   in front of the revealed video). */
.kahlani-hero::after {
    content: '';
    position: absolute;
    top: calc(100vh - 70px); left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 40px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    background: transparent;
    z-index: 3;
    pointer-events: none;
    opacity: calc(1 - var(--kahlani-hero-curtain, 0));
    transition: opacity 120ms linear;
}
.kahlani-hero::before {
    content: '';
    position: absolute;
    top: calc(100vh - 56px); left: 50%;
    width: 3px; height: 8px;
    background: var(--kahlani-red);
    border-radius: 2px;
    z-index: 4;
    animation: kahlani-scroll-dot 1800ms ease-in-out infinite;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: calc(1 - var(--kahlani-hero-curtain, 0));
    transition: opacity 120ms linear;
}
@keyframes kahlani-scroll-dot {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 12px); }
}
/* But hide these decorative markers inside Elementor editor */
body.elementor-editor-active .kahlani-hero::after,
body.elementor-editor-active .kahlani-hero::before { display: none; }