/* --------------------------------------------------------------
   Premium Glass‑Morphic UI for the demo pages
   -------------------------------------------------------------- */

/* Global palette */
:root {
    --clr-bg: #f5faff;
    /* very light baby‑blue */
    --clr-card-bg: rgba(255, 255, 255, 0.18);
    --clr-card-border: rgba(255, 255, 255, 0.3);
    --clr-primary: #5ac8fa;
    /* baby‑blue accent */
    --clr-accent: #ff7a00;
    /* orange accent */
    --clr-text: #111;
    --clr-muted: #555;
}

/* Body background – subtle gradient */
body {
    background: linear-gradient(135deg, #ffffff 0%, #e6f7ff 100%);
    font-family: "Inter", system-ui, sans-serif;
    color: var(--clr-text);
    margin: 0;
    padding: 0;
}

/* Hero section – full‑width with blur overlay */
.hero {
    background-color: #e6f7ff;
    /* fallback if hero image missing */
    position: relative;
    height: 60vh;
    background: url(var(--hero-image)) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.12);
}

.hero .overlay {
    color: var(--clr-text);
    /* make overlay text readable */
    position: relative;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.hero h1 {
    font-size: 3rem;
    margin: 0;
    font-family: "Outfit", sans-serif;
}

.hero p {
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

/* Glass‑morphic card */
.card {
    background: var(--clr-card-bg);
    border-radius: 12px;
    border: 1px solid var(--clr-card-border);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.45);
}

/* Grid for portfolio cards */
.grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Section headings */
section>h2 {
    font-family: "Outfit", sans-serif;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--clr-primary);
    position: relative;
}

section>h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 48px;
    height: 4px;
    background: var(--clr-accent);
}

/* Fade‑in on scroll – micro‑animation */
[data-fade] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-fade].visible {
    opacity: 1;
    transform: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.9rem;
    color: var(--clr-muted);
}

/* Responsive tweaks */
@media (max-width: 600px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1rem;
    }
}