/* =========================
   site.css — LAYOUT ONLY
   (sizes, positions, spacing, flow, radii)
   ========================= */


/* -------- Base / root layout tokens -------- */
@layer base {
    :root {
        color-scheme: dark;

        /* Layout sizes used throughout */
        --logo-size: 300px;
        --mobile-logo-size: 80px;

        /* Navbar layout + overshoot calc (matches Tailwind h-20 ≈ 5rem) */
        --navbar-h: 5rem;
        --logo-overshoot: calc((var(--logo-size) - var(--navbar-h)) / 2);

        /*font-size: 1.125rem;*/
    }

    html, body {
        height: 100%;
    }

    body {
        margin: 0;
        font-family: var(--font-sans);
    }
}

/* -------- Utilities: structure only -------- */
@layer utilities {
    /* Navbar helpers (no paint here) */
    .navbar.glass {
        overflow: visible;
        z-index: 20;
    }

    .nav-crown {
        height: var(--logo-overshoot);
    }

    /* Brand stack & label */
    .brand-stack {
        @apply flex flex-col items-center;
        gap: .35rem;
    }

    .brand-name-v2 {
        @apply text-center uppercase;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: .14em;
    }

    /* Logo wrappers & perf hints */
    .logo-mark, .logo-v2 {
        width: var(--logo-size);
        height: var(--logo-size);
        position: relative;
    }

    .logo-mark-mobile, .mobile-logo-v2 {
        width: var(--mobile-logo-size);
        height: var(--mobile-logo-size);
        position: relative;
    }

    .brand-drift {
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        transition: none;
    }

    .logo-clip-v2 {
        position: absolute;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    /* Clipped logo structure */
    .logo-fill-v2,
    .logo-fill-v2-mobile {
        width: 100%;
        height: 100%;
        position: relative;
        will-change: background-position;
    }

    .logo-fill-v2 {
        clip-path: url(#logo-clip-v2);
        -webkit-clip-path: url(#logo-clip-v2);
        position: relative;
        overflow: hidden;
    }

    .logo-fill-v2::after {
        position: absolute;
        inset: -12%;
    }

    .logo-fill-v2-mobile {
        clip-path: url(#logo-clip-v2-mobile);
        -webkit-clip-path: url(#logo-clip-v2-mobile);
    }

    @media (prefers-reduced-motion: reduce) {
        .logo-fill-v2, .logo-fill-v2::after {
            animation: none !important;
        }
    }

    /* Hero wrappers (layout only) */
    .hero {
        position: relative;
        isolation: isolate;
    }

    .hero-ambient {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .hero-title {
        letter-spacing: .01em;
    }

    .hero-title-sub {
        display: inline-block;
    }

    /* Framed panel structure */
    .hero-frame {
        padding: .5rem;
        border-radius: var(--radius-medium);
    }

    .hero-art {
        aspect-ratio: 16/10;
        border-radius: var(--radius-medium);
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-ambient, .hero-title-sub {
            animation: none !important;
        }
    }

    /* Full-width parallax hero (layout only) */
    .hero-px {
        position: relative;
        isolation: isolate;
    }

    .hero-media {
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 0;
    }

    .hero-img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 120vh;
        object-fit: cover;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .hero-container {
        position: relative;
        z-index: 2;
        /*padding-top: clamp(4rem, 10vh, 10rem);*/
        /*padding-bottom: clamp(2rem, 8vh, 6rem);*/
        /*height: inherit;*/
    }

    .hero-panel {
        padding: clamp(1rem, 3vw, 2rem);
        border-radius: var(--radius-medium);
    }

    /* Architectural rules (layout thickness only) */
    .hero-rule {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        z-index: 2;
    }

    .hero-rule-top {
        top: 0;
    }

    .section-rule {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 2;
    }

    .section-rule--top {
        bottom: 100%;          /* place bottom exactly at parent’s top */
        height: 100%;
    }

    .hero-rule-bottom {
        bottom: 0;
    }

    @supports (background-attachment: fixed) {
        .no-gsap .hero-media {
            display: none;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-img {
            height: 100vh;
        }
    }

    /* Cards / tiles structure */
    .ethos-card {
        padding: clamp(1rem, 3vw, 2rem);
        border-radius: var(--radius-medium);
        min-height: 100%;
    }

    .feature-tile {
        display: grid;
        grid-template-columns: 72px 1fr;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border-radius: var(--radius-medium);
        min-height: 96px;
    }

    .feature-icon {
        width: 72px;
        height: 72px;
        border-radius: var(--radius-soft);
    }

    /* Reveal baseline (motion scaffold) */
    .reveal {
        opacity: 0;
        transform: translateY(20px);
    }

    @media (prefers-reduced-motion: reduce) {
        .reveal {
            opacity: 1;
            transform: none;
        }
    }

    /* Perf hints */
    /*.navbar .nav-inner {*/
    /*    will-change: transform;*/
    /*    transform: translateZ(0);*/
    /*    backface-visibility: hidden;*/
    /*}*/

    /* Generic divider thickness utility (combine with .rule-gold/.rule-cyan) */
    .rule {
        height: 1px;
    }

    /* Edge sheen layout only (paint in input.css) */
    .edge-sheen {
        position: relative;
        overflow: hidden;
    }

    .edge-sheen::after {
        content: "";
        position: absolute;
        inset: -40%;
        pointer-events: none;
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;

        /* border shape/width live here to match old rounded look */
        border-style: solid;
        border-width: 1px;
        border-radius: var(--radius-soft);

        /*text-decoration: none;*/
        /*line-height: 1.2;*/

        /* motion layout (not paint) */
        transition: transform .15s ease, filter .15s ease;
    }

    .btn:active {
        transform: translateY(1px) scale(0.99);
    }
}

/* -------- Components (layout-only) -------- */
@layer components {
    @media (min-width: 992px) {
        .navbar .navbar-brand.navbar-brand-center {
            position: absolute;
            left: 50%;
            /*top: 50%;*/
            transform: translate(-50%, 0%);
            /*transform: translate(-50%, -50%);*/
            /*transform: translate(-50%, -10%);*/
            pointer-events: auto;
            z-index: 2;
            margin: 0 !important;
        }
    }
    /* Navbar height is controlled by Tailwind class (e.g., h-20) in HTML */
}

@layer utilities {
    /* Make elements with a frame host the ::before ring */
    .frame { position: relative; }
    .frame::before { position: absolute; inset: 0; }

    /* Choose ring thickness (layout variable) */
    .frame-1 { --frame-w: 1px; }
    .frame-2 { --frame-w: 2px; }
    .frame-3 { --frame-w: 3px; }
    .frame-4 { --frame-w: 4px; }
}