/* ============================================================
   Lineage Analytics — main.css
   Identidade visual herdada do painel (styles.css):
     - Cinzel (display) + Cormorant Garamond (texto)
     - Paleta dark fantasy: bg-deep, gold, crimson
     - Cantos duplos dourados nos painéis
     - Glow + noise sutil
   Estrutura: canvas fullscreen · capítulos sobrepostos
   ============================================================ */

:root {
    /* Paleta herdada de styles.css */
    --bg-deep: #07060a;
    --bg-base: #0d0a12;
    --bg-panel: #14101a;
    --bg-panel-2: #1a1622;
    --border-dim: #2a2335;
    --border-gold: #8a6d2a;

    --gold: #c9a961;
    --gold-bright: #f1d77a;
    --gold-deep: #8a6d2a;
    --crimson: #8a0e1f;
    --crimson-bright: #c41e3a;
    --fire: #ff6b35;
    --fire-glow: #ffae42;

    --parchment: #e8dcc4;
    --parchment-dim: #b9a989;
    --text-mute: #7a6f5a;

    --bg-text: rgba(13, 10, 18, 0.92);
    --bg-text-strong: rgba(7, 6, 10, 0.96);

    --text-0: #f5ecd4;
    --text-1: var(--parchment);
    --text-2: var(--parchment-dim);
    --text-3: var(--text-mute);

    --line-0: rgba(201, 169, 97, 0.18);
    --line-1: rgba(201, 169, 97, 0.4);

    --grad-accent: linear-gradient(180deg, #f8e6a3 0%, #c9a961 50%, #8a6d2a 100%);
    --grad-crimson: linear-gradient(180deg, #c41e3a 0%, #8a0e1f 100%);
    --grad-text: linear-gradient(180deg, #f8e6a3 0%, #c9a961 100%);

    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-body: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --font-ui: 'Inter', system-ui, sans-serif;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-deep);
    color: var(--text-1);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Reset de estado no load — sempre começa do frame 1, sem cache */
html, body {
    overflow: hidden;
    height: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

a, button, input, textarea, select { user-select: auto; -webkit-user-select: auto; }
img, svg, canvas { display: block; max-width: 100%; }

/* ============================================================
   Fundo — herda o gradiente + noise do painel
   ============================================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at top, rgba(201, 169, 97, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(138, 14, 31, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #07060a 0%, #0d0a12 50%, #07060a 100%);
    pointer-events: none;
    z-index: -2;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.66 0 0 0 0 0.38 0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    opacity: 0.45;
    pointer-events: none;
    z-index: -1;
}

/* ============================================================
   Canvas — fundo animado
   ============================================================ */

#hero-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background: var(--bg-deep);
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.overlay-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%),
        linear-gradient(180deg, rgba(7,6,10,0.5) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(7,6,10,0.65) 100%);
}

/* ============================================================
   Loader (estilo dourado do painel)
   ============================================================ */

.loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--bg-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: opacity 700ms var(--ease-cinema), visibility 700ms var(--ease-cinema);
}

.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Após o primeiro frame, não bloqueia scroll/wheel */
body.is-loaded .loader {
    pointer-events: none;
}

.loader-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 169, 97, 0.15);
    border-top-color: var(--gold);
    border-right-color: var(--gold-bright);
    animation: loaderSpin 1.2s linear infinite;
}

@keyframes loaderSpin { to { transform: rotate(360deg); } }

.loader-text {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
}

.loader-bar {
    width: 220px;
    height: 1px;
    background: rgba(201, 169, 97, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.loader-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--grad-accent);
    border-radius: 999px;
    transition: width 240ms var(--ease-out);
    box-shadow: 0 0 14px rgba(241, 215, 122, 0.55);
}

.loader-percent {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--gold-bright);
    letter-spacing: 0.16em;
}

/* ============================================================
   Story — capítulos full-viewport sobrepostos
   ============================================================ */

.story {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.chapter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}

/* Split halves */

.chapter-half {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 clamp(24px, 5vw, 80px);
}

.chapter-half-left {
    justify-content: flex-start;
}

.chapter-half-right {
    margin-left: auto;
    justify-content: flex-end;
}

/* ============================================================
   Card de texto — HERO sem fundo (só letras), demais com painel
   ============================================================ */

.chapter-text {
    position: relative;
    max-width: 560px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 44px 46px;
    will-change: transform, opacity;
}

/* HERO: sem card, sem fundo, sem bordas. Apenas texto "limpo". */
.chapter--hero .chapter-text {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 20px 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.chapter--hero .chapter-text::before,
.chapter--hero .chapter-text::after {
    display: none;
}

/* Demais capítulos: painel com cantos duplos dourados (idêntico ao styles.css) */
.chapter:not(.chapter--hero) .chapter-text {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
    border: 1px solid var(--border-dim);
    border-radius: 2px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(201, 169, 97, 0.06);
    isolation: isolate;
}

/* Borda interna sutil (igual styles.css) — apenas para não-hero */
.chapter:not(.chapter--hero) .chapter-text::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(138, 109, 42, 0.22);
    pointer-events: none;
    border-radius: 1px;
    z-index: 0;
}

/* Linha dourada superior (igual styles.css) — apenas para não-hero */
.chapter:not(.chapter--hero) .chapter-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-deep) 20%, var(--gold) 50%, var(--gold-deep) 80%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}

/* Cantos duplos (apenas para não-hero) */
.chapter:not(.chapter--hero) .chapter-text > .corner-tl,
.chapter:not(.chapter--hero) .chapter-text > .corner-tr,
.chapter:not(.chapter--hero) .chapter-text > .corner-bl,
.chapter:not(.chapter--hero) .chapter-text > .corner-br {
    display: none;
}

.chapter-text > * { position: relative; z-index: 2; }

.chapter-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(24px, 5vw, 80px);
}

.chapter-text-center {
    align-items: center;
    text-align: center;
    max-width: 720px;
    padding: 64px 68px;
    background: linear-gradient(180deg, rgba(20, 16, 26, 0.96) 0%, rgba(13, 10, 18, 0.98) 100%);
    box-shadow: 0 0 60px rgba(201, 169, 97, 0.12), inset 0 1px 0 rgba(201, 169, 97, 0.08);
}

.chapter-text-center .eyebrow,
.chapter-text-center .chapter-title,
.chapter-text-center .chapter-lede,
.chapter-text-center .btn-download {
    align-self: center;
}

/* ============================================================
   VISUAL — profundidade lateral + flutuação (sem diagonal)
   ============================================================ */

.chapter-visual {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0;
    perspective: 1800px;
}

/* Glow dourado por trás do painel (sem vermelho, só dourado) */
.visual-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 50% at 60% 50%, rgba(241, 215, 122, 0.22), transparent 70%),
        radial-gradient(40% 40% at 80% 60%, rgba(241, 215, 122, 0.16), transparent 70%);
    filter: blur(44px);
    z-index: -1;
    pointer-events: none;
}

/* Frame: ancora no centro, com respiro da borda direita + flutuação suave */
.visual-frame {
    position: relative;
    width: 78%;
    max-width: 600px;
    margin-right: clamp(32px, 4vw, 64px);
    transform-origin: 50% 50%;
    transform: translateX(2%) scale(0.88);
    animation: floatY 7s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes floatY {
    0%, 100% { transform: translateX(2%) translateY(0)    scale(0.88); }
    50%      { transform: translateX(2%) translateY(-14px) scale(0.88); }
}

.visual-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid var(--border-gold);
    box-shadow:
        0 30px 90px rgba(0,0,0,0.7),
        0 0 0 1px rgba(201, 169, 97, 0.18),
        0 0 80px rgba(241, 215, 122, 0.18);
}

/* ============================================================
   Tipografia — Cinzel (display) + Cormorant (corpo)
   ============================================================ */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 8px 14px;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid var(--border-gold);
    border-radius: 2px;
    align-self: flex-start;
    line-height: 1;
}

.chapter-text-center .eyebrow { align-self: center; }

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 10px var(--gold-bright);
    animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.55; }
}

.chapter-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.05;
    font-size: clamp(34px, 4.6vw, 60px);
    color: var(--text-0);
}

.chapter-title .line {
    display: block;
    background: linear-gradient(180deg, #f8e6a3 0%, #c9a961 50%, #8a6d2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(201, 169, 97, 0.18);
}

/* HERO: tipografia ainda maior e com mais glow para compensar a falta de card */
.chapter--hero .chapter-title {
    font-size: clamp(44px, 6vw, 84px);
    line-height: 1;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.chapter--hero .chapter-lede {
    color: var(--parchment);
    font-size: clamp(18px, 1.4vw, 22px);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.chapter-lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.2vw, 19px);
    color: var(--parchment-dim);
    line-height: 1.55;
    max-width: 48ch;
    font-weight: 400;
}

.chapter-text-center .chapter-lede {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Botão Download — dourado + carmesim (identidade do painel)
   ============================================================ */

.btn-download {
    margin-top: 22px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 52px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0d0a12;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
    border: 1px solid var(--gold-bright);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    box-shadow:
        0 18px 50px rgba(201, 169, 97, 0.35),
        inset 0 1px 0 rgba(248, 230, 163, 0.6);
    transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), filter 280ms var(--ease-out);
    animation: btnPulse 3s ease-in-out infinite;
    isolation: isolate;
}

.btn-download::before {
    /* Cantos duplos no botão (mesmo estilo dos painéis) */
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(13, 10, 18, 0.3);
    pointer-events: none;
    z-index: 0;
}

.btn-download::after {
    /* Ornamento dourado girando por trás */
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(241, 215, 122, 0.4) 80deg, transparent 180deg, rgba(201, 169, 97, 0.3) 280deg, transparent 360deg);
    filter: blur(12px);
    opacity: 0.5;
    z-index: -1;
    animation: btnSpin 6s linear infinite;
}

.btn-download:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow:
        0 24px 70px rgba(241, 215, 122, 0.45),
        inset 0 1px 0 rgba(248, 230, 163, 0.7);
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 0 18px 50px rgba(201, 169, 97, 0.35), inset 0 1px 0 rgba(248, 230, 163, 0.6); }
    50%      { box-shadow: 0 18px 70px rgba(241, 215, 122, 0.55), inset 0 1px 0 rgba(248, 230, 163, 0.6); }
}

@keyframes btnSpin { to { transform: rotate(360deg); } }

.btn-download-label, .btn-download-icon { position: relative; z-index: 1; }

/* ============================================================
   Footer — estilo dark fantasy
   ============================================================ */

.footer {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-mute);
    pointer-events: none;
}

.footer-ornament {
    color: var(--gold-deep);
    font-size: 12px;
    opacity: 0.85;
}

.footer-sep { opacity: 0.5; }

.footer .footer-links {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer .footer-links a {
    color: var(--text-mute);
    text-decoration: none;
    transition: color 0.2s;
}

.footer .footer-links a:hover { color: var(--gold); }

::selection { background: rgba(201, 169, 97, 0.35); color: var(--text-0); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}