/* =========================================================
   GENERIC PERSONAL WEBSITE TEMPLATE
   BARTRENIERS.COM
   Theme: Midnight Blue Geometry
   Palette: Midnight Navy • Steel Blue • Silver
   Responsive • Configurable • Accessibility-aware
   ========================================================= */


/* =========================================================
   1. THEME CONFIGURATION
   Customize this section for a new website.
   ========================================================= */

:root {
    /* Theme and browser controls */
    color-scheme: dark;

    /* Core colors */
    --color-background: #0b0d12;
    --color-surface: #11151d;
    --color-surface-raised: #14243b;

    --color-heading: #ffffff;
    --color-text: #c2c9d4;
    --color-muted: #8995a8;
    --color-border: #283344;

    /* Accent colors */
    --color-accent: #8098ba;
    --color-accent-soft: #a9b7cb;
    --color-accent-strong: #607591;
    --color-accent-contrast: #0b0d12;
    --color-accent-glow: rgb(145 169 204 / 35%);

    /* Status indicator */
    --color-status-text: #c4ccda;
    --color-status-border: rgb(137 149 168 / 24%);
    --color-status-dot: #91a9cc;
    --color-status-glow: rgb(145 169 204 / 35%);

    /* Atmospheric background */
    --background-glow-primary: rgb(27 46 73 / 22%);
    --background-glow-secondary: rgb(105 131 168 / 5%);

    --background-gradient:
        linear-gradient(
            135deg,
            #0b0d12 0%,
            #0d1119 60%,
            #101b2b 100%
        );

    /* Geometric decoration colors */
    --geometry-border-primary: rgb(105 131 168 / 15%);
    --geometry-border-secondary: rgb(125 149 181 / 18%);
    --geometry-border-tertiary: rgb(105 131 168 / 12%);

    --geometry-fill-primary: rgb(38 60 91 / 24%);
    --geometry-fill-secondary: rgb(20 36 59 / 3%);
    --geometry-fill-tertiary: rgb(20 36 59 / 28%);

    --geometry-line-color: rgb(105 131 168 / 15%);
    --geometry-grid-color: rgb(125 149 181 / 8%);

    --geometry-grid-opacity: 0.15;
    --geometry-grid-size: 76px;

    /* Typography */
    --font-family-base:
        Inter,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --font-size-body: 16px;
    --line-height-body: 1.9;

    /* Main layout */
    --layout-max-width: 1800px;
    --layout-content-width: 1120px;
    --layout-page-padding: clamp(24px, 6vw, 88px);

    --layout-page-padding-top: 34px;
    --layout-page-padding-bottom: 28px;
    --layout-hero-spacing: clamp(80px, 13vh, 150px);

    /* Branding */
    --brand-symbol-color: var(--color-accent);

    /* Hero */
    --hero-eyebrow-color: var(--color-accent-soft);
    --hero-title-accent-color: var(--color-accent);
    --hero-divider-color: var(--color-accent-strong);

    /* Footer */
    --footer-divider-color: rgb(137 149 168 / 17%);
    --footer-accent-color: var(--color-accent-strong);

    /* Geometry: primary shape */
    --geometry-one-top: 13%;
    --geometry-one-right: -8%;
    --geometry-one-size: clamp(260px, 43vw, 700px);
    --geometry-one-rotation: 45deg;
    --geometry-one-border: var(--geometry-border-primary);
    --geometry-one-fill: var(--geometry-fill-primary);
    --geometry-one-fill-end: var(--geometry-fill-secondary);

    /* Geometry: secondary shape */
    --geometry-two-top: 30%;
    --geometry-two-right: 8%;
    --geometry-two-size: clamp(180px, 25vw, 400px);
    --geometry-two-rotation: 45deg;
    --geometry-two-border: var(--geometry-border-secondary);

    /* Geometry: tertiary shape */
    --geometry-three-right: 12%;
    --geometry-three-bottom: -24%;
    --geometry-three-size: clamp(240px, 37vw, 580px);
    --geometry-three-rotation: 45deg;
    --geometry-three-border: var(--geometry-border-tertiary);
    --geometry-three-fill: var(--geometry-fill-tertiary);

    /* Geometry: decorative lines */
    --geometry-line-one-right: 28%;
    --geometry-line-two-right: 14%;
    --geometry-line-top: -20%;
    --geometry-line-height: 150%;

    /* Animation */
    --motion-duration: 18s;
    --motion-distance: 12px;
    --status-animation-duration: 3s;
}


/* =========================================================
   2. RESET AND BASE STYLES
   ========================================================= */

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

html {
    min-height: 100%;
    background: var(--color-background);
}

body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;

    background: var(--color-background);
    color: var(--color-heading);

    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
}

img,
svg,
video {
    max-width: 100%;
}


/* =========================================================
   3. ATMOSPHERIC BACKGROUND
   This section configures the stacking order.
   ========================================================= */

body::before {
    position: fixed;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(
            ellipse at 80% 45%,
            var(--background-glow-primary),
            transparent 48%
        ),
        var(--background-gradient);

    content: "";
    pointer-events: none;
}


/* =========================================================
   4. PAGE LAYOUT
   ========================================================= */

.page {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: var(--layout-max-width);
    min-height: 100vh;
    min-height: 100svh;

    margin-inline: auto;

    padding:
        var(--layout-page-padding-top)
        var(--layout-page-padding)
        var(--layout-page-padding-bottom);
}


/* =========================================================
   5. HEADER AND BRANDING
   ========================================================= */

.header,
.footer {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;

    color: var(--color-heading);
    text-decoration: none;
}

.brand__symbol {
    font-size: 29px;
    font-weight: 750;
    letter-spacing: -2px;
    line-height: 1;
}

.brand__symbol span {
    color: var(--brand-symbol-color);
}

.brand__name {
    color: var(--color-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
}


/* =========================================================
   6. STATUS INDICATOR
   ========================================================= */

.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 11px 15px;

    border: 1px solid var(--color-status-border);
    border-radius: 999px;

    color: var(--color-status-text);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.status__dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;

    border-radius: 50%;
    background: var(--color-status-dot);

    box-shadow: 0 0 12px var(--color-status-glow);

    animation:
        status-pulse
        var(--status-animation-duration)
        ease-in-out infinite;
}


/* =========================================================
   7. HERO SECTION
   ========================================================= */

.hero {
    position: relative;
    z-index: 2;

    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    max-width: var(--layout-content-width);

    margin-inline: auto;
    padding-block: var(--layout-hero-spacing);
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 30px;

    color: var(--hero-eyebrow-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
}

.hero__eyebrow-line {
    width: 32px;
    height: 1px;
    flex: 0 0 32px;

    background: var(--color-accent);
}

.hero__title {
    margin: 0;

    font-size: clamp(44px, 7.5vw, 96px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.065em;
    overflow-wrap: break-word;
}

.hero__title-accent {
    color: var(--hero-title-accent-color);
}

.hero__description {
    max-width: 410px;

    margin: 27px 0 0;

    color: var(--color-text);
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 400;
    line-height: 1.9;
}

.hero__divider {
    width: 52px;
    height: 1px;

    margin-top: 34px;

    background: var(--hero-divider-color);
}


/* =========================================================
   8. DOMAIN INFORMATION
   ========================================================= */

.domain {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin-top: 25px;
}

.domain__label {
    color: var(--color-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.domain__name {
    color: var(--color-heading);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    overflow-wrap: anywhere;
}


/* =========================================================
   9. GEOMETRIC BACKGROUND
   All shapes are decorative and configurable.
   ========================================================= */

.geometry {
    position: absolute;
    z-index: 1;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.geometry__shape {
    position: absolute;

    will-change: transform;
}

.geometry__shape--primary {
    top: var(--geometry-one-top);
    right: var(--geometry-one-right);

    width: var(--geometry-one-size);
    aspect-ratio: 1;

    border: 1px solid var(--geometry-one-border);

    background: linear-gradient(
        145deg,
        var(--geometry-one-fill),
        var(--geometry-one-fill-end) 70%
    );

    transform: rotate(var(--geometry-one-rotation));
    animation:
        geometry-float
        var(--motion-duration)
        ease-in-out infinite;
}

.geometry__shape--secondary {
    top: var(--geometry-two-top);
    right: var(--geometry-two-right);

    width: var(--geometry-two-size);
    aspect-ratio: 1;

    border: 1px solid var(--geometry-two-border);

    transform: rotate(var(--geometry-two-rotation));
}

.geometry__shape--tertiary {
    right: var(--geometry-three-right);
    bottom: var(--geometry-three-bottom);

    width: var(--geometry-three-size);
    aspect-ratio: 1;

    border: 1px solid var(--geometry-three-border);

    background: linear-gradient(
        35deg,
        var(--geometry-three-fill),
        transparent 65%
    );

    transform: rotate(var(--geometry-three-rotation));
}


/* Decorative diagonal lines */

.geometry__line {
    position: absolute;

    width: 1px;
    height: var(--geometry-line-height);

    background: linear-gradient(
        to bottom,
        transparent,
        var(--geometry-line-color),
        transparent
    );

    transform: rotate(45deg);
    transform-origin: center;
}

.geometry__line--one {
    top: var(--geometry-line-top);
    right: var(--geometry-line-one-right);
}

.geometry__line--two {
    top: var(--geometry-line-top);
    right: var(--geometry-line-two-right);
}


/* Decorative grid */

.geometry__grid {
    position: absolute;
    inset: 0;

    opacity: var(--geometry-grid-opacity);

    background-image:
        linear-gradient(
            var(--geometry-grid-color) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--geometry-grid-color) 1px,
            transparent 1px
        );

    background-size:
        var(--geometry-grid-size)
        var(--geometry-grid-size);

    mask-image: linear-gradient(
        to left,
        black,
        transparent 80%
    );

    -webkit-mask-image: linear-gradient(
        to left,
        black,
        transparent 80%
    );
}


/* =========================================================
   10. FOOTER
   ========================================================= */

.footer {
    padding-top: 22px;

    border-top: 1px solid var(--footer-divider-color);
}

.footer__tagline,
.footer__copyright {
    color: var(--color-muted);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
}

.footer__tagline span {
    padding-inline: 5px;
    color: var(--footer-accent-color);
}

.footer__copyright {
    letter-spacing: 0.5px;
}


/* =========================================================
   11. ANIMATIONS
   ========================================================= */

@keyframes geometry-float {
    0%,
    100% {
        transform:
            rotate(var(--geometry-one-rotation))
            translateY(0);
    }

    50% {
        transform:
            rotate(
                calc(var(--geometry-one-rotation) + 2deg)
            )
            translateY(calc(-1 * var(--motion-distance)));
    }
}

@keyframes status-pulse {
    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   12. TABLET AND MOBILE
   ========================================================= */

@media (max-width: 640px) {
    :root {
        --layout-page-padding-top: 25px;
        --layout-page-padding-bottom: 22px;
        --layout-hero-spacing: 100px;

        --geometry-grid-size: 48px;

        --geometry-one-top: 27%;
        --geometry-one-right: -48%;
        --geometry-one-size: 100vw;

        --geometry-two-top: 42%;
        --geometry-two-right: -18%;
        --geometry-two-size: 66vw;

        --geometry-three-right: -34%;
        --geometry-three-bottom: -8%;
        --geometry-three-size: 90vw;

        --geometry-line-one-right: 16%;
        --geometry-line-two-right: 0;
    }

    .header {
        align-items: flex-start;
        gap: 15px;
    }

    .brand__symbol {
        font-size: 26px;
    }

    .brand__name {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .status {
        gap: 7px;
        padding: 9px 10px;

        font-size: 8px;
        letter-spacing: 0.8px;
    }

    .hero__eyebrow {
        margin-bottom: 24px;

        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero__title {
        font-size: clamp(43px, 10vw, 62px);
    }

    .hero__description {
        max-width: 320px;
        margin-top: 22px;
    }

    .footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}


/* =========================================================
   13. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 360px) {
    .header {
        flex-wrap: wrap;
    }

    .status {
        font-size: 7px;
        letter-spacing: 0.5px;
    }

    .hero__title {
        font-size: clamp(36px, 11.4vw, 41px);
    }

    .footer__tagline {
        font-size: 8px;
        letter-spacing: 1px;
    }
}


/* =========================================================
   14. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }
}