/* ============================================
   LE STIRWEN — Custom Styles
   Design System: "The Celestial Fortress"
   ============================================ */

/* --- Hero Overlay & Image --- */
.hero-overlay {
    background: linear-gradient(to bottom, rgba(11,19,38,0.30), rgba(11,19,38,0.45), rgba(11,19,38,0.90));
}
.hero-overlay ~ picture img {
    opacity: 0.8 !important;
    filter: brightness(0.85) saturate(0.4);
}
@media (min-width: 768px) {
    .hero-overlay {
        background: linear-gradient(to bottom, rgba(11,19,38,0.20), rgba(11,19,38,0.40), #0b1326);
    }
    .hero-overlay ~ picture img {
        opacity: 0.65 !important;
        filter: saturate(0.4);
    }
}

/* --- Base & Reset --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Material Symbols --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --- Glass & Atmospheric Effects --- */
.glass-nav {
    background: rgba(11, 19, 38, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-panel {
    background: rgba(49, 57, 77, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* --- Text Effects --- */
.text-glow {
    text-shadow: 0 0 20px rgba(198, 198, 200, 0.3);
}

/* --- Gradients --- */
.hero-gradient {
    background: linear-gradient(to bottom, transparent 40%, #0b1326 100%);
}

.hero-gradient-left {
    background: linear-gradient(to right, #0b1326 0%, rgba(11, 19, 38, 0.4) 50%, transparent 100%);
}

.hero-mask {
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* --- Timeline --- */
.timeline-line {
    background: linear-gradient(to bottom, transparent, #c6c6c8 10%, #c6c6c8 90%, transparent);
}

/* --- Selection --- */
::selection {
    background: #c6c6c8;
    color: #2f3132;
}

/* --- Focus Styles (Accessibility) --- */
:focus-visible {
    outline: 2px solid #c6c6c8;
    outline-offset: 2px;
}

/* --- Scroll Reveal Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- Nav scroll state --- */
.nav-scrolled {
    box-shadow: 0 4px 40px rgba(38, 49, 67, 0.15);
}

/* --- Mobile Menu Overlay --- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(6, 14, 32, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

.mobile-menu a {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #c6c6c8;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.mobile-menu a:hover,
.mobile-menu a.active {
    opacity: 1;
}

.mobile-menu .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    cursor: pointer;
    color: #c6c6c8;
}

/* --- Honeypot (anti-spam) --- */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    tab-index: -1;
}

/* --- Thin scrollbar --- */
.scrollbar-thin::-webkit-scrollbar { width:4px; }
.scrollbar-thin::-webkit-scrollbar-track { background:transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background:#9ca3af; }
.scrollbar-thin { scrollbar-width:thin; scrollbar-color:#d1d5db transparent; }

/* ============================================
   MOBILE ALIGNMENT RULES (< 768px)
   ============================================ */
@media (max-width: 768px) {

    /* RULE 1 — CENTERED on mobile */

    /* Overlines (small uppercase labels above headings) */
    [class*="font-label"][class*="uppercase"],
    [class*="tracking-[0.3em]"][class*="uppercase"],
    [class*="tracking-[0.4em]"][class*="uppercase"],
    [class*="tracking-widest"][class*="uppercase"][class*="text-xs"],
    [class*="tracking-widest"][class*="uppercase"][class*="text-[10px]"] {
        text-align: center;
    }

    /* Headings */
    [class*="font-headline"] {
        text-align: center;
    }

    /* Stats numbers */
    [class*="font-headline"][class*="text-5xl"],
    [class*="font-headline"][class*="text-4xl"][class*="text-or"],
    [class*="font-headline"][class*="text-7xl"] {
        text-align: center;
    }

    /* Stat labels */
    [class*="font-label"][class*="tracking-[0.2em]"][class*="uppercase"] {
        text-align: center;
    }

    /* Buttons & CTAs */
    [class*="bg-or"][class*="uppercase"],
    [class*="border-or"][class*="uppercase"],
    [class*="bg-primary"][class*="uppercase"] {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* CTA link with arrow */
    [class*="inline-flex"][class*="uppercase"][class*="tracking-widest"] {
        justify-content: center;
    }

    /* Button containers */
    [class*="flex"][class*="gap-6"][class*="justify-center"] {
        flex-direction: column;
        align-items: center;
    }

    /* RULE 2 — LEFT ALIGNED on mobile */

    /* Body text paragraphs */
    [class*="font-body"]:not([class*="uppercase"]):not([class*="tracking-widest"]):not([class*="italic"]) {
        text-align: left;
    }

    /* Lists */
    ul, ol {
        text-align: left;
    }

    li {
        text-align: left;
    }

    /* Form labels */
    [class*="font-label"][class*="text-[10px]"]:not([class*="tracking-[0.3em]"]) {
        text-align: left;
    }

    /* Form inputs */
    input, select, textarea {
        text-align: left;
    }

    /* Blockquote */
    blockquote {
        text-align: left;
    }

    /* RULE 3 — SPACING on mobile */

    /* Section padding */
    section {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Body text sizing */
    [class*="font-body"][class*="leading-relaxed"] {
        font-size: 15px;
        line-height: 1.75;
    }

    /* Reduce oversized paddings */
    [class*="px-24"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    [class*="px-12"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* --- Print --- */
@media print {
    .glass-nav, .mobile-menu, footer { display: none; }
    body { background: white; color: black; }
}