/* ============================================================
   tsundere.life — Cold-to-Warm CSS Architecture
   Fonts: JetBrains Mono" (Google Fonts) at weights 300 500 700
          Space Mono" (Google Fonts) at 400
   Space Mono's slightly wider proportions and rounder ink traps feel noticeably more human.
   14px: `// whatever.`
   ============================================================ */

/* Google Fonts are loaded in HTML */

/* CSS Custom Properties — Temperature System */
:root {
    /* Palette */
    --temp-cold: #0D0D0D;
    --temp-warm: #C4540A;
    --phosphor-white: #E8E8E0;
    --ash-divide: #1C1C1C;
    --amber-leak: #D4700A;
    --burnt-core: #C4540A;
    --ember-glow: #E8752A;
    --plum-depth: #2A0D1C;
    --warm-void: #F2C28A;
    --frost-glass: rgba(232, 232, 224, 0.04);
    --frost-border: rgba(232, 232, 224, 0.08);

    /* Font stacks */
    --font-cold: 'JetBrains Mono', monospace;
    --font-warm: 'Space Mono', monospace;

    /* Scroll progress (updated by JS) */
    --scroll-progress: 0;
}

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

html {
    scroll-behavior: auto;
}

body {
    background-color: var(--temp-cold);
    color: var(--phosphor-white);
    font-family: var(--font-cold);
    font-size: 15px;
    line-height: 1.85;
    font-weight: 300;
    overflow-x: hidden;
    position: relative;
}

/* ============================================================
   Gradient Mesh Background
   ============================================================ */
.gradient-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 50%, #C4540A 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, #2A0D1C 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, #E8752A 0%, transparent 50%),
        linear-gradient(180deg, #0D0D0D 0%, #1C1C1C 100%);
    background-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.6s ease;
    filter: blur(0px);
    transform: translateY(calc(var(--scroll-progress) * -20%));
    will-change: transform, opacity, filter;
}

/* ============================================================
   Noise Overlay (static texture)
   ============================================================ */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    animation: noiseDrift 60s linear infinite;
}

@keyframes noiseDrift {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

/* ============================================================
   Terminal Decorations
   ============================================================ */
.terminal-decor {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.terminal-decor span {
    position: absolute;
    font-family: var(--font-cold);
    color: var(--phosphor-white);
    opacity: 0.04;
    font-size: 13px;
    font-weight: 300;
}

.td-chevron   { top: 15%; left: 5%; }
.td-bracket   { top: 35%; right: 8%; }
.td-sys       { top: 60%; left: 12%; font-size: 10px; letter-spacing: 0.05em; }
.td-chevron2  { bottom: 25%; right: 15%; }
.td-bracket2  { bottom: 15%; left: 20%; }

/* ============================================================
   Sections — Sticky Stack Parallax
   ============================================================ */
.section {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 3;
    display: flex;
    align-items: center;
}

/* Section backgrounds */
.cold-shell {
    background-color: #0D0D0D;
}

.static-between {
    background-color: #111111;
}

.the-reveal {
    background-color: transparent;
}

.ember-zone {
    background-color: rgba(196, 84, 10, 0.08);
}

.warm-exit {
    background-color: rgba(212, 112, 10, 0.06);
}

/* Content column */
.section-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 640px;
    padding: 0 48px;
    margin-left: auto;
    margin-right: auto;
}

/* Left-align within constrained column */
@media (min-width: 900px) {
    .section-inner {
        margin-left: 12vw;
        margin-right: auto;
    }
}

/* ============================================================
   Section Labels
   ============================================================ */
.section-label {
    font-family: var(--font-cold);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: var(--phosphor-white);
    opacity: 0.35;
    margin-bottom: 32px;
    text-transform: lowercase;
}

/* ============================================================
   Terminal Cursor
   ============================================================ */
.cursor {
    display: inline-block;
    width: 10px;
    height: 2px;
    background-color: var(--phosphor-white);
    margin-right: 4px;
    vertical-align: middle;
    position: relative;
    top: -4px;
    opacity: 0;
    animation: cursorAppear 0.1s ease 0.6s forwards, cursorBlink 1s step-end 0.7s infinite;
}

@keyframes cursorAppear {
    to { opacity: 1; }
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================================
   Display Headline (Section 1)
   ============================================================ */
.headline-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.display-headline {
    font-family: var(--font-cold);
    font-size: clamp(48px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--phosphor-white);
    text-transform: lowercase;
    margin: 0;
}

.cold-tagline {
    font-family: var(--font-cold);
    font-size: 14px;
    font-weight: 300;
    color: var(--phosphor-white);
    opacity: 0.6;
    margin-bottom: 48px;
}

.scroll-hint {
    font-family: var(--font-cold);
    font-size: 18px;
    color: var(--phosphor-white);
    opacity: 0.2;
    animation: scrollHintPulse 2s ease-in-out 2s infinite;
}

@keyframes scrollHintPulse {
    0%, 100% { opacity: 0.2; transform: translateY(0); }
    50% { opacity: 0.5; transform: translateY(4px); }
}

/* ============================================================
   Section 2 — Static Between
   ============================================================ */
.static-between .section-inner {
    position: relative;
}

.static-between::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, #C4540A 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, #2A0D1C 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, #E8752A 0%, transparent 50%),
        linear-gradient(180deg, #0D0D0D 0%, #1C1C1C 100%);
    opacity: 0.08;
    filter: blur(40px);
    pointer-events: none;
}

/* ============================================================
   Section Headlines
   ============================================================ */
.section-headline {
    font-family: var(--font-cold);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--phosphor-white);
    text-transform: lowercase;
    margin-bottom: 32px;
}

.warm-headline {
    color: var(--ember-glow);
}

.ember-headline {
    color: var(--warm-void);
}

.exit-headline {
    font-size: clamp(48px, 7vw, 72px);
    color: var(--warm-void);
}

/* Typographic rupture — single word escapes column */
.rupture {
    display: block;
    margin-left: -8px;
    color: var(--amber-leak);
}

.rupture-warm {
    display: block;
    margin-left: -8px;
    color: var(--warm-void);
}

/* ============================================================
   Body Text — Cold Variant
   ============================================================ */
.body-cold {
    font-family: var(--font-cold);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--phosphor-white);
    opacity: 0.75;
    margin-bottom: 20px;
}

.body-cold p {
    margin: 0;
}

.amber-accent {
    margin-top: 32px;
}

.accent-line {
    font-family: var(--font-cold);
    font-size: 11px;
    font-weight: 300;
    color: var(--amber-leak);
    opacity: 0.7;
    letter-spacing: 0.06em;
}

/* ============================================================
   Section 3 — The Reveal
   ============================================================ */
.the-reveal {
    position: relative;
}

.the-reveal::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, #C4540A 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, #2A0D1C 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, #E8752A 0%, transparent 50%),
        linear-gradient(180deg, #0D0D0D 0%, #1C1C1C 100%);
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.the-reveal.in-view::before {
    opacity: 1;
}

/* ============================================================
   Frosted Glass Panels
   ============================================================ */
.frosted-panel {
    background: rgba(232, 232, 224, 0.04);
    backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(232, 232, 224, 0.08);
    padding: 24px 28px;
    margin-bottom: 16px;
}

/* ============================================================
   Body Text — Warm Variant
   ============================================================ */
.body-warm {
    font-family: var(--font-warm);
    font-size: 17px; /* 17px/2.0 as specified */
    font-weight: 400;
    line-height: 2.0;
    color: var(--warm-void);
    margin: 0;
}

/* ============================================================
   Stagger Particles
   ============================================================ */
.particles {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #E8752A;
    opacity: 0;
}

/* Particle positions and animations — 14 particles */
.particle:nth-child(1)  { left: 30%; top: 40%; animation: particle1 1.2s ease-out 0.1s forwards; }
.particle:nth-child(2)  { left: 35%; top: 60%; animation: particle2 1.0s ease-out 0.15s forwards; }
.particle:nth-child(3)  { left: 25%; top: 50%; animation: particle3 1.1s ease-out 0.2s forwards; }
.particle:nth-child(4)  { left: 40%; top: 35%; animation: particle4 0.9s ease-out 0.05s forwards; }
.particle:nth-child(5)  { left: 45%; top: 65%; animation: particle5 1.3s ease-out 0.25s forwards; }
.particle:nth-child(6)  { left: 20%; top: 30%; animation: particle6 1.0s ease-out 0.1s forwards; }
.particle:nth-child(7)  { left: 50%; top: 45%; animation: particle7 1.2s ease-out 0.3s forwards; }
.particle:nth-child(8)  { left: 28%; top: 70%; animation: particle8 0.8s ease-out 0.05s forwards; }
.particle:nth-child(9)  { left: 38%; top: 25%; animation: particle9 1.1s ease-out 0.2s forwards; }
.particle:nth-child(10) { left: 55%; top: 55%; animation: particle10 1.0s ease-out 0.15s forwards; }
.particle:nth-child(11) { left: 22%; top: 45%; animation: particle11 1.3s ease-out 0.35s forwards; }
.particle:nth-child(12) { left: 42%; top: 75%; animation: particle12 0.9s ease-out 0.1s forwards; }
.particle:nth-child(13) { left: 33%; top: 20%; animation: particle13 1.0s ease-out 0.25s forwards; }
.particle:nth-child(14) { left: 48%; top: 30%; animation: particle14 1.1s ease-out 0.3s forwards; }

/* Each particle animates from center outward */
@keyframes particle1  { 0%{opacity:0;transform:translate(10px,-8px)} 40%{opacity:1} 100%{opacity:0.6;transform:translate(-18px,-22px)} }
@keyframes particle2  { 0%{opacity:0;transform:translate(-5px,12px)} 40%{opacity:1} 100%{opacity:0.5;transform:translate(22px,18px)} }
@keyframes particle3  { 0%{opacity:0;transform:translate(8px,4px)}   40%{opacity:1} 100%{opacity:0.7;transform:translate(-28px,8px)} }
@keyframes particle4  { 0%{opacity:0;transform:translate(-12px,-6px)}40%{opacity:1} 100%{opacity:0.4;transform:translate(16px,-30px)} }
@keyframes particle5  { 0%{opacity:0;transform:translate(6px,-10px)} 40%{opacity:1} 100%{opacity:0.6;transform:translate(30px,-14px)} }
@keyframes particle6  { 0%{opacity:0;transform:translate(14px,8px)}  40%{opacity:1} 100%{opacity:0.5;transform:translate(-22px,24px)} }
@keyframes particle7  { 0%{opacity:0;transform:translate(-8px,14px)} 40%{opacity:1} 100%{opacity:0.8;transform:translate(-14px,32px)} }
@keyframes particle8  { 0%{opacity:0;transform:translate(10px,-12px)}40%{opacity:1} 100%{opacity:0.4;transform:translate(26px,-20px)} }
@keyframes particle9  { 0%{opacity:0;transform:translate(-6px,6px)}  40%{opacity:1} 100%{opacity:0.6;transform:translate(-20px,-28px)} }
@keyframes particle10 { 0%{opacity:0;transform:translate(4px,-8px)}  40%{opacity:1} 100%{opacity:0.5;transform:translate(34px,-12px)} }
@keyframes particle11 { 0%{opacity:0;transform:translate(-10px,10px)}40%{opacity:1} 100%{opacity:0.7;transform:translate(-32px,18px)} }
@keyframes particle12 { 0%{opacity:0;transform:translate(12px,-4px)} 40%{opacity:1} 100%{opacity:0.4;transform:translate(20px,28px)} }
@keyframes particle13 { 0%{opacity:0;transform:translate(-14px,-8px)}40%{opacity:1} 100%{opacity:0.6;transform:translate(-10px,-36px)} }
@keyframes particle14 { 0%{opacity:0;transform:translate(6px,12px)}  40%{opacity:1} 100%{opacity:0.5;transform:translate(28px,22px)} }

/* ============================================================
   Section 4 — Ember Zone
   ============================================================ */
.ember-zone {
    position: relative;
}

.ember-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(196,84,10,0.35) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}

.work-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.work-item {
    position: relative;
}

.work-label {
    display: block;
    font-family: var(--font-cold);
    font-size: 11px;
    font-weight: 300;
    color: var(--ember-glow);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.accent-aside {
    margin-top: 24px;
}

.aside-label {
    font-family: var(--font-cold);
    font-size: 11px;
    font-weight: 300;
    color: var(--ember-glow);
    opacity: 0.7;
    letter-spacing: 0.06em;
}

/* ============================================================
   Section 5 — Warm Exit
   ============================================================ */
.warm-exit {
    position: relative;
}

.warm-exit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 60%, rgba(242,194,138,0.15) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(80px);
}

.exit-panel {
    margin-bottom: 32px;
}

.exit-body {
    color: var(--warm-void);
    font-size: 18px;
    line-height: 2.1;
}

.contact-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.contact-link {
    font-family: var(--font-cold);
    font-size: 14px;
    font-weight: 400;
    color: var(--ember-glow);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
    border-bottom: 1px solid rgba(232, 117, 42, 0.3);
    padding-bottom: 1px;
}

.contact-link:hover {
    color: var(--warm-void);
    border-bottom-color: rgba(242,194,138,0.5);
}

.contact-sep {
    font-family: var(--font-cold);
    color: var(--phosphor-white);
    opacity: 0.2;
    font-size: 14px;
}

.postscript {
    margin-top: 8px;
}

.ps-text {
    font-family: var(--font-cold);
    font-size: 11px;
    font-weight: 300;
    color: var(--warm-void);
    opacity: 0.45;
    letter-spacing: 0.04em;
}

/* ============================================================
   Stagger Entry Animations
   ============================================================ */

/* Cold sections: slide from right (pushing away) */
@keyframes slideInCold {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Warm sections: slide from left (drawing in) */
@keyframes slideInWarm {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.stagger-child {
    opacity: 0;
}

.cold-stagger.animate {
    animation: slideInCold 0.5s ease-out both;
    animation-delay: calc(var(--child-index, 0) * 80ms);
}

.warm-stagger.animate {
    animation: slideInWarm 0.5s ease-out both;
    animation-delay: calc(var(--child-index, 0) * 80ms);
}

/* Section 1 starts with animation ready immediately */
.section1-ready .cold-stagger {
    animation: slideInCold 0.5s ease-out both;
    animation-delay: calc(var(--child-index, 0) * 80ms + 0.6s);
}

/* ============================================================
   Section Temperature Backgrounds — JS-driven
   ============================================================ */

/* When section is active (in-view), show its character */
.section.active-section {
    z-index: 10;
}

/* ============================================================
   Scrollbar Styling
   ============================================================ */
::-webkit-scrollbar {
    width: 3px;
}
::-webkit-scrollbar-track {
    background: #0D0D0D;
}
::-webkit-scrollbar-thumb {
    background: rgba(232, 232, 224, 0.15);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 112, 10, 0.5);
}

/* ============================================================
   Selection
   ============================================================ */
::selection {
    background: rgba(212, 112, 10, 0.3);
    color: var(--phosphor-white);
}