/**
 * Kaiyo Animations
 * Eleganta scroll-animationer
 *
 * KLASSER ATT ANVÄNDA I BEAVER BUILDER:
 *
 * GRUNDANIMATIONER:
 * - kaiyo-fade-up       : Tona in + glid upp
 * - kaiyo-fade-in       : Bara tona in
 * - kaiyo-blur-in       : Från suddig till skarp
 * - kaiyo-clip-up       : Text glider upp ur mask
 * - kaiyo-scale-in      : Tona in + väx från 95%
 *
 * SLIDE (bilder/objekt):
 * - kaiyo-slide-left    : Glid in från vänster
 * - kaiyo-slide-right   : Glid in från höger
 *
 * CLIP/MASK REVEALS:
 * - kaiyo-clip-left     : Avslöja från vänster
 * - kaiyo-clip-right    : Avslöja från höger
 * - kaiyo-clip-down     : Avslöja uppifrån ner
 *
 * BILDSPECIFIKA:
 * - kaiyo-zoom-reveal   : Bild zoomar ut ur mask
 * - kaiyo-flip-in       : Subtil 3D-flip
 *
 * TEXTANIMATIONER:
 * - kaiyo-letter        : Bokstav för bokstav
 * - kaiyo-word          : Ord för ord
 *
 * DELAYS (kombinera med ovan):
 * - kaiyo-delay-1       : 0.1s delay
 * - kaiyo-delay-2       : 0.2s delay
 * - kaiyo-delay-3       : 0.3s delay
 * - kaiyo-delay-4       : 0.4s delay
 * - kaiyo-delay-5       : 0.5s delay
 *
 * SPECIALEFFEKTER:
 * - kaiyo-counter       : Räkna upp siffror (sätt data-target="100")
 * - kaiyo-line-reveal   : Linje som dras
 *
 * LOGO REVEAL:
 * - kaiyo-logo-fade     : Logga tonar in + scale
 * - kaiyo-logo-blur     : Logga från blur till skarp
 */

/* ==========================================
   GRUNDINSTÄLLNINGAR
   Element är osynliga tills de animeras
========================================== */

.kaiyo-fade-up,
.kaiyo-fade-in,
.kaiyo-blur-in,
.kaiyo-clip-up,
.kaiyo-scale-in,
.kaiyo-slide-left,
.kaiyo-slide-right,
.kaiyo-clip-left,
.kaiyo-clip-right,
.kaiyo-clip-down,
.kaiyo-zoom-reveal,
.kaiyo-flip-in,
.kaiyo-letter,
.kaiyo-word,
.kaiyo-logo-fade,
.kaiyo-logo-blur {
    opacity: 0;
}

/* ==========================================
   1. FADE UP
   Klassisk, elegant
========================================== */

.kaiyo-fade-up {
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   2. FADE IN
   Bara opacity
========================================== */

.kaiyo-fade-in {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-fade-in.is-visible {
    opacity: 1;
}

/* ==========================================
   3. BLUR IN
   Modern, premium
========================================== */

.kaiyo-blur-in {
    filter: blur(10px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
                filter 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-blur-in.is-visible {
    opacity: 1;
    filter: blur(0);
}

/* ==========================================
   4. CLIP UP (mask reveal)
   Editorial känsla
========================================== */

.kaiyo-clip-up {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1),
                opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.kaiyo-clip-up.is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* ==========================================
   5. SCALE IN
   Subtil scale
========================================== */

.kaiyo-scale-in {
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================
   6. LETTER BY LETTER
   JS splittar texten i spans
========================================== */

.kaiyo-letter.is-visible {
    opacity: 1;
}

.kaiyo-letter .kaiyo-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-letter.is-visible .kaiyo-char {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays genereras dynamiskt av JS */

/* ==========================================
   7. WORD BY WORD
   JS splittar texten i ord
========================================== */

.kaiyo-word.is-visible {
    opacity: 1;
}

.kaiyo-word .kaiyo-word-item {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-word.is-visible .kaiyo-word-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays genereras dynamiskt av JS */

/* ==========================================
   8. LOGO REVEAL
========================================== */

.kaiyo-logo-fade {
    transform: scale(0.9);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-logo-fade.is-visible {
    opacity: 1;
    transform: scale(1);
}

.kaiyo-logo-blur {
    filter: blur(15px);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-logo-blur.is-visible {
    opacity: 1;
    filter: blur(0);
}

/* ==========================================
   9. LINE REVEAL
   Horisontell linje som dras
========================================== */

.kaiyo-line-reveal {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-line-reveal.is-visible {
    transform: scaleX(1);
}

/* ==========================================
   10. SLIDE LEFT
   Glid in från vänster
========================================== */

.kaiyo-slide-left {
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================
   11. SLIDE RIGHT
   Glid in från höger
========================================== */

.kaiyo-slide-right {
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================
   12. CLIP LEFT
   Mask-reveal från vänster
========================================== */

.kaiyo-clip-left {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1),
                opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.kaiyo-clip-left.is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* ==========================================
   13. CLIP RIGHT
   Mask-reveal från höger
========================================== */

.kaiyo-clip-right {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1),
                opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.kaiyo-clip-right.is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* ==========================================
   14. CLIP DOWN
   Mask-reveal uppifrån ner
========================================== */

.kaiyo-clip-down {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1),
                opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.kaiyo-clip-down.is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* ==========================================
   15. ZOOM REVEAL
   Bild zoomar ut ur mask
========================================== */

.kaiyo-zoom-reveal {
    overflow: hidden;
}

.kaiyo-zoom-reveal img,
.kaiyo-zoom-reveal video {
    transform: scale(1.3);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.kaiyo-zoom-reveal.is-visible {
    opacity: 1;
}

.kaiyo-zoom-reveal.is-visible img,
.kaiyo-zoom-reveal.is-visible video {
    transform: scale(1);
    opacity: 1;
}

/* ==========================================
   16. FLIP IN
   Subtil 3D-flip
========================================== */

.kaiyo-flip-in {
    perspective: 800px;
}

.kaiyo-flip-in {
    transform: perspective(800px) rotateY(8deg);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.kaiyo-flip-in.is-visible {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
}

/* ==========================================
   DELAYS
   Kombinera med andra klasser
========================================== */

.kaiyo-delay-1 { transition-delay: 0.1s !important; }
.kaiyo-delay-2 { transition-delay: 0.2s !important; }
.kaiyo-delay-3 { transition-delay: 0.3s !important; }
.kaiyo-delay-4 { transition-delay: 0.4s !important; }
.kaiyo-delay-5 { transition-delay: 0.5s !important; }
.kaiyo-delay-6 { transition-delay: 0.6s !important; }
.kaiyo-delay-7 { transition-delay: 0.7s !important; }
.kaiyo-delay-8 { transition-delay: 0.8s !important; }

/* ==========================================
   11. REDUCED MOTION
   Respektera användarens inställningar
========================================== */

@media (prefers-reduced-motion: reduce) {
    .kaiyo-fade-up,
    .kaiyo-fade-in,
    .kaiyo-blur-in,
    .kaiyo-clip-up,
    .kaiyo-scale-in,
    .kaiyo-slide-left,
    .kaiyo-slide-right,
    .kaiyo-clip-left,
    .kaiyo-clip-right,
    .kaiyo-clip-down,
    .kaiyo-zoom-reveal,
    .kaiyo-flip-in,
    .kaiyo-letter,
    .kaiyo-word,
    .kaiyo-logo-fade,
    .kaiyo-logo-blur,
    .kaiyo-line-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    .kaiyo-letter .kaiyo-char,
    .kaiyo-word .kaiyo-word-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================
   12. WAVE ANIMATION (för hero)
   Lägg på container med våg-SVG inuti
========================================== */

.kaiyo-wave svg {
    animation: kaiyoWave 20s linear infinite;
}

.kaiyo-wave svg:nth-child(2) {
    animation-duration: 25s;
    animation-direction: reverse;
    opacity: 0.5;
}

@keyframes kaiyoWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}