/**
 * Animations CSS
 * Based on ezustfonal_final_v10.html
 */

/* Typewriter Cursor */
.cursor::after {
    content: '|';
    animation: blink 1s step-start infinite;
    color: var(--color-brand-accent, #C4A484);
    margin-left: 2px;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Center Reveal Animation (v10 Dynamic mode) */
.reveal-center-text {
    display: inline-block;
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    white-space: nowrap;
    vertical-align: bottom;
    opacity: 0;
}

.reveal-center-text.is-visible {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* Fade in animation */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

/* Float animation (for floating badge) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Hero Slider */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

/* Scroll Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Delay utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

/* Silver Thread Animation */
.silver-thread {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.silver-thread svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Thread draw animation */
@keyframes drawThread {
    from {
        stroke-dashoffset: 1800;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.thread-path {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation: drawThread 2.5s ease-out forwards;
}

/* Simple pulse animation for beads */
@keyframes beadPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.bead {
    animation: beadPulse 4s ease-in-out infinite;
}

.bead-1 { animation-delay: 0s; }
.bead-2 { animation-delay: 0.5s; }
.bead-3 { animation-delay: 1s; }
.bead-4 { animation-delay: 1.5s; }
.bead-5 { animation-delay: 2s; }
.bead-6 { animation-delay: 2.5s; }
.bead-7 { animation-delay: 3s; }
.bead-8 { animation-delay: 3.5s; }
.bead-9 { animation-delay: 4s; }
.bead-10 { animation-delay: 4.5s; }

/* Disabled animations (when setting is OFF) */
body.no-animations .reveal-on-scroll,
body.no-animations .reveal-left,
body.no-animations .reveal-right {
    opacity: 1 !important;
    transform: none !important;
}

body.no-thread .silver-thread {
    display: none !important;
}

body.no-beads .bead {
    animation: none !important;
}