/* ================================
   N27 FONT FACES
   ================================ */
@font-face {
    font-family: 'N27';
    src: url('assets/fonts/n27-bold-webfont.woff2') format('woff2'),
         url('assets/fonts/n27-bold-webfont.woff') format('woff'),
         url('assets/fonts/n27-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'N27';
    src: url('assets/fonts/n27-medium-webfont.woff2') format('woff2'),
         url('assets/fonts/n27-medium-webfont.woff') format('woff'),
         url('assets/fonts/n27-medium-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'N27';
    src: url('assets/fonts/n27-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/n27-regular-webfont.woff') format('woff'),
         url('assets/fonts/n27-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'N27';
    src: url('assets/fonts/n27-light-webfont.woff2') format('woff2'),
         url('assets/fonts/n27-light-webfont.woff') format('woff'),
         url('assets/fonts/n27-light-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'N27';
    src: url('assets/fonts/n27-extralight-webfont.woff2') format('woff2'),
         url('assets/fonts/n27-extralight-webfont.woff') format('woff'),
         url('assets/fonts/n27-extralight-webfont.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'N27';
    src: url('assets/fonts/n27-thin-webfont.woff2') format('woff2'),
         url('assets/fonts/n27-thin-webfont.woff') format('woff'),
         url('assets/fonts/n27-thin-webfont.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: block;
}

/* ================================
   CSS CUSTOM PROPERTIES
   ================================ */
:root {
    /* Colors */
    --color-bg: #0a0c10;
    --color-overlay: #0d1117;
    --color-accent: #8FDCFF;  /* Main accent - used with color-dodge */

    /* Sizing */
    --content-padding: 8vw;
    --content-padding-mobile: calc(100% / 6);  /* 1/6 from edge on mobile */

    /* Animation */
    --transition-smooth: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ================================
   RESET & BASE
   ================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'N27', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-accent);
    line-height: 1.6;
    overflow-x: hidden;
}

.work::-webkit-scrollbar {
    display: none;
}

/* ================================
   HERO SECTION - LAYER SYSTEM
   ================================ */
.hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    z-index: 1;
    /* Pre-promote for filter animation. Blurring a single composited layer
       is one GPU texture op — much cheaper than backdrop-filter across layers. */
    will-change: filter;
}

/* Scroll distance for the hero-to-content transition.
   200vh body height = 100vh scrollable range = transition scroll distance. */
.hero-scroll-spacer {
    height: 140vh;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Dark tint overlay — simple opacity fade, no backdrop-filter.
   The blur itself is applied directly to .hero via filter: blur(). */
.hero-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    background: rgba(10, 12, 16, 0);
    pointer-events: none;
}

/* Base layer styles */
.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Layer 1: Background image */
.layer-bg {
    z-index: 1;
}

.bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Layer 2: Shadow overlay - hard light blend */
.layer-shadow {
    z-index: 2;
    mix-blend-mode: hard-light;
    opacity: 0; /* Fades in on load */
    will-change: opacity;
}

.shadow-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

/* Layer 3: Color overlay */
.layer-color-overlay {
    z-index: 3;
    background-color: var(--color-overlay);
    opacity: 0.65;
}

/* Layer 4: Triangulation canvas - UNDER gradient, color-dodge */
.layer-triangulation {
    z-index: 4;
    mix-blend-mode: color-dodge;
}

#triangulation-canvas {
    width: 100%;
    height: 100%;
    /* Pre-promote to its own GPU compositing layer before it becomes visible,
       avoiding a promotion-jank hit when the intro ends. */
    will-change: transform;
}

/* Layer 5: Gradient overlay (bottom fade) */
.layer-gradient {
    z-index: 5;
    background: linear-gradient(
        to top,
        var(--color-bg) 0%,
        var(--color-bg) 10%,
        transparent 50%
    );
}

/* Layer 6: Content layer (text + arrow) - color-dodge */
.layer-content {
    z-index: 6;
    pointer-events: auto;
    mix-blend-mode: color-dodge;
}

/* ================================
   HERO TEXT CONTENT
   ================================ */
.hero-text {
    position: absolute;
    top: 22%;
    left: var(--content-padding);
    max-width: 600px;
    pointer-events: auto;
    color: var(--color-accent);
}

/* Title - MIKAEL HUUHTANEN */
.title {
    font-size: clamp(1.6rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
}

.title-first,
.title-last {
    display: block;
}

/* Tagline - elevator pitch */
.tagline {
    font-size: 0.85rem;
    font-weight: 200;
    color: var(--color-accent);
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-wrap: pretty;
    opacity: 0;
    margin-bottom: 2rem;
    /* max-width synced to .title-first width by JS */
}


/* ================================
   WORK SECTION
   ================================ */
.work {
    position: fixed;
    top: 0;
    left: 58%;
    width: 42%;
    height: 100%;
    overflow-y: auto;
    z-index: 10;
    /* Top matches hero text top (22vh). Right mirrors hero text left (8vw). */
    padding: 22vh var(--content-padding) 8rem 2vw;
    background-color: rgba(10, 12, 16, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
    scrollbar-width: none;
    will-change: opacity;
    opacity: 0;
    pointer-events: none;
}

.work-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ================================
   PROJECT CARDS
   ================================ */
.project-card {
    display: block;
    text-decoration: none;
    color: var(--color-accent);
    position: relative;
    width: 100%;
    max-width: 480px;
    align-self: flex-end;
}

.project-card-image {
    width: 100%;
    aspect-ratio: 3 / 1;
    background-color: rgba(143, 220, 255, 0.04);
    overflow: hidden;
    position: relative;
}

.project-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 28, 52, 0.15);
    pointer-events: none;
}

.project-card--light .project-card-image::after {
    background: rgba(8, 28, 52, 0.55);
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.4s ease;
    opacity: 0.85;
}

.project-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card-image-placeholder span {
    display: none;
}

.project-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: -2.4rem;
    padding: 0 0 0;
    transform: translateY(0.2rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    mix-blend-mode: color-dodge;
    z-index: 1;
}

.project-card-title {
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}

.project-card-meta {
    font-size: 0.73rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
    text-wrap: balance;
}

/* Card hover */
.project-card:hover .project-card-image img {
    transform: scale(1.02);
    opacity: 1;
}

.project-card:hover .project-card-title {
    opacity: 0.85;
}

/* ================================
   PROJECT PAGE STYLES
   ================================ */
.project-page {
    min-height: 100vh;
    background-color: var(--color-bg);
    /* Override global blue — project pages use near-white on dark */
    color: rgba(229, 231, 234, 0.5);
    position: relative;
    overflow-x: clip; /* clip doesn't create a scroll container, preserving sticky on children */
}

/* Triangulation accent — fixed in corner, always visible */
.project-accent-link {
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(70px, 7vw, 110px);
    z-index: 10;
    cursor: pointer;
}

.project-accent {
    display: block;
    width: 100%;
    opacity: 1;
}

/* Nav + header: full-width zone above the two-column grid */
.project-top {
    padding: 3rem clamp(2rem, 8vw, 8rem) 4rem;
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.project-nav {
    margin-bottom: 4rem;
}

.project-back {
    font-size: 1.1rem;
    color: rgba(229, 231, 234, 1);
    text-decoration: none;
    transition: opacity 0.3s ease;
    line-height: 1;
}

.project-back:hover {
    opacity: 0.5;
}

.project-header {
    padding-top: 2.5rem;
}

/* One-sentence problem summary — sits between title and intro */
.project-summary {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(229, 231, 234, 1);
    line-height: 1.5;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(229, 231, 234, 0.15);
    text-wrap: balance;
}

/* Status tag — sits above label, faint */
.project-status {
    font-size: 0.72rem;
    font-weight: 200;
    text-transform: uppercase;
    color: rgba(229, 231, 234, 0.4);
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

/* Explainer text above title — same specs as body */
.project-label {
    font-size: 0.85rem;
    font-weight: 200;
    color: rgba(229, 231, 234, 1);
    line-height: 1.35;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

/* Title: exact same specs as hero name */
.project-page-title {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: rgba(229, 231, 234, 0.9);
}

/* Two-column layout: sticky text (1fr) | scrolling images (2fr) */
.project-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
    padding: 0 clamp(2rem, 8vw, 8rem) 10rem;
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.project-text-col {
    position: sticky;
    top: 0;
    padding-top: 3rem;
}

.project-images-col {
    /* padding-top set by JS to align first image with .project-intro */
    min-width: 0;
}

/* Intro: exact same specs as hero tagline */
.project-intro {
    font-size: 0.85rem;
    font-weight: 200;
    color: rgba(229, 231, 234, 1);
    line-height: 1.35;
    letter-spacing: 0.1em;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
}

/* Content sections */
.project-section {
    margin-bottom: 1.5rem;
}

/* Extralight, all-caps, tracking 100, slightly larger than body, full opacity */
.project-section-title {
    font-size: 0.9rem;
    font-weight: 200;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(229, 231, 234, 1);
    margin-bottom: 0.6rem;
    margin-top: 1.25rem;
}

.project-section p {
    font-size: 0.85rem;
    font-weight: 200;
    color: rgba(229, 231, 234, 1);
    line-height: 1.35;
    letter-spacing: 0.1em;
    margin-bottom: 0.9em;
}

/* Images */
.project-figure {
    margin-bottom: 1.5rem;
}

.project-image-area {
    width: 100%;
    background-color: rgba(229, 231, 234, 0.02);
    border: 1px solid rgba(229, 231, 234, 0.06);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image-area img {
    width: 100%;
    height: auto;
    display: block;
}

.project-image-area span {
    padding: 4rem 2rem;
    font-size: 0.63rem;
    font-weight: 200;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(229, 231, 234, 0.12);
}

/* Expandable image (tap to view full size) */
.project-figure--expandable .project-image-area {
    cursor: zoom-in;
    position: relative;
}

.project-figure--expandable .project-image-area::after {
    content: 'click to expand';
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    font-size: 0.6rem;
    font-weight: 200;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(229, 231, 234, 0.3);
    pointer-events: none;
}

/* Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.92);
    z-index: 1000;
    overflow: auto;
    cursor: zoom-out;
    padding: 2rem;
    box-sizing: border-box;
}

.lightbox-overlay.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.lightbox-overlay img {
    max-width: min(800px, 100%);
    height: auto;
    display: block;
    margin: auto;
    cursor: zoom-in;
    transition: max-width 0.3s ease;
}

.lightbox-overlay.is-zoomed {
    cursor: default;
}

.lightbox-overlay.is-zoomed img {
    max-width: calc(100vw - 4rem);
    width: auto;
    cursor: zoom-out;
}

.lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: rgba(229, 231, 234, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1001;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.lightbox-close:hover {
    color: rgba(229, 231, 234, 1);
}

.project-caption {
    font-size: 0.67rem;
    font-weight: 200;
    letter-spacing: 0.1em;
    color: rgba(229, 231, 234, 0.2);
    margin-top: 0.75rem;
}

/* Demo embed */
.project-demo-section {
    max-width: 800px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-demo-label {
    font-size: 0.68rem;
    font-weight: 200;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(229, 231, 234, 0.22);
    margin-bottom: 1rem;
    align-self: flex-start;
}

.project-demo-frame {
    width: 390px;
    max-width: 100%;
    aspect-ratio: 390 / 844;
    background-color: rgba(229, 231, 234, 0.02);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(217, 119, 87, 0.25),
        0 8px 48px rgba(217, 119, 87, 0.18);
}

.project-demo-frame iframe {
    width: 390px;
    height: 844px;
    border: none;
    display: block;
    transform-origin: top left;
}

/* ================================
   RESPONSIVE - MOBILE
   ================================ */
@media (max-width: 768px) {
    :root {
        --content-padding: var(--content-padding-mobile);
    }

    .hero {
        min-height: 100svh;
    }

    .hero-text {
        top: 20%;
        left: var(--content-padding);
        right: var(--content-padding);
        max-width: none;
    }

    /* Significantly larger text on mobile */
    .title {
        font-size: clamp(2rem, 11vw, 4rem);
        letter-spacing: -0.04em;
    }

    .tagline {
        font-size: 1rem;
        font-weight: 400;
    }

    .work {
        left: 0;
        width: 100%;
        padding: 2rem var(--content-padding);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        -webkit-mask-image: none;
        mask-image: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .project-card-title {
        font-size: clamp(1rem, 5vw, 1.35rem);
    }

}

@media (max-width: 1200px) {
    .project-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .project-text-col {
        position: static;
        padding-top: 3rem;
        padding-bottom: 2rem;
        max-width: 560px;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .project-page-title {
        font-size: clamp(1.6rem, 7.5vw, 3.2rem);
        overflow-wrap: break-word;
    }

    .project-images-col {
        padding-top: 0 !important; /* override JS-set value when stacked */
        padding-bottom: 5rem;
    }
}

/* ================================
   LOADING STATE
   ================================ */
.loading .layer-shadow {
    opacity: 0;
}

/* ================================
   REDUCED MOTION
   ================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .layer-shadow {
        opacity: 1 !important;
    }
}

/* ================================
   UTILITY
   ================================ */
.js-loading {
    visibility: hidden;
}

.js-loaded {
    visibility: visible;
}