@tailwind base;
@tailwind components;
@tailwind utilities;

/* Minimal helpers + animations */
:root {
    color-scheme: dark;
}

.i {
    display: inline-block;
    transform: translateY(-1px);
}


@keyframes spin-slow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-slower-rev {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes pulse-glow {
    0%,100% {
        opacity: .15
    }

    50% {
        opacity: .45
    }
}


.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.animate-spin-slower-rev {
    animation: spin-slower-rev 12s linear infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 3.2s ease-in-out infinite;
}


/* Simple fade-up on scroll (no lib) */
[data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(24px);
    transition: .6s ease;
}

    [data-anim="fade-up"].inview {
        opacity: 1;
        transform: none;
    }

/* Finom “lebegő” mozgás és alig észrevehető forgás */
@keyframes hero-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

@keyframes hero-spin-slow {
    to {
        transform: rotate(360deg)
    }
}

.hero-logo-spin {
    animation: hero-float 6s ease-in-out infinite, hero-spin-slow 120s linear infinite;
    will-change: transform;
}

.chrona-social-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.72);
    text-decoration: none;
    transition: .2s ease;
}

    .chrona-social-icon svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    .chrona-social-icon:hover {
        color: #00C8FF;
        border-color: rgba(0,200,255,.55);
        background: rgba(0,200,255,.08);
        box-shadow: 0 0 18px rgba(0,200,255,.24);
        transform: translateY(-2px);
    }

#user-menu {
    backdrop-filter: blur(10px);
}

    #user-menu a:hover {
        color: #00C8FF;
    }