/* ═══════════════════════════════════════════════════════════════
   simai.tech — CSS Design System
   Midnight-blue palette · Variable fonts · Mountain ridgelines
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────────── */
:root {
    --abyss:      #0a0f2e;
    --deep-navy:  #131a45;
    --ridge-blue: #1e2a6e;
    --electric:   #3949ab;
    --periwinkle: #7986cb;
    --ice-white:  #e8eaf6;
    --cloud-gray: #b0bec5;
    --steel-slate:#546e7a;

    --margin-h: 6vw;
    --grid-gap: 1.5rem;

    /* Font fallbacks */
    --font-display: 'Fraunces', Georgia, serif;
    --font-section: 'Syne', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'Space Mono', monospace;

    /* Variable font hero weight — animated on load */
    --hero-wght: 100;
    /* Manifesto scroll weight */
    --manifesto-wght: 100;
}

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

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

body {
    background-color: var(--abyss);
    color: var(--ice-white);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ── Utility: Mono Label ────────────────────────────────────── */
.mono-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--steel-slate);
}

/* ── Mountain Peak Icon (CSS-only inverted-V) ───────────────── */
.peak-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--periwinkle);
    vertical-align: middle;
    margin-right: 0.4em;
}

/* ══════════════════════════════════════════════════════════════
   MOUNTAIN RIDGELINES — CSS clip-path architecture
   ══════════════════════════════════════════════════════════════ */

/* Shared ridge base */
.mountain-ridge {
    position: absolute;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 2;
}

/* Hero ridge — bottom of hero, barely visible */
.ridge-hero {
    bottom: -1px;
    background-color: var(--deep-navy);
    clip-path: polygon(
        0% 100%,
        0% 70%,
        5% 55%,
        11% 68%,
        18% 30%,
        24% 58%,
        30% 40%,
        36% 72%,
        42% 18%,
        47% 52%,
        53% 35%,
        59% 62%,
        65% 25%,
        71% 58%,
        78% 42%,
        84% 65%,
        90% 38%,
        95% 60%,
        100% 48%,
        100% 100%
    );
}

/* Manifesto top ridge — transitional, more visible */
.ridge-manifesto-top {
    top: -1px;
    background-color: var(--ridge-blue);
    clip-path: polygon(
        0% 0%,
        0% 60%,
        4% 45%,
        9% 70%,
        15% 25%,
        21% 55%,
        28% 38%,
        33% 68%,
        40% 20%,
        46% 48%,
        52% 30%,
        58% 58%,
        64% 15%,
        70% 52%,
        76% 35%,
        82% 62%,
        88% 28%,
        94% 55%,
        100% 40%,
        100% 0%
    );
}

/* Manifesto bottom ridge */
.ridge-manifesto-bottom {
    bottom: -1px;
    background-color: var(--deep-navy);
    clip-path: polygon(
        0% 100%,
        0% 65%,
        6% 48%,
        13% 72%,
        19% 32%,
        25% 60%,
        31% 45%,
        37% 75%,
        44% 22%,
        50% 55%,
        56% 38%,
        62% 65%,
        68% 28%,
        74% 60%,
        80% 40%,
        86% 68%,
        92% 35%,
        97% 58%,
        100% 44%,
        100% 100%
    );
}

/* Contact ridge — electric indigo, the dramatic moment */
.ridge-contact {
    top: -1px;
    background-color: var(--electric);
    clip-path: polygon(
        0% 0%,
        0% 58%,
        5% 42%,
        10% 68%,
        16% 22%,
        22% 52%,
        28% 36%,
        35% 65%,
        41% 18%,
        47% 50%,
        53% 32%,
        59% 62%,
        65% 14%,
        72% 54%,
        78% 38%,
        84% 66%,
        90% 26%,
        95% 56%,
        100% 42%,
        100% 0%
    );
}

/* ══════════════════════════════════════════════════════════════
   VIEWPORT 1 — HERO DECLARATION
   ══════════════════════════════════════════════════════════════ */

.scene-hero {
    position: relative;
    min-height: 100vh;
    background-color: var(--abyss);
    display: flex;
    align-items: center;
    padding: 0 var(--margin-h);
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.hero-label {
    display: block;
    margin-bottom: 2rem;
    color: var(--steel-slate);
}

.hero-heading {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 140px);
    line-height: 1.0;
    color: var(--ice-white);
    font-weight: 900; /* fallback */
    font-variation-settings: 'wght' var(--hero-wght);
    animation: hero-breathe 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    letter-spacing: -0.02em;
}

@keyframes hero-breathe {
    0%   { font-variation-settings: 'wght' 100; opacity: 0.3; }
    40%  { opacity: 1; }
    100% { font-variation-settings: 'wght' 900; opacity: 1; }
}

.hero-sub {
    margin-top: 2.5rem;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 300;
    color: var(--cloud-gray);
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════
   VIEWPORT 2 — PORTFOLIO GRID
   ══════════════════════════════════════════════════════════════ */

.scene-grid {
    background-color: var(--abyss);
    padding: 6rem var(--margin-h) 8rem;
    min-height: 100vh;
}

.section-header {
    margin-bottom: 3rem;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}

/* Column spans */
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* Grid cell base */
.grid-cell {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    cursor: pointer;

    /* Subtle stone-grain texture via layered gradients */
    background-color: var(--deep-navy);
    background-image:
        linear-gradient(15deg,  rgba(255,255,255,0.01) 0%, transparent 60%),
        linear-gradient(-15deg, rgba(255,255,255,0.01) 0%, transparent 60%),
        linear-gradient(30deg,  rgba(30,42,110,0.15)   0%, transparent 50%);

    /* Start off-screen for snap-in animation */
    transform: translateX(100vw);
    opacity: 0;
    transition: transform 0s, opacity 0s;
}

.grid-cell.snapped-in {
    transform: translateX(0);
    opacity: 1;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
}

/* Cell front face */
.cell-front {
    position: absolute;
    inset: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

.cell-category {
    color: var(--steel-slate);
}

.cell-title {
    font-family: var(--font-section);
    font-size: clamp(20px, 2.2vw, 36px);
    font-weight: 800;
    color: var(--ice-white);
    line-height: 1.2;
    margin-top: auto;
    font-variation-settings: 'wght' 800;
}

.cell-year {
    margin-top: 1rem;
    color: var(--periwinkle);
}

/* Cell back face — revealed via clip-path on hover */
.cell-back {
    position: absolute;
    inset: 0;
    padding: 2rem;
    background-color: var(--ridge-blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    z-index: 2;

    /* Hidden by clip-path: clips from right */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-cell:hover .cell-back {
    clip-path: inset(0 0% 0 0);
}

.cell-description {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--cloud-gray);
    line-height: 1.65;
}

.cell-tag {
    color: var(--periwinkle);
}

/* ══════════════════════════════════════════════════════════════
   VIEWPORT 3 — COUNTER BLOBS
   ══════════════════════════════════════════════════════════════ */

.scene-counters {
    position: relative;
    min-height: 100vh;
    background-color: var(--abyss);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.blob-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.blob-unit {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.blob-svg {
    position: absolute;
    width: var(--blob-size, 300px);
    height: var(--blob-size, 300px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(40px);
    opacity: 0.45;
    animation: blob-breathe 8s ease-in-out infinite;
}

/* Blob 2 & 3 get phase-offset animation */
.blob-unit:nth-child(2) .blob-svg { animation-delay: -2.7s; }
.blob-unit:nth-child(3) .blob-svg { animation-delay: -5.1s; }

@keyframes blob-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
    33%       { transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
    66%       { transform: translate(-50%, -50%) scale(0.94) rotate(-3deg); }
}

.counter-unit {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.counter-number {
    font-family: var(--font-display);
    font-size: clamp(72px, 9vw, 120px);
    font-weight: 900;
    font-variation-settings: 'wght' 900;
    color: var(--ice-white);
    line-height: 1;
    display: block;
    min-width: 2ch;
    text-align: center;
    /* Animate in */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.counter-number.counting {
    opacity: 1;
}

.counter-suffix {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    color: var(--periwinkle);
    margin-left: 0.1em;
}

.counter-label {
    margin-top: 1.2rem;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: var(--cloud-gray);
    line-height: 1.5;
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════
   VIEWPORT 4 — MANIFESTO
   ══════════════════════════════════════════════════════════════ */

.scene-manifesto {
    position: relative;
    min-height: 100vh;
    background-color: var(--deep-navy);
    padding: 10rem var(--margin-h) 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.manifesto-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.manifesto-label {
    display: block;
    margin-bottom: 3rem;
    color: var(--periwinkle);
}

.manifesto-text {
    /* scroll-driven animation via JS for broader browser support */
}

.manifesto-line {
    font-family: var(--font-body);
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.5;
    color: var(--cloud-gray);
    margin-bottom: 0.8rem;
    /* Default thin weight, scroll-driven JS will update */
    font-weight: 100;
    font-variation-settings: 'wght' 100;
    transition: font-variation-settings 0.3s ease, color 0.3s ease;
}

.manifesto-line.hardened {
    font-variation-settings: 'wght' 700;
    color: var(--ice-white);
}

/* ══════════════════════════════════════════════════════════════
   VIEWPORT 5 — CONTACT FINALE
   ══════════════════════════════════════════════════════════════ */

.scene-contact {
    position: relative;
    min-height: 100vh;
    background-color: var(--abyss);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rem var(--margin-h) 6rem;
    overflow: hidden;
}

.contact-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.contact-name {
    font-family: var(--font-display);
    font-size: clamp(72px, 12vw, 160px);
    font-weight: 900;
    font-variation-settings: 'wght' 900;
    color: var(--ice-white);
    line-height: 1;
    letter-spacing: -0.03em;
}

.contact-email {
    font-family: var(--font-body);
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 100;
    font-variation-settings: 'wght' 100;
    color: var(--cloud-gray);
    text-decoration: none;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--electric);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-email:hover {
    color: var(--ice-white);
    border-color: var(--periwinkle);
}

.contact-location {
    color: var(--ridge-blue);
    margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile collapse
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --margin-h: 5vw;
    }

    /* All grid cells collapse to full width */
    .span-4,
    .span-5,
    .span-7,
    .span-8,
    .span-12 {
        grid-column: span 12;
    }

    .hero-heading {
        font-size: clamp(40px, 12vw, 72px);
    }

    /* Blob units reflow to column */
    .blob-stage {
        flex-direction: column;
        justify-content: center;
        gap: 4rem;
        padding: 6rem var(--margin-h);
        align-items: center;
    }

    .blob-unit {
        position: relative;
        left: auto !important;
        transform: none;
    }

    .mountain-ridge {
        height: 70px;
    }

    .scene-counters {
        min-height: auto;
        padding: 4rem 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .hero-heading {
        animation: none;
        font-variation-settings: 'wght' 900;
        opacity: 1;
    }

    .blob-svg {
        animation: none;
    }

    .grid-cell {
        transform: none;
        opacity: 1;
    }

    .grid-cell.snapped-in {
        transition: none;
    }

    .manifesto-line {
        font-variation-settings: 'wght' 400;
        transition: none;
    }
}