/* ============================================================
   haskell.day - Complete Design System
   Scandinavian zen aesthetic with ma-negative-space layout
   ============================================================ */

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
    /* Palette - Ethereal Blue */
    --void-white: #FAFCFF;
    --ice-surface: #F0F5FA;
    --light-blue-fade: #E8EEF4;
    --frost-veil: #E0EAF2;
    --winter-glass: #C8D8E8;
    --deep-fjord: #6B8BAE;
    --nordic-slate: #3A5068;
    --midnight-text: #2B3A4A;
    --abyss: #1A2530;
    --crystal-accent: #A8C8E8;

    /* Typography */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-code: 'JetBrains Mono', monospace;

    /* Spacing and Layout */
    --void-height-opening: 200vh;
    --void-height-closing: 150vh;
    --transition-void-height: 100vh;
    --content-max-width: 52ch;

    /* Animations */
    --blur-focus-duration: 600ms;
    --blur-focus-duration-large: 1200ms;
    --breath-duration: 8s;
    --scroll-transition: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

/* ============================================================
   Global Styles
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(
        180deg,
        var(--void-white) 0%,
        var(--ice-surface) 15%,
        var(--light-blue-fade) 25%,
        var(--frost-veil) 40%,
        var(--deep-fjord) 70%,
        var(--abyss) 100%
    );
    background-attachment: fixed;
    color: var(--midnight-text);
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    background-size: 100% 400vh;
}

/* ============================================================
   Crystalline Environment Layer
   ============================================================ */

.crystalline-env {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
}

.lattice-structure {
    animation: breathing 8s ease-in-out infinite;
}

@keyframes breathing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.voronoi-pattern {
    animation: frostSpread 30s ease-in-out infinite;
}

@keyframes frostSpread {
    0%, 100% {
        opacity: 0.04;
    }
    50% {
        opacity: 0.06;
    }
}

/* ============================================================
   Content Positioning and Spacing
   ============================================================ */

section {
    position: relative;
    z-index: 10;
}

.void-opening {
    height: 200vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.void-content {
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.void-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 14rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.9;
    color: var(--midnight-text);
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 600ms var(--scroll-transition), opacity 600ms var(--scroll-transition);
    text-align: center;
}

.void-title.in-view {
    filter: blur(0);
    opacity: 1;
}

.void-title.out-of-view {
    filter: blur(4px);
    opacity: 0.6;
}

/* Content islands */
.content-island {
    min-height: 150vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(3rem, 8vw, 8rem);
    position: relative;
}

.island-content {
    max-width: 52ch;
    padding: clamp(3rem, 8vw, 8rem);
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 600ms var(--scroll-transition), opacity 600ms var(--scroll-transition);
}

.island-content.in-view {
    filter: blur(0);
    opacity: 1;
}

.island-content.out-of-view {
    filter: blur(4px);
    opacity: 0.6;
}

/* Asymmetric positioning */
.left-third {
    margin-left: 5%;
}

.right-quarter {
    margin-left: auto;
    margin-right: 10%;
}

.centered-elevated {
    margin: 0 auto;
}

.low-left {
    margin-left: 5%;
    margin-top: 20vh;
}

/* Transition voids */
.transition-void {
    height: 100vh;
    position: relative;
}

.hero-section {
    height: 200vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.crystal-hero {
    width: clamp(30vw, 60vw, 60vw);
    height: auto;
    margin: 0 auto;
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 1200ms var(--scroll-transition), opacity 1200ms var(--scroll-transition);
}

.crystal-hero.in-view {
    filter: blur(0);
    opacity: 1;
}

.crystal-hero.out-of-view {
    filter: blur(4px);
    opacity: 0.6;
}

.hero-caption {
    font-family: var(--font-display);
    font-size: clamp(8rem, 30vw, 40vw);
    font-weight: 300;
    color: var(--crystal-accent);
    opacity: 0.1;
    text-align: center;
    margin-top: -4vw;
    letter-spacing: -0.05em;
    animation: breathing 8s ease-in-out infinite;
}

/* Void closing section */
.void-closing {
    height: 150vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.closing-content {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.closing-lambda {
    width: 20vw;
    height: auto;
    opacity: 0.3;
    filter: blur(4px);
    transition: opacity 600ms var(--scroll-transition), filter 600ms var(--scroll-transition);
}

.closing-lambda.dissolving {
    opacity: 0;
    filter: blur(8px);
}

/* ============================================================
   Typography Styles
   ============================================================ */

.island-heading {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 9rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.9;
    color: var(--midnight-text);
    margin-bottom: clamp(2rem, 4vw, 4rem);
    text-transform: capitalize;
}

.island-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--midnight-text);
    max-width: 52ch;
}

/* ============================================================
   Code Specimen Styles
   ============================================================ */

.code-specimen {
    font-family: var(--font-code);
    font-size: clamp(0.85rem, 1vw, 1.1rem);
    line-height: 2;
    letter-spacing: 0.02em;
    color: var(--deep-fjord);
    border-left: 1px solid var(--winter-glass);
    padding-left: clamp(1.5rem, 3vw, 3rem);
    margin: clamp(2rem, 4vw, 4rem) 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: transparent;
    overflow-x: auto;
}

.code-specimen code {
    display: block;
}

/* ============================================================
   Crystal Render Styles
   ============================================================ */

.crystal-render {
    width: clamp(200px, 30vw, 400px);
    height: auto;
    margin: clamp(2rem, 8vw, 8rem);
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 600ms var(--scroll-transition), opacity 600ms var(--scroll-transition), transform 0.3s ease-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crystal-render.in-view {
    filter: blur(0);
    opacity: 1;
}

.crystal-render.out-of-view {
    filter: blur(4px);
    opacity: 0.6;
}

.crystal-render svg {
    width: 100%;
    height: auto;
}

/* Parallax micro-effect on scroll */
.crystal-render {
    will-change: transform;
}

/* ============================================================
   Resource List Styles
   ============================================================ */

.resource-list {
    list-style: none;
    max-width: 52ch;
}

.resource-list li {
    margin: clamp(1rem, 2vw, 2rem) 0;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    letter-spacing: 0.05em;
}

.resource-link {
    color: var(--deep-fjord);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 200ms var(--scroll-transition);
    position: relative;
}

.resource-link:hover {
    border-bottom-color: var(--crystal-accent);
    box-shadow:
        0 2px 4px rgba(168, 200, 232, 0.2),
        0 4px 8px rgba(200, 216, 232, 0.15),
        0 6px 12px rgba(224, 234, 242, 0.1);
}

/* ============================================================
   Scroll-Responsive Effects
   ============================================================ */

/* Blur-focus reveal animations */
@keyframes blurToSharp {
    0% {
        filter: blur(8px);
        opacity: 0.3;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes blurToSharpLarge {
    0% {
        filter: blur(8px);
        opacity: 0.3;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes sharpToBlur {
    0% {
        filter: blur(0);
        opacity: 1;
    }
    100% {
        filter: blur(4px);
        opacity: 0.6;
    }
}

/* ============================================================
   Interactive Elements
   ============================================================ */

a {
    color: var(--deep-fjord);
    text-decoration: none;
    transition: all 200ms var(--scroll-transition);
}

a:hover {
    color: var(--crystal-accent);
}

/* ============================================================
   Responsive Design
   ============================================================ */

@media (max-width: 768px) {
    .island-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 2rem 1rem;
    }

    .void-title {
        font-size: clamp(3rem, 10vw, 8rem);
    }

    .island-heading {
        font-size: clamp(2rem, 6vw, 4rem);
    }

    .hero-caption {
        font-size: clamp(5rem, 20vw, 25vw);
    }

    .crystal-render {
        width: 80vw;
        margin: 2rem auto;
    }

    .crystal-hero {
        width: 80vw;
    }

    .content-island {
        min-height: 100vh;
        padding: 2rem 1rem;
    }

    .transition-void {
        height: 80vh;
    }
}

/* ============================================================
   Progress Indicator
   ============================================================ */

::after {
    content: '';
    position: fixed;
    right: 0;
    top: 0;
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, var(--winter-glass) 0%, transparent 100%);
    z-index: 999;
    opacity: 0.2;
    pointer-events: none;
}

/* ============================================================
   Prevent FOUC (Flash of Unstyled Content)
   ============================================================ */

html {
    background: var(--void-white);
}

/* Ensure smooth transitions */
html {
    scroll-behavior: smooth;
}

/* Remove default scrollbar styling for cleaner look */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--winter-glass);
    border-radius: 4px;
    opacity: 0.2;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 0.3;
}