/* style.css */

/* Fluid type scaling */
html {
    font-size: clamp(15px, 1vw + 0.5rem, 18px);
}

/* AWS-style hero background (animated + textured) */
.aws-hero-bg {
    position: relative;
    overflow: hidden;
    padding-top: 8rem;
    margin-top: -4rem;
}

/* Gradient section divider */
.gradient-divider {
    position: relative;
    height: 1px;
    margin-bottom: 4rem;
    background: linear-gradient(90deg,
            transparent,
            rgba(124, 58, 237, 0.6),
            rgba(236, 72, 153, 0.6),
            rgba(234, 179, 8, 0.6),
            transparent);
    background-size: 200% 100%;
    animation: divider-drift 14s linear infinite;
}

@keyframes divider-drift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Gradient hover buttons */
.btn-gradient {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.btn-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            rgba(124, 58, 237, 0.6),
            rgba(236, 72, 153, 0.6),
            rgba(234, 179, 8, 0.6));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.btn-gradient:hover::before {
    opacity: 0.35;
}
.aws-hero-bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(60% 80% at 15% 30%, rgba(124, 58, 237, 0.55), transparent 60%),
        /* purple */
        radial-gradient(55% 75% at 85% 40%, rgba(56, 189, 248, 0.45), transparent 60%),
        /* soft blue */
        radial-gradient(40% 60% at 70% 85%, rgba(234, 179, 8, 0.35), transparent 65%),
        /* muted amber */
        linear-gradient(120deg,
            #1e1b4b,
            /* deep indigo */
            #4c1d95,
            /* purple */
            #0f766e,
            /* teal */
            #1e293b
            /* slate */
        );
    background-size: 200% 200%;
    animation: gradient-drift 22s ease-in-out infinite;
    z-index: 0;
}


/* Grain / noise texture */
.aws-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
    z-index: 1;
    pointer-events: none;
}

/* Dark overlay for contrast */
.aws-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2;
}

.aws-hero-content {
    position: relative;
    z-index: 3;
}

@keyframes gradient-drift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Accent color syncing */
:root {
    --accent-teal: #2dd4bf;
    --accent-purple: #a78bfa;
    --accent-pink: #f472b6;
    --accent-amber: #fbbf24;
}

.accent-border {
    border-left: 3px solid var(--accent-teal);
}

/* Section gradient (lighter than hero) */
.aws-section-bg {
    position: relative;
    overflow: hidden;
}

.aws-section-bg::before {
    content: "";
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(50% 70% at 20% 30%, rgba(124, 58, 237, 0.35), transparent 60%),
        radial-gradient(45% 65% at 80% 40%, rgba(56, 189, 248, 0.30), transparent 60%),
        radial-gradient(35% 55% at 70% 80%, rgba(234, 179, 8, 0.25), transparent 65%),
        linear-gradient(120deg,
            #1e1b4b,
            #312e81,
            #0f766e,
            #020617);
    z-index: 0;
}

.aws-section-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.aws-section-content {
    position: relative;
    z-index: 2;
}

/* Gradient divider 
.gradient-divider {
  height: 3px;
  width: 80px;
  margin-bottom: 1.5rem;
  background: linear-gradient(
    90deg,
    #2dd4bf,
    #a78bfa,
    #38bdf8
  );
  border-radius: 999px;
}*/

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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