/* ═══════════════════════════════════════════════════════════════════════════
   CyberKavach - Cinematic Shutter Text Reveal Animation
   Premium text reveal with horizontal scanning slices
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────────────────── */
.ck-shutter-container {
    display: inline-flex;
    flex-wrap: wrap;
    position: relative;
    line-height: 1.2;
}

/* ── Character Wrapper ─────────────────────────────────────────────────── */
.ck-shutter-char {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.ck-shutter-space {
    display: inline-block;
    width: 0.3em;
}

/* ── Main Text Layer (Final Visible) ───────────────────────────────────── */
.ck-shutter-main {
    position: relative;
    display: inline-block;
    color: #ffffff;
    opacity: 0;
    filter: blur(10px);
    transition:
        opacity 800ms ease-in-out,
        filter 800ms ease-in-out;
}

.ck-shutter-main--reveal {
    opacity: 1;
    filter: blur(0);
}

/* ── Slice Layers (Scanning Effect) ────────────────────────────────────── */
.ck-shutter-slice {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    color: #E53935;
    opacity: 0;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
    transition: none;
    pointer-events: none;
    font-weight: inherit;
    text-shadow: 0 0 8px rgba(229, 57, 53, 0.4);
}

/* Top slice - clips to top 35% */
.ck-shutter-slice--top {
    clip-path: inset(0 0 65% 0);
}

/* Middle slice - clips to middle section */
.ck-shutter-slice--middle {
    clip-path: inset(35% 0 35% 0);
}

/* Bottom slice - clips to bottom 35% */
.ck-shutter-slice--bottom {
    clip-path: inset(65% 0 0 0);
}

/* ── Sweep Animations ──────────────────────────────────────────────────── */

/* Top slice: sweeps from left to right */
.ck-shutter-slice--top.ck-shutter-slice--sweep {
    animation: ck-shutter-sweep-ltr 700ms ease-in-out forwards;
}

/* Middle slice: sweeps from right to left */
.ck-shutter-slice--middle.ck-shutter-slice--sweep {
    animation: ck-shutter-sweep-rtl 700ms ease-in-out forwards;
}

/* Bottom slice: sweeps from left to right */
.ck-shutter-slice--bottom.ck-shutter-slice--sweep {
    animation: ck-shutter-sweep-ltr 700ms ease-in-out forwards;
}

/* ── Keyframe Animations ───────────────────────────────────────────────── */

/* Left to right sweep */
@keyframes ck-shutter-sweep-ltr {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }
    15% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    85% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

/* Right to left sweep */
@keyframes ck-shutter-sweep-rtl {
    0% {
        opacity: 0;
        transform: translateX(120%);
    }
    15% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    85% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateX(-120%);
    }
}

/* ── Responsive Adjustments ────────────────────────────────────────────── */

/* Ensure proper spacing on mobile */
@media (max-width: 640px) {
    .ck-shutter-container {
        line-height: 1.15;
    }

    .ck-shutter-space {
        width: 0.25em;
    }

    /* Slightly reduce text shadow on mobile for cleaner look */
    .ck-shutter-slice {
        text-shadow: 0 0 6px rgba(229, 57, 53, 0.3);
    }
}

/* ── Reduced Motion Support ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ck-shutter-main {
        transition-duration: 0.01ms;
    }

    .ck-shutter-slice--top.ck-shutter-slice--sweep,
    .ck-shutter-slice--middle.ck-shutter-slice--sweep,
    .ck-shutter-slice--bottom.ck-shutter-slice--sweep {
        animation: none;
        opacity: 0;
    }

    .ck-shutter-main--reveal {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* ── Performance Optimizations ─────────────────────────────────────────── */

.ck-shutter-char {
    will-change: auto;
}

.ck-shutter-main {
    will-change: opacity, filter, transform;
}

.ck-shutter-slice {
    will-change: opacity, transform;
}

/* Clear will-change after animation completes */
.ck-shutter-main--reveal {
    animation: ck-clear-will-change 1ms 700ms forwards;
}

.ck-shutter-slice--sweep {
    animation: ck-clear-will-change 1ms 450ms forwards;
}

@keyframes ck-clear-will-change {
    to {
        will-change: auto;
    }
}