/* archetype.works — honeyed neutral palette, vaporwave at dusk */
/* Design typography references retained without fetching assets: "IBM Plex Mono" (Google Fonts), "Space Grotesk" (Google Fonts). Intersection Observer callback entry when the panel enters the viewport. After the shake completes. */

:root {
    --bg-primary: #f5efe6;      /* Warm Parchment */
    --bg-secondary: #e8dbc8;    /* Honeyed Linen */
    --bg-deep: #2c2418;         /* Burnt Umber */
    --text-primary: #3a2e20;    /* Roasted Sepia */
    --text-muted: #a89070;      /* Dusty Caramel */
    --accent: #c4a97d;          /* Aged Gold */
    --sidebar-bg: #342a1e;      /* Dark Toffee */
    --sidebar-text: #d4c4a8;    /* Faded Cream */

    --sidebar-width: 220px;

    --font-display: 'Italiana', 'Didot', 'Bodoni 72', 'Baskerville', serif;
    --font-body: 'Space Grotesk', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Space Mono', 'SFMono-Regular', Consolas, ui-monospace, monospace;
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg-primary);
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    letter-spacing: 0.04em;
    line-height: 1.8;
    position: relative;
}

/* ----------------------------------------------------------------------
   Film grain overlay — a repeating base64 noise tile, 128x128
   ---------------------------------------------------------------------- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 1 0'/></filter><rect width='128' height='128' filter='url(%23n)' opacity='0.9'/></svg>");
    background-size: 128px 128px;
    background-repeat: repeat;
    opacity: var(--grain-opacity, 0.12);
    mix-blend-mode: multiply;
    animation: grain-shift 0.5s steps(4) infinite;
}

@keyframes grain-shift {
    0%   { background-position:   0px   0px; }
    25%  { background-position:  -1px   2px; }
    50%  { background-position:   2px  -1px; }
    75%  { background-position:  -2px  -2px; }
    100% { background-position:   0px   0px; }
}

/* Dark panels — switch blend-mode for visibility */
.panel-signal ~ *,
body[data-active-panel="signal"]::after {
    mix-blend-mode: screen;
}

/* ----------------------------------------------------------------------
   Sidebar
   ---------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1.25rem;
    z-index: 100;
    border-right: 1px solid rgba(196, 169, 125, 0.12);
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.sidebar-marker {
    color: var(--accent);
    font-size: 10px;
    letter-spacing: 0.4em;
    animation: marker-pulse 3.2s ease-in-out infinite;
}

@keyframes marker-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

.column-fragment {
    width: 22px;
    height: 44px;
    opacity: 0.2;
}

.sidebar-logotype-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logotype {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.25em;
    color: var(--sidebar-text);
    text-transform: lowercase;
    user-select: none;
}

.sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0.25rem;
}

.sidebar-nav li {
    list-style: none;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sidebar-text);
    opacity: 0.5;
    transition: opacity 0.3s ease, letter-spacing 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.nav-link .nav-glyph {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent);
    min-width: 1.6em;
    display: inline-block;
}

.nav-link:hover {
    opacity: 0.85;
    letter-spacing: 0.2em;
}

.nav-link.active {
    opacity: 1;
}

.nav-link.active .nav-glyph {
    color: var(--accent);
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.sidebar-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Scroll progress indicator */
.progress-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    background: var(--accent);
    height: 0%;
    transition: height 0.08s linear;
    box-shadow: 0 0 6px rgba(196, 169, 125, 0.4);
}

.progress-indicator::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: -2px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: progress-pulse 1.6s ease-in-out infinite;
}

.progress-indicator.flash {
    animation: waypoint-flash 0.42s ease-out 1;
}

@keyframes waypoint-flash {
    0%   { box-shadow: 0 0 6px rgba(196, 169, 125, 0.4); }
    35%  { box-shadow: 0 0 22px rgba(196, 169, 125, 0.95); }
    100% { box-shadow: 0 0 6px rgba(196, 169, 125, 0.4); }
}

@keyframes progress-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.6); opacity: 0.3; }
}

/* ----------------------------------------------------------------------
   Main content + panels
   ---------------------------------------------------------------------- */
.content {
    margin-left: var(--sidebar-width);
    width: calc(100vw - var(--sidebar-width));
}

.panel {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 4rem;
    background: var(--bg);
    transition: background-color 1.2s ease;
}

.panel-inner {
    position: relative;
    width: 100%;
    max-width: 1100px;
}

/* Per-panel grain intensity via pseudo on the panel itself */
.panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(58, 46, 32, 0.025) 0px,
            rgba(58, 46, 32, 0.025) 1px,
            transparent 1px,
            transparent 3px
        );
    z-index: 1;
}

.panel-signal::before {
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(245, 239, 230, 0.03) 0px,
            rgba(245, 239, 230, 0.03) 1px,
            transparent 1px,
            transparent 3px
        );
}

/* ----- Datestamp watermarks + panel caption ------------------------ */
.datestamp {
    position: absolute;
    right: 1rem;
    bottom: 2rem;
    transform: rotate(-90deg);
    transform-origin: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.25em;
    color: var(--text-muted);
    opacity: 0.22;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

.datestamp-dark {
    color: var(--sidebar-text);
    opacity: 0.28;
}

.panel-caption {
    position: absolute;
    left: 2rem;
    bottom: 1.5rem;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    text-transform: uppercase;
    opacity: 0.55;
    z-index: 2;
}

.panel-caption-dark {
    color: var(--sidebar-text);
    opacity: 0.45;
}

/* ----------------------------------------------------------------------
   Panel 1 — Overture (kinetic headline)
   ---------------------------------------------------------------------- */
.panel-overture .panel-inner {
    text-align: center;
}

.kinetic-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4.5rem, 12vw, 10rem);
    line-height: 0.95;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    text-transform: lowercase;
    position: relative;
    z-index: 2;
    display: inline-block;
    white-space: nowrap;
}

.kinetic-headline .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-headline .letter.dot {
    color: var(--accent);
}

.kinetic-headline.play .letter {
    animation: letter-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i) * 80ms);
}

@keyframes letter-in {
    0%   { opacity: 0; transform: translateY(12px); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.kinetic-headline.play {
    animation: spread-letters 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.6s;
}

@keyframes spread-letters {
    0%   { letter-spacing: -0.02em; }
    100% { letter-spacing: 0.3em; }
}

.overture-sub {
    margin-top: 2.5rem;
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    color: var(--text-muted);
    opacity: 0;
    animation: fade-up 1.4s ease 2.8s forwards;
    position: relative;
    z-index: 2;
}

@keyframes fade-up {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 0.85; transform: translateY(0); }
}

/* ----------------------------------------------------------------------
   Panel 2 — Thesis
   ---------------------------------------------------------------------- */
.thesis-inner {
    max-width: 780px;
    text-align: left;
    position: relative;
    z-index: 2;
}

.thesis-line {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 400;
    line-height: 3.5;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    text-transform: lowercase;
}

.thesis-inner.in-view .thesis-line-1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.thesis-inner.in-view .thesis-line-2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

.dashed-rule {
    border: none;
    border-top: 1px dashed var(--accent);
    opacity: 0.3;
    margin-top: 3rem;
    background-image: linear-gradient(
        to right,
        var(--accent) 50%,
        transparent 50%
    );
    background-size: 8px 1px;
    background-repeat: repeat-x;
    height: 1px;
    animation: marching 30s linear infinite;
}

@keyframes marching {
    0%   { background-position: 0 0; }
    100% { background-position: 400px 0; }
}

.dashed-rule-dark {
    border-top-color: var(--accent);
    opacity: 0.35;
    margin: 2rem 0;
}

/* ----------------------------------------------------------------------
   Panel 3 — Artifacts (shake-error)
   ---------------------------------------------------------------------- */
.artifacts-inner {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 420px;
    z-index: 2;
}

.artifact {
    position: absolute;
    font-family: var(--font-display);
    color: var(--text-primary);
    text-transform: lowercase;
    line-height: 1;
    user-select: none;
}

.artifact-1 {
    top: 12%;
    left: 8%;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.08em;
}

.artifact-2 {
    top: 38%;
    right: 14%;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text-muted);
}

.artifact-3 {
    bottom: 16%;
    left: 22%;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.2em;
}

.artifact-4 {
    bottom: 8%;
    right: 8%;
    font-size: clamp(5rem, 12vw, 9.5rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    color: var(--accent);
    opacity: 0.85;
}

.artifact.shake {
    animation: shake 0.08s linear 8;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}

/* ----------------------------------------------------------------------
   Panel 4 — Archive
   ---------------------------------------------------------------------- */
.panel-archive .panel-inner {
    text-align: left;
    max-width: 920px;
}

.archive-rule-wrap {
    width: 100%;
    position: relative;
    z-index: 2;
}

.archive-rule {
    display: block;
    height: 1px;
    width: 0;
    background: repeating-linear-gradient(
        to right,
        #c4a97d 0,
        #c4a97d 6px,
        transparent 6px,
        transparent 12px
    );
    transition: width 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-inner.in-view .archive-rule {
    width: 100%;
}

.archive-meta {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 1.2s ease 0.8s, transform 1.2s ease 0.8s;
    position: relative;
    z-index: 2;
}

.archive-inner.in-view .archive-meta {
    opacity: 0.75;
    transform: translateY(0);
}

.archive-ref {
    color: var(--sidebar-bg);
    opacity: 0.8;
}

/* ----------------------------------------------------------------------
   Panel 5 — Signal
   ---------------------------------------------------------------------- */
.panel-signal {
    background: var(--bg-deep);
    color: var(--sidebar-text);
}

.panel-signal .panel-inner {
    text-align: center;
    position: relative;
    z-index: 2;
}

.signal-logotype {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 7rem);
    color: #f5efe6;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    animation: signal-breathe 6s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}

@keyframes signal-breathe {
    0%, 100% { transform: scale(1.0); }
    50%      { transform: scale(1.02); }
}

.signal-contact {
    margin-top: 2.5rem;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: lowercase;
}

.signal-foot {
    margin-top: 1rem;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: lowercase;
    color: var(--sidebar-text);
    opacity: 0.4;
}

/* ----------------------------------------------------------------------
   VHS tracking transitions
   ---------------------------------------------------------------------- */
.vhs-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

.vhs-line {
    position: absolute;
    left: 0;
    top: -2px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    opacity: 0.4;
    box-shadow: 0 0 6px rgba(196, 169, 125, 0.6);
    animation: vhs-sweep 0.22s linear forwards;
}

@keyframes vhs-sweep {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: 0.5; }
    100% { transform: translateY(105vh); opacity: 0.2; }
}

/* ----------------------------------------------------------------------
   Responsive — collapse sidebar into a slim strip on small screens
   ---------------------------------------------------------------------- */
@media (max-width: 720px) {
    :root { --sidebar-width: 64px; }

    .sidebar { padding: 1.25rem 0.5rem; }

    .sidebar-logotype { font-size: 13px; letter-spacing: 0.2em; }

    .nav-link .nav-label { display: none; }
    .nav-link .nav-glyph { font-size: 11px; }

    .sidebar-meta { font-size: 8px; letter-spacing: 0.08em; }

    .panel { padding: 3rem 1.5rem; }

    .artifact-1 { left: 4%; }
    .artifact-2 { right: 4%; }
    .artifact-3 { left: 8%; }
    .artifact-4 { right: 4%; }
}