/* ============================================================
   lsware.net — styles.css
   Palette:
     Abyss Navy:       #0D1B2A
     Dark Steel:       #1B2A3B
     Mid Steel:        #243447
     Metallic Silver:  #C8D6DF
     Chrome Highlight: #E8F0F4
     Oxidized Brass:   #B5860D
     Near-White Text:  #F0F4F7
   Fonts: Bebas Neue, DM Serif Display, Inter, Space Mono
   ============================================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #0D1B2A;
    color: #C8D6DF;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ─── Typography ────────────────────────────────────────── */
.hero-word {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22vw;
    line-height: 0.88;
    letter-spacing: 0.02em;
    color: #F0F4F7;
    text-transform: uppercase;
    position: absolute;
    bottom: 8vh;
    left: -0.04em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-word.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-sub {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: clamp(1.4rem, 3.2vw, 3.2vw);
    color: #B5860D;
    position: absolute;
    bottom: 4.5vh;
    left: 1.5vw;
    letter-spacing: 0;
    transform: rotate(-2deg);
    opacity: 0;
    transition: opacity 0.6s ease;
    transition-delay: 0.8s;
}

.hero-sub.visible {
    opacity: 1;
}

.oblique-quote {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: clamp(2rem, 3.2vw, 3.2vw);
    color: #B5860D;
    line-height: 1.2;
    transform: rotate(-2deg);
    margin-bottom: 2rem;
    display: inline-block;
}

.card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 5vw);
    letter-spacing: 0.02em;
    color: #F0F4F7;
    line-height: 1.0;
    margin-bottom: 1rem;
}

.close-line {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 8vw;
    letter-spacing: 0.02em;
    color: #F0F4F7;
    text-transform: uppercase;
    display: block;
    padding-left: 0;
    margin-bottom: 1.5rem;
    cursor: default;
    transition: color 0.4s ease;
}

.close-line:hover {
    color: #B5860D;
}

.body-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #C8D6DF;
    letter-spacing: 0.01em;
    margin-bottom: 1.4rem;
}

.card-body {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #C8D6DF;
    letter-spacing: 0.01em;
}

.micro-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #B5860D;
    display: block;
    margin-bottom: 1rem;
}

/* ─── NAV ────────────────────────────────────────────────── */
#site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2.5vw;
    border-top: 1px solid #C8D6DF;
    background: rgba(13, 27, 42, 0.92);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#site-nav.nav-visible {
    opacity: 1;
    transform: translateY(0);
}

.nav-logo {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #C8D6DF;
}

.nav-menu-wrap {
    position: relative;
}

.nav-dots {
    background: none;
    border: none;
    color: #C8D6DF;
    font-size: 1.4rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    font-family: 'Space Mono', monospace;
    transition: color 0.3s;
}

.nav-dots:hover {
    color: #B5860D;
}

.nav-links {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    list-style: none;
    background: rgba(27, 42, 59, 0.96);
    border: 1px solid #1B2A3B;
    padding: 1rem 1.5rem;
    min-width: 160px;
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-links.open {
    display: flex;
}

.nav-links a {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #C8D6DF;
    text-decoration: none;
    transition: color 0.25s;
}

.nav-links a:hover {
    color: #B5860D;
}

/* ─── ZONE SHARED ───────────────────────────────────────── */
.zone {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ─── ZONE 1 ─── Hero ───────────────────────────────────── */
.zone1 {
    height: 100vh;
    min-height: 600px;
    background: #0D1B2A;
}

/* Bokeh layer */
.bokeh-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.bokeh-layer.visible {
    opacity: 1;
}

.bokeh {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.bokeh1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #243447 0%, transparent 70%);
    top: -100px;
    left: -150px;
}

.bokeh2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #1B2A3B 0%, transparent 70%);
    top: 10%;
    right: 5%;
}

.bokeh3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #243447 0%, transparent 70%);
    bottom: 15%;
    left: 30%;
}

.bokeh4 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, #1B2A3B 0%, transparent 70%);
    bottom: 0;
    right: 20%;
}

.bokeh5 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, #0D1B2A 0%, #1B2A3B 50%, transparent 70%);
    top: 40%;
    left: 55%;
}

/* Noise grain overlay */
.noise-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Geometric triangle */
.geo-triangle {
    position: absolute;
    width: 180px;
    height: 240px;
    background: #B5860D;
    opacity: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 18vh;
    left: 8vw;
    transform: rotate(25deg) translateX(-80px);
    z-index: 3;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}

.geo-triangle.visible {
    opacity: 0.35;
    transform: rotate(25deg) translateX(0);
}

/* Slash interference lines */
.slash-line {
    position: absolute;
    width: 3px;
    background: #C8D6DF;
    opacity: 0.25;
    z-index: 3;
    pointer-events: none;
}

.slash1 {
    height: 220px;
    top: 12%;
    right: 18%;
    transform: rotate(35deg);
}

.slash2 {
    height: 160px;
    top: 35%;
    right: 28%;
    transform: rotate(35deg);
}

.slash3 {
    height: 180px;
    top: 55%;
    right: 12%;
    transform: rotate(35deg);
}

/* Hero text wrap */
.hero-text-wrap {
    position: absolute;
    inset: 0;
    z-index: 4;
}

/* ─── ZONE 2 ─── Oblique intro ──────────────────────────── */
.zone2 {
    background: #0D1B2A;
    padding: 10vw 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
}

.zone2-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    padding: 0 4vw;
}

.zone2-counter {
    grid-column: 1 / 4;
    display: flex;
    justify-content: flex-end;
    padding-right: 3vw;
}

.zone2-content {
    grid-column: 4 / 10;
    margin-left: -3vw; /* intentional grid violation */
}

.hollow-circle {
    width: 250px;
    height: 250px;
    border: 1px solid #C8D6DF;
    border-radius: 50%;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ─── ZONE 3 ─── Feature break with trapezoid cards ─────── */
.zone3 {
    background: #1B2A3B;
    padding: 8vw 4vw;
}

.zone3-inner {
    display: flex;
    gap: 2vw;
    align-items: flex-start;
}

.trapcard {
    flex: 1;
    background: #243447;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
    padding: 3rem 2.5rem 3rem 2.5rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trapcard.visible {
    opacity: 1;
    transform: translateY(0);
}

.trapcard1 {
    transition-delay: 0s;
}

.trapcard2 {
    margin-top: 40px;
    transition-delay: 0.15s;
}

.trapcard3 {
    margin-top: 80px;
    transition-delay: 0.3s;
}

/* ─── ZONE 4 ─── Narrative column ───────────────────────── */
.zone4 {
    background: #1B2A3B;
    padding: 10vw 4vw 10vw;
}

.zone4-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    min-height: 60vh;
}

.decorative-numeral {
    position: absolute;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(300px, 40vw, 600px);
    line-height: 1;
    background: linear-gradient(180deg, #C8D6DF 0%, #E8F0F4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    opacity: 0.08;
    left: 0;
    top: -0.1em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.zone4-circle {
    position: absolute;
    top: 4vw;
    right: 4vw;
    width: 200px;
    height: 200px;
    opacity: 0.3;
}

.narrative-col {
    grid-column: 2 / 7;
    position: relative;
    z-index: 1;
    padding-top: 4vw;
}

/* ─── ZONE 5 ─── Close ──────────────────────────────────── */
.zone5 {
    background: #0D1B2A;
    padding: 8vw 0 8vw;
}

.close-rule {
    border: none;
    border-top: 1px solid #C8D6DF;
    margin: 0 0 2rem 0;
    opacity: 0.5;
}

.close-label {
    padding-left: 0;
    margin-left: 0;
}

/* ─── Keyframe Animations ───────────────────────────────── */
@keyframes bokeh-drift {
    0%   { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0px);  opacity: 1; }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Intersection-based reveal helpers ─────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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