/* alth.ing — Scandinavian Nostalgic */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cream: #f2e8d9;
    --warm-white: #faf6f0;
    --terracotta: #e8956a;
    --deep-terracotta: #c2703a;
    --sage: #a3b5a0;
    --dark-sage: #7a8b82;
    --leather: #9a7e65;
    --espresso: #2d2520;
    --amber-glow: #d4a265;
}

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--cream);
    color: var(--espresso);
    font-family: 'Karla', sans-serif;
    font-weight: 300;
}

/* Scroll Container */
.scroll-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.panels {
    display: flex;
    flex-direction: row;
    width: 500vw;
    height: 100vh;
    will-change: transform;
    transition: none;
}

/* Panel Base */
.panel {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.panel-hero { background: var(--cream); }
.panel-about { background: var(--warm-white); }
.panel-process { background: var(--espresso); color: var(--cream); }
.panel-work { background: var(--sage); color: var(--espresso); }
.panel-contact { background: var(--cream); }

/* Panel Content */
.panel-content {
    position: relative;
    z-index: 2;
    max-width: 70vw;
    text-align: left;
}

/* Typography */
.headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 14vw, 12rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 0.92;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.body-text {
    font-family: 'Karla', sans-serif;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    font-weight: 300;
    line-height: 1.7;
    max-width: 480px;
    opacity: 0.85;
}

.subtitle {
    font-family: 'Karla', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 300;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

.mono-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Bokeh Fields */
.bokeh-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.bokeh-1 {
    width: clamp(80px, 12vw, 200px);
    height: clamp(80px, 12vw, 200px);
    top: 15%;
    right: 20%;
    background: radial-gradient(circle, rgba(194, 112, 58, 0.12) 0%, transparent 70%);
    box-shadow: 0 0 40px 10px rgba(194, 112, 58, 0.08);
}

.bokeh-2 {
    width: clamp(60px, 8vw, 160px);
    height: clamp(60px, 8vw, 160px);
    bottom: 25%;
    left: 15%;
    background: radial-gradient(circle, rgba(163, 181, 160, 0.15) 0%, transparent 70%);
    box-shadow: 0 0 40px 10px rgba(163, 181, 160, 0.08);
}

.bokeh-3 {
    width: clamp(40px, 6vw, 120px);
    height: clamp(40px, 6vw, 120px);
    top: 60%;
    right: 35%;
    background: radial-gradient(circle, rgba(232, 149, 106, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 30px 8px rgba(232, 149, 106, 0.06);
}

.bokeh-4 {
    width: clamp(100px, 15vw, 240px);
    height: clamp(100px, 15vw, 240px);
    top: 5%;
    left: 10%;
    background: radial-gradient(circle, rgba(154, 126, 101, 0.08) 0%, transparent 70%);
    box-shadow: 0 0 50px 15px rgba(154, 126, 101, 0.05);
}

.bokeh-5 {
    width: clamp(50px, 7vw, 140px);
    height: clamp(50px, 7vw, 140px);
    bottom: 10%;
    right: 10%;
    background: radial-gradient(circle, rgba(212, 162, 101, 0.12) 0%, transparent 70%);
    box-shadow: 0 0 35px 10px rgba(212, 162, 101, 0.07);
}

.bokeh-6 {
    width: clamp(90px, 10vw, 180px);
    height: clamp(90px, 10vw, 180px);
    top: 20%;
    left: 60%;
    background: radial-gradient(circle, rgba(194, 112, 58, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 40px 10px rgba(194, 112, 58, 0.06);
}

.bokeh-7 {
    width: clamp(70px, 9vw, 150px);
    height: clamp(70px, 9vw, 150px);
    bottom: 30%;
    right: 25%;
    background: radial-gradient(circle, rgba(163, 181, 160, 0.12) 0%, transparent 70%);
    box-shadow: 0 0 35px 10px rgba(163, 181, 160, 0.07);
}

.bokeh-8 {
    width: clamp(50px, 6vw, 100px);
    height: clamp(50px, 6vw, 100px);
    top: 50%;
    left: 20%;
    background: radial-gradient(circle, rgba(232, 149, 106, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 30px 8px rgba(232, 149, 106, 0.06);
}

.bokeh-9 {
    width: clamp(80px, 11vw, 190px);
    height: clamp(80px, 11vw, 190px);
    top: 10%;
    right: 15%;
    background: radial-gradient(circle, rgba(242, 232, 217, 0.08) 0%, transparent 70%);
    box-shadow: 0 0 40px 10px rgba(242, 232, 217, 0.05);
}

.bokeh-10 {
    width: clamp(60px, 8vw, 140px);
    height: clamp(60px, 8vw, 140px);
    bottom: 20%;
    left: 30%;
    background: radial-gradient(circle, rgba(163, 181, 160, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 35px 10px rgba(163, 181, 160, 0.06);
}

.bokeh-11 {
    width: clamp(45px, 5vw, 100px);
    height: clamp(45px, 5vw, 100px);
    top: 45%;
    left: 10%;
    background: radial-gradient(circle, rgba(212, 162, 101, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 30px 8px rgba(212, 162, 101, 0.06);
}

.bokeh-12 {
    width: clamp(70px, 9vw, 160px);
    height: clamp(70px, 9vw, 160px);
    bottom: 40%;
    right: 40%;
    background: radial-gradient(circle, rgba(232, 149, 106, 0.07) 0%, transparent 70%);
    box-shadow: 0 0 35px 10px rgba(232, 149, 106, 0.04);
}

.bokeh-13 {
    width: clamp(90px, 12vw, 200px);
    height: clamp(90px, 12vw, 200px);
    top: 15%;
    left: 25%;
    background: radial-gradient(circle, rgba(45, 37, 32, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 40px 10px rgba(45, 37, 32, 0.06);
}

.bokeh-14 {
    width: clamp(60px, 7vw, 130px);
    height: clamp(60px, 7vw, 130px);
    bottom: 15%;
    right: 20%;
    background: radial-gradient(circle, rgba(194, 112, 58, 0.08) 0%, transparent 70%);
    box-shadow: 0 0 30px 8px rgba(194, 112, 58, 0.05);
}

.bokeh-15 {
    width: clamp(50px, 6vw, 110px);
    height: clamp(50px, 6vw, 110px);
    top: 55%;
    right: 45%;
    background: radial-gradient(circle, rgba(242, 232, 217, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 30px 8px rgba(242, 232, 217, 0.06);
}

.bokeh-16 {
    width: clamp(80px, 10vw, 180px);
    height: clamp(80px, 10vw, 180px);
    top: 20%;
    right: 30%;
    background: radial-gradient(circle, rgba(194, 112, 58, 0.1) 0%, transparent 70%);
    box-shadow: 0 0 40px 10px rgba(194, 112, 58, 0.06);
}

.bokeh-17 {
    width: clamp(65px, 8vw, 150px);
    height: clamp(65px, 8vw, 150px);
    bottom: 25%;
    left: 20%;
    background: radial-gradient(circle, rgba(163, 181, 160, 0.12) 0%, transparent 70%);
    box-shadow: 0 0 35px 10px rgba(163, 181, 160, 0.07);
}

.bokeh-18 {
    width: clamp(45px, 5vw, 100px);
    height: clamp(45px, 5vw, 100px);
    top: 60%;
    left: 50%;
    background: radial-gradient(circle, rgba(232, 149, 106, 0.09) 0%, transparent 70%);
    box-shadow: 0 0 28px 8px rgba(232, 149, 106, 0.05);
}

.bokeh-19 {
    width: clamp(100px, 13vw, 220px);
    height: clamp(100px, 13vw, 220px);
    top: 5%;
    left: 5%;
    background: radial-gradient(circle, rgba(154, 126, 101, 0.08) 0%, transparent 70%);
    box-shadow: 0 0 45px 12px rgba(154, 126, 101, 0.05);
}

/* Film Grain Overlay */
.grain-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Progress Bar */
.progress-bar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: rgba(45, 37, 32, 0.15);
    z-index: 100;
    border-radius: 1px;
}

.progress-fill {
    height: 100%;
    width: 20%;
    background: var(--deep-terracotta);
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* Panel Counter */
.panel-counter {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--espresso);
    opacity: 0.5;
}

.counter-separator {
    margin: 0 0.25em;
}

/* Bokeh Animation */
@keyframes bokeh-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(10px, -8px) scale(1.03); }
    50% { transform: translate(-5px, 12px) scale(0.97); }
    75% { transform: translate(8px, 5px) scale(1.02); }
}

.bokeh-circle {
    animation: bokeh-drift 12s ease-in-out infinite;
}

.bokeh-2, .bokeh-5, .bokeh-8, .bokeh-11, .bokeh-14, .bokeh-17 {
    animation-duration: 16s;
    animation-delay: -3s;
}

.bokeh-3, .bokeh-6, .bokeh-9, .bokeh-12, .bokeh-15, .bokeh-18 {
    animation-duration: 20s;
    animation-delay: -7s;
}

.bokeh-4, .bokeh-7, .bokeh-10, .bokeh-13, .bokeh-16, .bokeh-19 {
    animation-duration: 14s;
    animation-delay: -5s;
}