/* ========================================
   graphers.net - Cinematic Letterbox
   ======================================== */

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    --reel-dark: #1A0A0F;
    --dusk-ember: #2E1A1F;
    --horizon-burn: #A8432A;
    --golden-frame: #F2784B;
    --last-light: #F5C882;
    --film-grain-color: #FAF0E1;
    --afterglow: #C4727E;
    --twilight-cool: #1B4B5A;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--reel-dark);
    color: var(--film-grain-color);
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    overflow-x: hidden;
}

/* --- Typography --- */
h1, h2 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 5.5vw, 4.5rem);
    text-transform: uppercase;
    color: var(--film-grain-color);
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    color: var(--film-grain-color);
    margin-bottom: 1.5rem;
}

p {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
}

.annotation {
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: var(--golden-frame);
    display: block;
    margin-top: 1rem;
}

/* --- Site Identity --- */
.site-id {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-id-label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--film-grain-color);
    opacity: 0.6;
}

.site-id-rule {
    display: block;
    width: 120px;
    height: 1px;
    background: var(--film-grain-color);
    opacity: 0.3;
}

/* --- Section Indicator --- */
.section-indicator {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--golden-frame);
    z-index: 100;
    animation: indicatorPulse 3s ease-in-out infinite;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* --- Scenes --- */
.scene {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.scene-opening {
    background: var(--reel-dark);
}

.scene-map {
    background: var(--dusk-ember);
}

.scene-edge {
    background: linear-gradient(180deg, var(--dusk-ember) 0%, var(--reel-dark) 100%);
}

.scene-view {
    background: var(--dusk-ember);
}

.scene-close {
    background: var(--reel-dark);
}

/* --- Letterbox --- */
.letterbox-top,
.letterbox-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 80px;
    background: var(--reel-dark);
    z-index: 5;
}

.letterbox-top { top: 0; }
.letterbox-bottom { bottom: 0; }

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

/* --- Frame Content --- */
.frame-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 5vw;
    display: flex;
    gap: 4rem;
}

.thirds-left {
    flex: 1;
    max-width: 50%;
}

.thirds-right {
    flex: 1;
    max-width: 50%;
}

/* --- Hero --- */
.hero-title .letter {
    display: inline-block;
    opacity: 0;
    animation: letterIn 0.4s ease-out forwards;
}

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

.hero-subtitle {
    font-size: 1rem;
    color: var(--afterglow);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-subtitle.visible {
    opacity: 1;
}

/* --- Lens Flares --- */
.lens-flare {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

.flare-hero {
    width: 40vw;
    height: 15vh;
    top: 10%;
    right: 15%;
    background: radial-gradient(ellipse, rgba(242, 120, 75, 0.6) 0%, rgba(245, 200, 130, 0.3) 40%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.flare-hero.visible {
    opacity: 1;
}

.flare-left {
    width: 20vw;
    height: 6vh;
    top: 50%;
    left: -5%;
    background: radial-gradient(ellipse, rgba(242, 120, 75, 0.5) 0%, rgba(245, 200, 130, 0.2) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.flare-left.visible {
    opacity: 1;
}

.flare-wide {
    width: 60vw;
    height: 8vh;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse, rgba(242, 120, 75, 0.1) 0%, rgba(245, 200, 130, 0.06) 50%, transparent 70%);
    opacity: 0.12;
}

.flare-close {
    width: 30vw;
    height: 12vh;
    bottom: 15%;
    left: 5%;
    background: radial-gradient(ellipse, rgba(242, 120, 75, 0.5) 0%, rgba(245, 200, 130, 0.25) 40%, transparent 70%);
    opacity: 0;
    transition: opacity 1s ease;
}

.flare-close.visible {
    opacity: 0.8;
}

/* --- Contour Lines --- */
.contour-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.contour-bg path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 3s ease;
}

.contour-bg.drawn path {
    stroke-dashoffset: 0;
}

/* --- Chapter Cards --- */
.chapter-card {
    height: 8vh;
    min-height: 60px;
    background: var(--reel-dark);
    display: flex;
    align-items: center;
    padding: 0 5vw;
    border-top: 1px solid rgba(196, 114, 126, 0.15);
    border-bottom: 1px solid rgba(196, 114, 126, 0.15);
}

.chapter-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--afterglow);
    opacity: 0.7;
}

/* --- Reveal Animation --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Network Frame --- */
.network-frame {
    position: relative;
    padding: 2px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.network-frame.revealed {
    opacity: 1;
    transform: translateY(0);
}

.network-svg {
    width: 100%;
    height: auto;
    display: block;
    background: rgba(26, 10, 15, 0.5);
}

/* --- Border Animate --- */
.border-animate {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--reel-dark), var(--reel-dark)),
        conic-gradient(from var(--border-angle), var(--horizon-burn), var(--golden-frame), var(--last-light), var(--horizon-burn));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: borderRotate 12s linear infinite;
}

@keyframes borderRotate {
    to { --border-angle: 360deg; }
}

/* --- Close Block --- */
.close-block {
    display: inline-block;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
}

.close-title {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: var(--golden-frame);
}

.close-message {
    color: var(--film-grain-color);
    opacity: 0.8;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .frame-content {
        flex-direction: column;
        padding: 100px 6vw;
        gap: 2rem;
    }

    .thirds-left,
    .thirds-right {
        max-width: 100%;
    }

    .letterbox-top,
    .letterbox-bottom {
        height: 40px;
    }

    .site-id-rule {
        width: 60px;
    }

    .flare-hero {
        width: 60vw;
    }
}