html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

.backdrop-blur {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.premium-card {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.soft-ring {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Hero floating card */
.hero-float {
    animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Fade in on load */
.animate-fade-up {
    animation: fadeUp 0.9s ease-out both;
}

.animate-fade-up-delay {
    animation: fadeUp 1.1s ease-out both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Soft pulse */
.animate-pulse-soft {
    animation: pulseSoft 2.2s infinite;
}

@keyframes pulseSoft {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.5);
    }

    50% {
        transform: scale(1.08);
        opacity: 0.9;
        box-shadow: 0 0 0 8px rgba(255, 153, 0, 0);
    }
}

/* Button shine */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.28) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: left 0.8s ease;
}

.btn-shine:hover::before {
    left: 140%;
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Nice text balance where supported */
h1,
h2,
h3 {
    text-wrap: balance;
}

/* Reduce heavy motion for users who prefer less animation */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-float,
    .animate-fade-up,
    .animate-fade-up-delay,
    .animate-pulse-soft {
        animation: none !important;
    }

    .reveal,
    .reveal.revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .btn-shine::before {
        display: none;
    }
}