/* politics.day — cinematic ma-negative-space, duotone, hand-drawn editorial */
/* Typography: "Space Grotesk" (Google Fonts) — sans-grotesk geometric. */
/* Scene markers: weight 300, 14px, uppercase, letter-spacing 0.1em. */

:root {
    --film-indigo: #1A1830;
    --amber-warm: #D0A040;
    --cream-light: #F0E8D0;
    --hand-drawn-ink: #303040;
    --ripple-blue: #4070C0;
    --scene-gray: #808898;
    --deep-shadow: #0A0818;

    --content-width: 700px;
    --ma-gap: 160px;
    --ma-gap-large: 220px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Space Grotesk", system-ui, sans-serif;
    background: var(--film-indigo);
    color: var(--cream-light);
    line-height: 1.85;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   Opening Shot — 100vh duotone with curves + ghosts
   ============================================= */
.opening-shot {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 70% 35%, rgba(208, 160, 64, 0.10) 0%, rgba(208, 160, 64, 0) 55%),
        linear-gradient(180deg, var(--film-indigo) 0%, var(--deep-shadow) 100%);
}

/* Duotone gradient overlay */
.duotone-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(26, 24, 48, 0.35) 0%,
            rgba(208, 160, 64, 0.05) 40%,
            rgba(10, 8, 24, 0.45) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.flowing-curves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.flowing-curves .curve {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    opacity: 0;
    animation: drawCurve 1500ms ease-out forwards;
}

.flowing-curves .curve-1 { animation-delay: 200ms; }
.flowing-curves .curve-2 { animation-delay: 600ms; }
.flowing-curves .curve-3 { animation-delay: 900ms; }

@keyframes drawCurve {
    0% {
        stroke-dashoffset: 3000;
        opacity: 0;
    }
    20% { opacity: 0.5; }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.65;
    }
}

/* Ghost editorial illustrations (5-10% opacity) */
.ghost-illustration {
    position: absolute;
    width: 280px;
    height: 280px;
    opacity: 0;
    z-index: 2;
    transition: opacity 1200ms ease;
    pointer-events: none;
}

.ghost-gavel {
    top: 12%;
    left: 6%;
    transform: rotate(-12deg);
    animation: ghostFade 1800ms ease-out 1100ms forwards;
}

.ghost-podium {
    bottom: 14%;
    right: 7%;
    transform: rotate(8deg);
    animation: ghostFade 1800ms ease-out 1300ms forwards;
}

@keyframes ghostFade {
    from { opacity: 0; }
    to { opacity: 0.10; }
}

.opening-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    max-width: var(--content-width);
}

.scene-marker {
    display: inline-block;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scene-gray);
    opacity: 0;
    animation: fadeUp 1000ms ease-out 400ms forwards;
}

.scene-marker-top {
    color: var(--amber-warm);
    opacity: 0;
}

.domain-title {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 88px);
    letter-spacing: -0.02em;
    color: var(--cream-light);
    line-height: 1.05;
    opacity: 0;
    animation: fadeUp 1000ms ease-out 700ms forwards;
}

.domain-title .dot {
    color: var(--amber-warm);
    display: inline-block;
    transform: translateY(-2px);
}

.opening-tagline {
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 400;
    color: var(--scene-gray);
    max-width: 520px;
    opacity: 0;
    animation: fadeUp 1000ms ease-out 1100ms forwards;
}

.scroll-cue {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber-warm);
    margin-top: 36px;
    opacity: 0;
    animation: fadeUp 1000ms ease-out 1500ms forwards, breathePulse 3200ms ease-in-out 2200ms infinite;
    position: relative;
}

.scroll-cue::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22px;
    width: 1px;
    height: 28px;
    background: var(--amber-warm);
    transform: translateX(-50%) scaleY(0.6);
    transform-origin: top;
    animation: scrollLine 2400ms ease-in-out 2200ms infinite;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes breathePulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.45; }
}

@keyframes scrollLine {
    0% { transform: translateX(-50%) scaleY(0.2); opacity: 0.3; }
    50% { transform: translateX(-50%) scaleY(1); opacity: 1; }
    100% { transform: translateX(-50%) scaleY(0.2); opacity: 0.3; }
}

/* =============================================
   Ma negative-space spacers
   ============================================= */
.ma-spacer {
    height: var(--ma-gap);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.ma-spacer-large {
    height: var(--ma-gap-large);
}

.connector-curve {
    width: min(var(--content-width), 90vw);
    height: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1200ms ease, transform 1200ms ease;
}

.connector-curve.in-view {
    opacity: 0.8;
    transform: translateY(0);
}

.connector-curve .curve {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1500ms ease-out;
}

.connector-curve.in-view .curve {
    stroke-dashoffset: 0;
}

.connector-curve-rev .curve {
    stroke: var(--amber-warm);
    opacity: 0.7;
}

/* =============================================
   Scene panels
   ============================================= */
.scene-panel {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 56px 48px;
    border-left: 3px solid transparent;
    transition: border-color 600ms ease, padding 600ms ease, background 600ms ease;
    opacity: 0;
    transform: translateY(28px);
    transition-property: opacity, transform, border-color, padding, background;
    transition-duration: 800ms;
    transition-delay: 200ms;
    position: relative;
}

.scene-panel.in-view {
    opacity: 1;
    transform: translateY(0);
}

.scene-panel:hover {
    border-left-color: var(--amber-warm);
    padding-left: 60px;
    background: linear-gradient(90deg, rgba(208, 160, 64, 0.04), transparent 60%);
}

.scene-panel .scene-marker {
    color: var(--scene-gray);
    margin-bottom: 24px;
    opacity: 1;
    animation: none;
    transition: text-shadow 400ms ease, color 400ms ease;
}

.scene-panel:hover .scene-marker {
    color: var(--amber-warm);
    text-shadow: 0 0 12px rgba(208, 160, 64, 0.35);
}

.scene-title {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 52px);
    letter-spacing: -0.02em;
    color: var(--cream-light);
    line-height: 1.15;
    margin-bottom: 28px;
}

.scene-body {
    font-weight: 400;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.85;
    color: var(--cream-light);
    margin-bottom: 22px;
    max-width: 600px;
}

.scene-caption {
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
    color: var(--scene-gray);
    margin-bottom: 36px;
}

/* =============================================
   Ripple buttons
   ============================================= */
.ripple-button {
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--cream-light);
    border: 1px solid var(--amber-warm);
    padding: 14px 32px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 400ms ease, color 400ms ease, transform 200ms ease, letter-spacing 400ms ease;
    border-radius: 0;
    isolation: isolate;
}

.ripple-button:hover {
    background: rgba(208, 160, 64, 0.1);
    color: var(--amber-warm);
    letter-spacing: 0.22em;
}

.ripple-button:active {
    transform: scale(0.985);
}

.ripple-button .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: rippleExpand 600ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    background: radial-gradient(circle, rgba(64, 112, 192, 0.55) 0%, rgba(64, 112, 192, 0.18) 55%, rgba(64, 112, 192, 0) 80%);
    pointer-events: none;
    z-index: 0;
}

@keyframes rippleExpand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* =============================================
   Editorial hand-drawn sections
   ============================================= */
.editorial-section {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 80px 32px;
    text-align: center;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms ease, transform 900ms ease;
}

.editorial-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.editorial-illustration {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 28px;
    background: var(--cream-light);
    padding: 36px 28px;
    border-radius: 2px;
    box-shadow:
        0 14px 48px rgba(10, 8, 24, 0.55),
        inset 0 0 0 1px rgba(48, 48, 64, 0.08);
    position: relative;
    overflow: hidden;
}

.editorial-illustration::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(48, 48, 64, 0.025) 0,
            rgba(48, 48, 64, 0.025) 1px,
            transparent 1px,
            transparent 4px);
    pointer-events: none;
    opacity: 0.6;
}

.editorial-illustration svg {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.hand-drawn-stroke path,
.hand-drawn-stroke circle,
.hand-drawn-stroke ellipse,
.hand-drawn-stroke line {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 1800ms ease-out, opacity 800ms ease;
}

.editorial-section.in-view .hand-drawn-stroke path,
.editorial-section.in-view .hand-drawn-stroke circle,
.editorial-section.in-view .hand-drawn-stroke ellipse,
.editorial-section.in-view .hand-drawn-stroke line {
    stroke-dashoffset: 0;
}

.editorial-caption {
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
    color: var(--scene-gray);
    max-width: 480px;
    margin: 0 auto;
}

/* =============================================
   Credits roll (footer)
   ============================================= */
.credits-roll {
    position: relative;
    padding: 140px 32px 100px;
    background: linear-gradient(180deg, var(--film-indigo) 0%, var(--deep-shadow) 100%);
    text-align: center;
    overflow: hidden;
    margin-top: var(--ma-gap-large);
}

.credits-curve {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 220px;
    opacity: 0.5;
    pointer-events: none;
}

.credits-content {
    position: relative;
    z-index: 1;
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.credits-tag {
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--amber-warm);
}

.credits-list {
    list-style: none;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 12px 0;
}

.credits-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(208, 160, 64, 0.25);
    font-size: 14px;
    transition: border-color 400ms ease, transform 400ms ease;
}

.credits-list li:hover {
    border-bottom-color: var(--amber-warm);
    transform: translateX(4px);
}

.credit-role {
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scene-gray);
}

.credit-name {
    font-weight: 400;
    color: var(--cream-light);
    font-style: italic;
}

.credits-domain {
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 32px);
    letter-spacing: -0.02em;
    color: var(--cream-light);
    margin-top: 24px;
}

.credits-fade {
    font-weight: 300;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--scene-gray);
    margin-top: 12px;
}

/* =============================================
   Global ripple portal (page-level click ripples)
   ============================================= */
#ripple-portal {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    overflow: hidden;
}

.global-ripple {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, rgba(64, 112, 192, 0.45) 0%, rgba(64, 112, 192, 0.15) 50%, rgba(64, 112, 192, 0) 75%);
    animation: globalRippleExpand 700ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes globalRippleExpand {
    to {
        transform: translate(-50%, -50%) scale(60);
        opacity: 0;
    }
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 720px) {
    :root {
        --ma-gap: 100px;
        --ma-gap-large: 140px;
    }

    .scene-panel {
        padding: 40px 28px;
    }

    .scene-panel:hover {
        padding-left: 36px;
    }

    .ghost-illustration {
        width: 180px;
        height: 180px;
    }

    .editorial-section {
        padding: 56px 20px;
    }

    .editorial-illustration {
        padding: 22px 16px;
    }

    .credits-roll {
        padding: 100px 24px 80px;
    }
}