/* site.css — global polish for Apple-like minimal, ultra-smooth feel */

/* 0) 4K-friendly smoothing + smooth scroll */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 1) Base (works with Tailwind; adds minimal defaults) */
:root {
    --page-max: 1280px; /* wider for 4K but still readable */
    --page-pad: min(5vw, 28px);
    --section-pad: clamp(72px, 10vh, 128px);
    --radius: 16px;
    --radius-lg: 22px;
    --shadow-soft: 0 8px 30px rgba(2, 12, 25, .08);
    --shadow-card: 0 14px 50px rgba(2, 12, 25, .12);
}

body {
    margin: 0;
    font-feature-settings: "liga","kern","clig";
    letter-spacing: 0;
}

/* 2) Containers & sections (more air) */
.container-xl {
    width: min(var(--page-max), 92%);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}

.section {
    padding-block: var(--section-pad);
}

.section-tight {
    padding-block: clamp(56px, 6vh, 96px);
}

.section-loose {
    padding-block: clamp(96px, 12vh, 160px);
}

/* 3) Smooth transitions globally (kept subtle) */
a, button {
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .3s ease, opacity .2s ease;
}

/* 4) Focus rings (accessible, minimal) */
:focus-visible {
    outline: 2px solid rgba(0,163,255,.7);
    outline-offset: 3px;
    border-radius: 8px;
}

/* 5) Cards and groups */
.card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

/* 6) Media */
img, video {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

/* 7) Reduce motion respect (if JS animation exists) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* 8) Subtle link underline reveal (Apple-like) */
.link-underline {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .25s ease;
}

    .link-underline:hover {
        background-size: 100% 1px;
    }