/**
 * Millennials Portfolio Website - Design System
 * File: static/css/layout.css
 * Purpose: Container system, section spacing, grid & flex layout utilities, ambient glass atmosphere
 */

/* -----------------------------------------------------------------------------
   1. Ambient Floating Glass Background Atmosphere
   ----------------------------------------------------------------------------- */
.glass-bg-atmosphere {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glass-ambient-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    max-width: 100vw;
    max-height: 100vh;
    will-change: transform, opacity;
}

.glass-orb-1 {
    top: -12%;
    left: 8%;
    width: clamp(280px, 45vw, 680px);
    height: clamp(280px, 45vw, 680px);
    background: radial-gradient(circle, rgba(212, 222, 192, 0.75) 0%, rgba(187, 207, 141, 0.35) 50%, transparent 75%);
    filter: blur(55px);
    animation: floatSlowOrb1 18s ease-in-out infinite alternate;
}

.glass-orb-2 {
    top: 25%;
    right: -8%;
    width: clamp(300px, 48vw, 720px);
    height: clamp(300px, 48vw, 720px);
    background: radial-gradient(circle, rgba(232, 233, 228, 0.85) 0%, rgba(212, 222, 192, 0.40) 52%, transparent 75%);
    filter: blur(65px);
    animation: floatSlowOrb2 22s ease-in-out infinite alternate;
}

.glass-orb-3 {
    top: 58%;
    left: -10%;
    width: clamp(290px, 50vw, 760px);
    height: clamp(290px, 50vw, 760px);
    background: radial-gradient(circle, rgba(212, 222, 192, 0.70) 0%, rgba(187, 207, 141, 0.30) 50%, transparent 75%);
    filter: blur(60px);
    animation: floatSlowOrb3 20s ease-in-out infinite alternate;
}

.glass-orb-4 {
    top: 85%;
    right: 6%;
    width: clamp(260px, 42vw, 650px);
    height: clamp(260px, 42vw, 650px);
    background: radial-gradient(circle, rgba(232, 233, 228, 0.75) 0%, rgba(212, 222, 192, 0.35) 50%, transparent 75%);
    filter: blur(55px);
    animation: floatSlowOrb1 24s ease-in-out infinite alternate-reverse;
}

.glass-orb-5 {
    top: 42%;
    left: 32%;
    width: clamp(220px, 35vw, 520px);
    height: clamp(220px, 35vw, 520px);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.90) 0%, rgba(212, 222, 192, 0.35) 55%, transparent 75%);
    filter: blur(50px);
    animation: floatSlowOrb2 16s ease-in-out infinite alternate;
}

/* Floating Translucent Glass Panels in Background */
.glass-ambient-panel {
    position: absolute;
    border-radius: var(--radius-xl);
    pointer-events: none;
    max-width: 90vw;
    will-change: transform;
}

.glass-panel-float-1 {
    top: 14%;
    left: 5%;
    width: clamp(160px, 20vw, 290px);
    height: clamp(90px, 12vw, 175px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 100%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 36px rgba(39, 59, 9, 0.06), inset 0 1px 1.5px rgba(255, 255, 255, 0.8);
    transform: rotate(-7deg);
    animation: floatPanel1 14s ease-in-out infinite alternate;
}

.glass-panel-float-2 {
    top: 50%;
    right: 4%;
    width: clamp(170px, 22vw, 320px);
    height: clamp(100px, 14vw, 190px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.40) 0%, rgba(212, 222, 192, 0.20) 100%);
    border: 1px solid rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 36px rgba(39, 59, 9, 0.06), inset 0 1px 1.5px rgba(255, 255, 255, 0.8);
    transform: rotate(6deg);
    animation: floatPanel2 17s ease-in-out infinite alternate;
}

.glass-panel-float-3 {
    top: 78%;
    left: 8%;
    width: clamp(150px, 18vw, 260px);
    height: clamp(90px, 11vw, 150px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(232, 233, 228, 0.22) 100%);
    border: 1px solid rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(39, 59, 9, 0.06), inset 0 1px 1.5px rgba(255, 255, 255, 0.8);
    transform: rotate(-5deg);
    animation: floatPanel1 19s ease-in-out infinite alternate-reverse;
}

@keyframes floatSlowOrb1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 25px) scale(1.05); }
}

@keyframes floatSlowOrb2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-25px, 35px) scale(0.96); }
}

@keyframes floatSlowOrb3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(25px, -30px) scale(1.03); }
}

@keyframes floatPanel1 {
    0% { transform: rotate(-7deg) translate(0, 0); }
    100% { transform: rotate(-4deg) translate(15px, 18px); }
}

@keyframes floatPanel2 {
    0% { transform: rotate(6deg) translate(0, 0); }
    100% { transform: rotate(8deg) translate(-14px, 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .glass-orb-1,
    .glass-orb-2,
    .glass-orb-3,
    .glass-orb-4,
    .glass-orb-5,
    .glass-panel-float-1,
    .glass-panel-float-2,
    .glass-panel-float-3 {
        animation: none !important;
    }
}

/* Ensure all page content stacks above the ambient atmosphere */
#main-content,
#site-footer,
.section,
section {
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------------------------------------
   2. Container System
   ----------------------------------------------------------------------------- */
.container,
.container-wide,
.container-narrow {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
    min-width: 0;
}

/* Standard content container (max ~1200px) */
.container {
    max-width: var(--container-max);
}

/* Wide layout container (max ~1400px) */
.container-wide {
    max-width: var(--container-wide-max);
}

/* Narrow reading / form / prose container (max ~760px) */
.container-narrow {
    max-width: var(--container-narrow-max);
}

/* -----------------------------------------------------------------------------
   3. Section Spacing System & Glass Section Backgrounds
   ----------------------------------------------------------------------------- */
.section {
    padding-block: var(--section-spacing);
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.section-sm {
    padding-block: calc(var(--section-spacing) * 0.6);
}

.section-lg {
    padding-block: calc(var(--section-spacing) * 1.25);
}

/* In-Page Anchor Navigation Offset (Sticky Header Offset Compensation) */
section[id],
.hero-section,
.about-section,
.services-section,
.work-section,
.process-section,
.testimonials-section,
.contact-section,
.site-footer {
    scroll-margin-top: 88px;
}

@media (max-width: 768px) {
    section[id],
    .hero-section,
    .about-section,
    .services-section,
    .work-section,
    .process-section,
    .testimonials-section,
    .contact-section,
    .site-footer {
        scroll-margin-top: 76px;
    }
}

/* Section Background Variants (Refined Translucent Glass Surface Washes) */
.bg-background {
    background-color: var(--color-background, #E8E9E4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bg-surface {
    background-color: var(--section-bg-services, #D4DEC0);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bg-soft {
    background: var(--glass-bg-card-tint);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bg-light {
    background: linear-gradient(135deg, rgba(187, 207, 141, 0.65) 0%, rgba(212, 222, 192, 0.45) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bg-navy {
    background: linear-gradient(135deg, rgba(0, 36, 0, 0.96) 0%, rgba(39, 59, 9, 0.98) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.20);
}

.bg-glass {
    background: var(--glass-bg-card);
    backdrop-filter: var(--glass-blur-backdrop-md);
    -webkit-backdrop-filter: var(--glass-blur-backdrop-md);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-md);
}

/* -----------------------------------------------------------------------------
   4. Grid Layout Utilities
   ----------------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-6);
    width: 100%;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    width: 100%;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    width: 100%;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    width: 100%;
}

.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-6);
    width: 100%;
}

/* -----------------------------------------------------------------------------
   5. Flexbox Layout Utilities
   ----------------------------------------------------------------------------- */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

/* -----------------------------------------------------------------------------
   6. Gap Utilities
   ----------------------------------------------------------------------------- */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }

/* -----------------------------------------------------------------------------
   7. Margin & Padding Utilities
   ----------------------------------------------------------------------------- */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }