/* =========================================
   GOOGLE FONTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=Caveat:wght@400;600&display=swap');

/* =========================================
   VARIÁVEIS
   ========================================= */
:root {
    --bg: #140e02;
    --paper: #f4e8d2;
    --paper-dark: #e8d5b5;
    --ink: #261407;
    --red: #8b1a1a;
    --brown: #5c4033;
    --gold: #b8955a;
    --font-d: 'Playfair Display', Georgia, serif;
    --font-b: 'Crimson Text', 'Times New Roman', Georgia, serif;
    --font-h: 'Caveat', 'Segoe Script', cursive;
}

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

body, html {
    width: 100vw; height: 100vh;
    background-color: var(--bg);
    font-family: var(--font-b);
    color: var(--ink);
    overflow: hidden;
}

/* =========================================
   FUNDO GLOBAL
   ========================================= */
#ambient-bg {
    position: fixed; inset: 0;
    background:
        /* Pool de luz quente embaixo do livro — como uma luminária de mesa */
        radial-gradient(ellipse 85% 28% at 50% 98%, rgba(160,95,25,0.55) 0%, transparent 60%),
        /* Reflexo lateral suave */
        radial-gradient(ellipse 45% 60% at 8%  55%, rgba(90,52,14,0.18)  0%, transparent 55%),
        radial-gradient(ellipse 45% 60% at 92% 55%, rgba(90,52,14,0.18)  0%, transparent 55%),
        /* Topo mais frio */
        radial-gradient(ellipse at 50% 0%,   rgba(60,38,10,0.15)  0%, transparent 50%),
        /* Base escura — interior de biblioteca */
        radial-gradient(circle at 50% 55%, rgba(28,16,4,0.70) 0%, #060401 100%);
    z-index: 1;
}

#grain-overlay {
    position: fixed; inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* =========================================
   SCALE WRAPPER (1920×1080 → qualquer tela)
   ========================================= */
#scale-wrapper {
    width: 1920px; height: 1080px;
    position: absolute;
    left: 50%; top: 50%;
    z-index: 10;
    perspective: 3200px;
    perspective-origin: 50% 50%;
}

/* =========================================
   O LIVRO 3D
   ========================================= */
#book {
    width: 100%; height: 100%;
    position: relative;
    /* SEM transform-style: preserve-3d — permite box-shadow e z-index normais */
    transition: transform 2s cubic-bezier(0.645, 0.045, 0.355, 1);
    box-shadow:
        0 60px 160px rgba(0,0,0,0.92),
        0 20px 50px  rgba(0,0,0,0.72),
        0  4px 12px  rgba(0,0,0,0.5);
}

/* Sombra difusa abaixo do livro com toque quente de luz */
#book::after {
    content: '';
    position: absolute;
    bottom: -42px; left: 2%; right: 2%;
    height: 70px;
    background: radial-gradient(ellipse at center,
        rgba(0,0,0,0.92) 0%,
        rgba(30,15,4,0.55) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(14px);
}

#book.is-closed { transform: translateX(-25%); }
#book.is-open   { transform: translateX(0%);   }

/* =========================================
   MIOLO (páginas da direita)
   ========================================= */
#book-inside {
    width: 50%; height: 100%;
    position: absolute; top: 0; right: 0;
    background: linear-gradient(to right, var(--paper-dark) 0%, var(--paper) 10%, var(--paper) 100%);
    /* SEM preserve-3d — as páginas internas não precisam de 3D */
    opacity: 0;
    transition: opacity 0.4s 0.9s;
    display: flex;
    border-radius: 0 5px 5px 0;
    overflow: hidden;
}

#book.is-open #book-inside { opacity: 1; z-index: 200; }

/* Lombada vertical no centro */
.book-spine-strip {
    position: absolute; top: 0; left: 0;
    width: 14px; height: 100%;
    background: linear-gradient(to right, #180e04 0%, #3a2010 50%, #251205 100%);
    z-index: 10; pointer-events: none;
}

/* Sombra da dobra */
.book-spine-shadow {
    position: absolute; top: 0; left: 0;
    width: 120px; height: 100%;
    background: linear-gradient(to right,
        rgba(0,0,0,0.62) 0%,
        rgba(0,0,0,0.10) 38%,
        rgba(0,0,0,0)    100%);
    z-index: 5; pointer-events: none;
}

/* =========================================
   CAPA (gira em 3D)
   ========================================= */
#book-cover {
    width: 50%; height: 100%;
    position: absolute; right: 0; top: 0;
    transform-origin: left center;
    transform-style: preserve-3d; /* necessário para frente/verso da capa */
    transition: transform 2s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 100;
}

#book.is-closed #book-cover {
    transform: rotateY(0deg);
    box-shadow:
        -24px 30px 80px rgba(0,0,0,0.88),
          5px  0  18px rgba(0,0,0,0.55),
          0   -2px  8px rgba(0,0,0,0.3);
}

#book.is-open #book-cover {
    transform: rotateY(-180deg);
    box-shadow:
        20px 28px 60px rgba(0,0,0,0.7),
         0   0   20px rgba(0,0,0,0.3);
}

.front, .back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden;
    background: linear-gradient(150deg, #ecddc0 0%, #f2e4cc 45%, #eee0c8 100%);
    border-radius: 2px 14px 14px 2px;
    overflow: hidden;
}

.back {
    transform: rotateY(180deg);
    border-radius: 14px 2px 2px 12px;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
        linear-gradient(to right, #d8c9a8 0%, #ede0c8 22%, #f3e7d1 100%);
}
/* Sombra da lombada via box-shadow — suave e natural */
.back { box-shadow: inset -55px 0 75px rgba(0,0,0,0.19); }

/* =========================================
   PÁGINAS ESQUERDAS (dentro do .back)
   ========================================= */
.lp {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.lp.lp-active {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   CONTEÚDO ESQUERDO (polaroid, quote, obra)
   ========================================= */
.page-left-content {
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 65px;
    position: relative;
    z-index: 10;
}

.page-left-content::before {
    content: '';
    position: absolute;
    top: 22px; bottom: 22px;
    left: 22px; right: 52px;
    border: 1px solid rgba(92,64,51,0.26);
    outline: 1px solid rgba(92,64,51,0.09);
    outline-offset: 6px;
    pointer-events: none;
    z-index: 0;
}

/* Foto do autor (Spread 1 esquerda) */
.author-photo-frame {
    position: relative;
    z-index: 5;
    display: inline-block;
}

.author-image {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    border-radius: 2px;
    filter: sepia(0.55) contrast(1.12) brightness(0.82) grayscale(0.15);
    border: 14px solid #e4d5ba;
    border-bottom-width: 64px;
    box-shadow: 8px 14px 35px rgba(0,0,0,0.55), 0 0 0 1px rgba(92,64,51,0.18);
}

.photo-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-h);
    font-size: 24px;
    font-weight: 600;
    color: rgba(38,20,7,0.62);
    letter-spacing: 3px;
    pointer-events: none;
}

/* Citação (Spread 2 esquerda) */
.quote-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 680px;
    position: relative;
    z-index: 5;
}

.quote-big-mark {
    font-family: var(--font-d);
    font-size: 300px;
    line-height: 0.7;
    color: var(--red);
    opacity: 0.16;
    user-select: none;
}

.open-mark  { align-self: flex-start; margin-left: -28px; }
.close-mark { align-self: flex-end;   margin-right: -28px; margin-top: -32px; }

.quote-main {
    font-family: var(--font-d);
    font-size: 82px;
    font-style: italic;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.22;
    quotes: none;
    margin-top: -80px;
    z-index: 1;
    position: relative;
    text-shadow: 2px 3px 0 rgba(255,255,255,0.45);
}

.quote-rule {
    width: 90px; height: 1px;
    background: linear-gradient(to right, transparent, var(--red), transparent);
    opacity: 0.45;
    margin: 22px auto 18px;
}

.quote-attr {
    font-family: var(--font-b);
    font-size: 22px;
    font-style: normal;
    letter-spacing: 4px;
    color: var(--brown);
    text-transform: uppercase;
}

.quote-source {
    font-family: var(--font-h);
    font-size: 18px;
    color: var(--brown);
    opacity: 0.65;
    margin-top: 10px;
    font-style: italic;
}

/* Capa do livro (Spread 3 esquerda) */
.obra-book-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 30px;
}

.obra-book-3d {
    position: relative;
    filter: drop-shadow(22px 32px 55px rgba(0,0,0,0.78));
    transition: filter 0.4s;
}

.obra-cover-img {
    width: 430px;
    height: auto;
    display: block;
    border-radius: 2px 10px 10px 2px;
    transform: perspective(1100px) rotateY(-22deg) rotateX(2deg) scale(1.02);
    border-left: 16px solid #140a03;
    transition: transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.5s ease;
}

.obra-book-spine-side {
    position: absolute;
    top: 0; left: -14px;
    width: 14px;
    height: 100%;
    background: linear-gradient(to right, #050200 0%, #200e04 55%, #140a03 100%);
    transform-origin: right center;
    transform: perspective(1100px) rotateY(72deg);
    border-radius: 2px 0 0 2px;
}

/* Shelf shadow below book */
.obra-book-3d::after {
    content: '';
    position: absolute;
    bottom: -22px; left: 5%; right: -18%;
    height: 22px;
    background: radial-gradient(ellipse at 40% 50%, rgba(0,0,0,0.55) 0%, transparent 68%);
    pointer-events: none;
    filter: blur(6px);
}

/* =========================================
   TEXTURAS E EFEITOS
   ========================================= */
.paper-texture-local {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(92,64,51,0.035) 36px, rgba(92,64,51,0.035) 37px);
}

.vignette-local {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 5;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(18,10,2,0.72) 100%);
}

.ink-stains-local {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    background:
        radial-gradient(ellipse at 8%  15%, rgba(92,64,51,0.07) 0%, transparent 40%),
        radial-gradient(ellipse at 88% 88%, rgba(44,24,16,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50%  3%, rgba(130,90,50,0.04) 0%, transparent 30%);
}

/* =========================================
   CAPA — conteúdo da frente
   ========================================= */
.cover-border-frame {
    position: absolute;
    top: 28px; bottom: 28px; left: 28px; right: 28px;
    border: 1.5px solid rgba(139,26,26,0.48);
    z-index: 8; pointer-events: none;
}
.cover-border-frame::before {
    content: '';
    position: absolute;
    top: 9px; bottom: 9px; left: 9px; right: 9px;
    border: 1px solid rgba(139,26,26,0.20);
}

/* Medalha decorativa vintage atrás do título */
.front::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 520px; height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(139,26,26,0.16);
    box-shadow:
        0 0 0 16px rgba(139,26,26,0.055),
        0 0 0 32px rgba(139,26,26,0.035),
        0 0 0 56px rgba(139,26,26,0.020),
        inset 0 0 100px rgba(139,26,26,0.045);
    pointer-events: none;
    z-index: 3;
}

.front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 72px 95px;
}

.abnt-header, .abnt-footer {
    font-family: var(--font-b);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 7px;
    text-align: center;
    color: var(--brown);
    opacity: 0.75;
    z-index: 10;
}
.abnt-footer { letter-spacing: 5px; }

.cover-ornament {
    width: 250px; color: var(--brown); z-index: 10; margin: -10px 0;
}
.cover-ornament svg { width: 100%; height: auto; display: block; }

.abnt-body {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex-grow: 1; gap: 55px; z-index: 10;
}

#main-title {
    font-family: var(--font-d);
    font-size: 112px; font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 14px;
    color: var(--red);
    margin: 0; text-align: center;
    text-shadow:
        3px 6px 0 rgba(80,20,10,0.12),
        0 0 60px rgba(139,26,26,0.10),
        0 2px 30px rgba(44,24,16,0.18);
    min-height: 130px; line-height: 1;
}

.abnt-subtitle {
    font-family: var(--font-d);
    font-size: 30px; font-style: italic;
    font-weight: 400; letter-spacing: 3px;
    color: var(--brown); margin-top: 8px;
    text-align: center; opacity: 0.8;
}

.authors-list {
    text-align: center; font-family: var(--font-b);
    font-size: 23px; line-height: 1.95;
    letter-spacing: 4px; color: var(--brown); opacity: 0.7;
}

/* Fade e máquina de escrever */
.fade-item {
    opacity: 0; transform: translateY(14px);
    transition: opacity 1.8s ease, transform 1.8s ease;
}
.fade-item.visible { opacity: 1; transform: translateY(0); }

.cursor::after {
    content: '|';
    animation: blink 0.85s infinite;
    font-weight: 300;
    color: rgba(139,26,26,0.65);
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* =========================================
   PÁGINAS INTERNAS (direita)
   ========================================= */
.page {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    display: flex; flex-direction: column;
    padding: 45px 65px; padding-left: 88px;
    opacity: 0; pointer-events: none;
    background: linear-gradient(to right, #ede0c4 0%, var(--paper) 9%, var(--paper) 100%);
    background-image:
        /* Grain de papel antigo */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"),
        /* Linhas pautadas sutis — como caderno antigo */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 37px,
            rgba(92,64,51,0.055) 37px,
            rgba(92,64,51,0.055) 38px
        ),
        /* Degradê base da página */
        linear-gradient(to right, #e8d5b2 0%, var(--paper) 9%, var(--paper) 100%);
    transition: opacity 0.4s ease;
}

/* Envelhecimento nas bordas da página (foxing) */
.page::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    background:
        radial-gradient(ellipse 80% 25% at 50% 0%,   rgba(80,50,18,0.13) 0%, transparent 100%),
        radial-gradient(ellipse 80% 25% at 50% 100%, rgba(60,38,12,0.16) 0%, transparent 100%),
        radial-gradient(ellipse 22% 100% at 0%  50%, rgba(70,44,14,0.12) 0%, transparent 100%),
        radial-gradient(ellipse 22% 100% at 100% 50%,rgba(70,44,14,0.10) 0%, transparent 100%);
}

.page.active {
    opacity: 1; pointer-events: auto; z-index: 10;
}

/* Borda clássica da página */
.page::before {
    content: '';
    position: absolute;
    top: 22px; bottom: 22px;
    left: 52px; right: 22px;
    border: 1px solid rgba(92,64,51,0.26);
    outline: 1px solid rgba(92,64,51,0.09);
    outline-offset: 6px;
    pointer-events: none; z-index: 0;
}

/* =========================================
   HEADER DAS PÁGINAS
   ========================================= */
.page-header {
    width: 100%;
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1.5px solid rgba(92,64,51,0.38);
    padding-bottom: 14px; margin-bottom: 28px;
    font-family: var(--font-d); color: var(--ink);
    font-size: 15px; text-transform: uppercase; letter-spacing: 5px;
    position: relative; z-index: 5;
}
.page-header::after {
    content: '✦';
    position: absolute; bottom: -12px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px; color: var(--red); opacity: 0.5;
    background: var(--paper); padding: 0 10px;
    letter-spacing: 0;
}
.page-header .label {
    font-weight: 700; color: var(--red); font-size: 14px; letter-spacing: 4px;
}
.page-header .presenter {
    font-family: var(--font-d); font-style: italic;
    text-transform: none; font-size: 22px;
    font-weight: 400; color: var(--brown); letter-spacing: 1px;
}

/* Watermark de ano — bio page */
.page-yr-watermark {
    position: absolute;
    right: -30px; bottom: -70px;
    font-family: var(--font-d);
    font-size: 400px; font-weight: 900;
    color: var(--red); opacity: 0.052;
    line-height: 1; pointer-events: none; z-index: 1;
    user-select: none; letter-spacing: -18px;
}

/* =========================================
   TIMELINE (Página 1)
   ========================================= */
.timeline-container {
    position: relative; width: 100%; flex-grow: 1;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: space-between;
    text-align: left; padding-left: 20px; padding-bottom: 10px;
}

.timeline-line {
    position: absolute; left: 35px; top: 14px;
    width: 3px; height: 0%;
    background: linear-gradient(to bottom, var(--red) 0%, var(--brown) 75%, rgba(92,64,51,0.2) 100%);
    transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1; border-radius: 2px;
}

.timeline-item {
    display: flex; align-items: flex-start;
    position: relative; z-index: 2;
    opacity: 0; transform: translateX(-18px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.175,0.885,0.32,1.275);
}
.timeline-item.revealed { opacity: 1; transform: translateX(0); }

.timeline-dot {
    width: 24px; height: 24px;
    background-color: var(--paper);
    border: 3px solid var(--red);
    border-radius: 50%; margin-right: 22px; margin-top: 4px;
    flex-shrink: 0; box-shadow: 0 0 0 5px var(--paper);
    display: flex; align-items: center; justify-content: center;
}
.timeline-dot-inner {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); opacity: 0; transform: scale(0);
    transition: opacity 0.3s 0.2s, transform 0.35s 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
}
.timeline-item.revealed .timeline-dot-inner { opacity: 1; transform: scale(1); }
.timeline-item.revealed .timeline-dot {
    animation: stamp 0.4s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes stamp {
    0%   { transform: scale(2.8) rotate(-18deg); opacity: 0; }
    55%  { transform: scale(0.85) rotate(8deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

.timeline-content { display: flex; flex-direction: column; }
.timeline-year {
    font-family: var(--font-d); font-size: 25px; font-weight: 700;
    color: var(--red); margin-bottom: 1px; letter-spacing: 1px;
}
.handwritten-text {
    font-family: var(--font-h); font-size: 27px;
    color: var(--ink); line-height: 1.2; transform: rotate(-0.7deg);
}
.timeline-item .handwritten-text {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 0.9s ease-in-out, opacity 0.2s;
}
.timeline-item.revealed .handwritten-text {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition-delay: 0.18s;
}

/* =========================================
   CARDS (Página 2)
   ========================================= */
.cards-container {
    width: 100%; flex-grow: 1;
    display: flex; flex-direction: column;
    justify-content: space-between; padding-bottom: 10px;
    counter-reset: card-num;
}

.card-item {
    display: flex; align-items: flex-start;
    padding: 0 0 12px 0;
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
    position: relative;
}
.card-item::after {
    content: '';
    position: absolute; bottom: 0; left: 54px;
    width: calc(100% - 74px); height: 1px;
    background: linear-gradient(to right, rgba(92,64,51,0.28), rgba(92,64,51,0.06));
}
.card-item:last-child::after { display: none; }
.card-item.revealed { opacity: 1; transform: translateY(0); }

/* Ícone substituído por numeração tipográfica */
.card-icon {
    font-size: 0; /* oculta emoji */
    counter-increment: card-num;
    width: 46px; flex-shrink: 0;
    margin-right: 16px; margin-top: 2px;
    position: relative; transform: none;
}
.card-item:nth-child(even) .card-icon { transform: none; }
.card-icon::after {
    content: counter(card-num, decimal-leading-zero);
    position: absolute; top: 0; left: 0;
    font-family: var(--font-d);
    font-size: 21px; font-weight: 700;
    color: var(--red); opacity: 0.42;
    letter-spacing: -1px; line-height: 1.3;
}

.card-content { display: flex; flex-direction: column; gap: 2px; }
.card-content h3 {
    font-family: var(--font-d); font-size: 24px; font-weight: 700;
    color: var(--red); text-transform: uppercase; letter-spacing: 2px;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
}
.card-content p {
    font-family: var(--font-h); font-size: 25px;
    color: var(--ink); line-height: 1.2; transform: rotate(-0.3deg);
}

/* =========================================
   OBRAS (Página 3)
   ========================================= */
.obras-container {
    width: 100%; flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.obra-item {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 8px 26px 8px 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.175,0.885,0.32,1.275);
    overflow: hidden;
}
.obra-item.current-step {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Big watermark number */
.obra-num-label {
    position: absolute;
    right: -14px; bottom: -28px;
    font-family: var(--font-d);
    font-size: 300px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -10px;
    color: var(--red);
    opacity: 0.14;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.obra-title {
    font-family: var(--font-d);
    font-size: 50px;
    font-weight: 700;
    color: var(--red);
    line-height: 1.08;
    margin-bottom: 14px;
    text-shadow: 2px 3px 0 rgba(255,255,255,0.45);
    position: relative; z-index: 1;
}

.obra-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    position: relative; z-index: 1;
}

.obra-year {
    font-family: var(--font-d);
    font-size: 19px;
    font-style: italic;
    font-weight: 400;
    color: var(--brown);
    letter-spacing: 3px;
    opacity: 0.85;
}

.obra-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--red) 0%, rgba(139,26,26,0.25) 55%, transparent 100%);
    margin-bottom: 22px;
    opacity: 0.55;
    position: relative; z-index: 1;
}
.obra-rule::before {
    content: '';
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--red);
    position: absolute;
    top: -3px; left: -1px;
    opacity: 0.7;
}

.obra-summary {
    font-family: var(--font-b);
    font-size: 29px;
    color: var(--ink);
    line-height: 1.58;
    margin-bottom: 26px;
    font-weight: 400;
    position: relative; z-index: 1;
}

.obra-quote-block {
    position: relative;
    padding: 18px 26px 18px 44px;
    background: rgba(139,26,26,0.042);
    border-left: 4px solid rgba(139,26,26,0.65);
    border-radius: 0 10px 10px 0;
    z-index: 1;
}
.obra-quote-block::before {
    content: '\201C';
    position: absolute;
    top: -14px; left: 5px;
    font-size: 105px;
    line-height: 1;
    font-family: var(--font-d);
    color: rgba(139,26,26,0.10);
    pointer-events: none;
}
.obra-quote {
    font-family: var(--font-d);
    font-size: 24px;
    font-style: italic;
    color: var(--ink);
    line-height: 1.5;
    display: block;
    margin-bottom: 6px;
}
.obra-quote-attr {
    font-family: var(--font-b);
    font-size: 16px;
    font-style: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brown);
    opacity: 0.7;
    display: block;
}

/* =========================================
   PROGRESS DOTS
   ========================================= */
#progress-dots {
    position: absolute; bottom: 28px; right: 35px;
    display: flex; gap: 10px; z-index: 20;
    pointer-events: none; opacity: 0;
    transition: opacity 0.6s ease;
}
#progress-dots.visible { opacity: 1; }
#progress-dots .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(92,64,51,0.22);
    border: 1px solid rgba(92,64,51,0.3);
    transition: background 0.35s, transform 0.35s; display: block;
}
#progress-dots .dot.active {
    background: var(--red); border-color: var(--red); transform: scale(1.35);
}

/* =========================================
   TRECHOS (Página 4)
   ========================================= */

.trechos-container {
    width: 100%; flex-grow: 1;
    position: relative;
    overflow: hidden;
}
/* Aspas decorativas de fundo — âncora visual da página */
.trechos-container::before {
    content: '\201C';
    position: absolute;
    top: -80px; left: -30px;
    font-family: var(--font-d);
    font-size: 480px;
    line-height: 1;
    color: var(--red);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.trecho-item {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 20px 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
}
.trecho-item.current-step { opacity: 1; pointer-events: auto; }

.trecho-presenter {
    font-family: var(--font-d);
    font-size: 13px; text-transform: uppercase;
    letter-spacing: 6px; color: var(--brown); opacity: 0.7;
    margin-bottom: 32px; align-self: flex-start;
}

.trecho-quote {
    font-family: var(--font-d);
    font-size: 46px; font-style: italic; font-weight: 400;
    color: var(--ink); line-height: 1.62;
    text-align: center; quotes: none;
    margin-bottom: 36px; position: relative; z-index: 1;
    text-shadow: 1px 2px 0 rgba(255,255,255,0.5);
}

.tw {
    display: inline-block;
    opacity: 0; transform: translateX(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.tw.visible { opacity: 1; transform: translateX(0); }

.trecho-label {
    font-family: var(--font-b);
    font-size: 17px; color: var(--brown); opacity: 0;
    letter-spacing: 1px; text-align: center; font-style: italic;
    transition: opacity 0.7s ease;
}
.trecho-label::before {
    content: ''; display: block;
    width: 50px; height: 1px;
    background: linear-gradient(to right, transparent, var(--red), transparent);
    opacity: 0.4; margin: 0 auto 14px;
}
.trecho-label.visible { opacity: 0.72; }

/* Página esquerda 4 */
.trecho-lp-inner {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    position: relative; z-index: 5;
}
.trecho-lp-mark {
    font-family: var(--font-d); font-size: 360px;
    line-height: 0.75; color: var(--red); opacity: 0.22;
    user-select: none; position: relative; left: -28px;
}
.trecho-lp-title {
    font-family: var(--font-d); font-size: 70px;
    font-weight: 700; font-style: italic;
    color: var(--red);
    line-height: 1.1; margin-top: -40px;
    position: relative; z-index: 1;
    text-shadow: 2px 4px 0 rgba(255,255,255,0.45);
}
.trecho-lp-rule {
    width: 65px; height: 1px;
    background: linear-gradient(to right, transparent, var(--red), transparent);
    opacity: 0.4; margin: 24px auto;
}
.trecho-lp-names {
    font-family: var(--font-b); font-size: 17px;
    letter-spacing: 5px; text-transform: uppercase;
    color: var(--brown); opacity: 0.65;
}

/* =========================================
   QUESTÃO ENEM (Página 5) — Folha de prova
   ========================================= */
#page-enem {
    background: #fff;
    background-image: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #111;
    padding: 0;
    gap: 0;
}
#page-enem::before { display: none; }

.enem-topo {
    background: #003F88;
    color: #fff;
    padding: 11px 52px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.enem-topo-badge {
    font-size: 20px; font-weight: 900; letter-spacing: 2px;
}
.enem-topo-area {
    font-size: 13px; opacity: 0.88; letter-spacing: 0.3px;
}
.enem-topo-info {
    font-size: 13px; font-weight: bold;
    background: rgba(255,255,255,0.18);
    padding: 4px 14px; border-radius: 3px;
    white-space: nowrap;
}

.enem-body {
    flex-grow: 1;
    padding: 20px 52px 20px 70px;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.enem-step {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.enem-step.revealed { opacity: 1; transform: translateY(0); }

.enem-fragment {
    background: #f4f6f9;
    border-left: 5px solid #003F88;
    padding: 14px 18px 12px;
    margin-bottom: 0;
    font-size: 22px; line-height: 1.7;
    color: #222; font-style: italic;
}
.enem-fragment cite {
    display: block; margin-top: 8px;
    font-size: 16px; color: #555; font-style: normal;
}

.enem-enunciado {
    font-size: 23px; font-weight: bold;
    color: #111; margin: 14px 0 10px;
    line-height: 1.45; font-style: normal;
}

.enem-alt {
    display: flex; align-items: flex-start;
    gap: 10px; padding: 7px 12px;
    margin-bottom: 3px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 21px; line-height: 1.5;
    color: #222;
    transition: background 0.5s ease, border-color 0.5s ease;
}
.enem-letter {
    font-weight: 900; flex-shrink: 0; min-width: 32px;
    color: #003F88; font-size: 21px;
}
.enem-alt-text { flex: 1; }

/* D só fica verde DEPOIS que o gabarito é revelado */
.enem-body:has(.enem-gabarito.revealed) .enem-alt-correta {
    background: #e8f5e9;
    border-color: #2e7d32;
}
.enem-body:has(.enem-gabarito.revealed) .enem-alt-correta .enem-letter { color: #1b5e20; }
.enem-body:has(.enem-gabarito.revealed) .enem-alt-correta .enem-alt-text {
    color: #1b5e20; font-weight: bold;
}

.enem-gabarito {
    margin-top: 10px;
    padding: 12px 16px;
    background: #fff8e1;
    border-left: 5px solid #f9a825;
    font-size: 20px; line-height: 1.6;
    color: #4a3300;
}
.enem-gabarito strong {
    display: block; margin-bottom: 4px;
    color: #e65100; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1.5px;
    font-weight: 900;
}

/* Página esquerda 5 — capa de caderno ENEM */
.enem-lp-wrap {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    background: #fff; /* no ID para que clones do flipper também herdem */
}
.enem-lp-bar {
    width: 100%; height: 18px;
    background: #003F88; flex-shrink: 0;
}
.enem-lp-body {
    flex-grow: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 40px;
    color: #111;
}
.enem-lp-label {
    font-size: 13px; letter-spacing: 2px;
    text-transform: uppercase; color: #666;
    margin-bottom: 18px;
}
.enem-lp-main {
    font-size: 130px; font-weight: 900;
    color: #003F88; line-height: 1;
    margin-bottom: 8px;
}
.enem-lp-year {
    font-size: 48px; font-weight: 700;
    color: #111; margin-bottom: 28px;
}
.enem-lp-divider {
    width: 55px; height: 5px;
    background: #003F88; margin: 0 auto 28px;
}
.enem-lp-area {
    font-size: 15px; line-height: 1.6;
    color: #444; margin-bottom: 36px;
}
.enem-lp-presenter {
    font-size: 13px; text-transform: uppercase;
    letter-spacing: 5px; color: #999;
}

/* =========================================
   ENCERRAMENTO (Página 6)
   ========================================= */
#page-enc {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.enc-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 52px;
    padding: 60px 100px;
    text-align: center;
}

.enc-step {
    opacity: 0;
    transition: opacity 1.4s ease;
}
.enc-step.revealed { opacity: 1; }

.enc-frase {
    font-family: var(--font-d);
    font-size: 34px;
    line-height: 1.7;
    color: var(--ink);
    font-style: italic;
    max-width: 680px;
}

#enc-assinatura {
    position: absolute;
    bottom: 90px;
    left: 50%; transform: translateX(-50%);
    font-family: var(--font-a);
    font-size: 20px;
    font-style: italic;
    letter-spacing: 3px;
    color: var(--ink);
    opacity: 0;
    white-space: nowrap;
    transition: opacity 1.8s ease;
}
#enc-assinatura.visible  { opacity: 0.55; }
#enc-assinatura.fade-out { opacity: 0; transition: opacity 2.2s ease; }

/* Tela final */
#enc-fim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    opacity: 0; pointer-events: none;
    transition: opacity 1.8s ease;
}
#enc-fim.visible {
    opacity: 1; pointer-events: all;
    background: rgba(10,6,4,0.92);
}
#enc-fim p {
    color: rgba(255,255,255,0.38);
    font-family: var(--font-b);
    font-size: 18px; letter-spacing: 0.5px;
}
#enc-fim b { color: rgba(255,255,255,0.6); font-weight: 600; }

/* Página esquerda 6 */
.enc-lp-inner {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%;
}
.enc-lp-ornament {
    font-size: 90px;
    color: var(--warm-brown, #5c3d2e);
    opacity: 0.25;
    margin-bottom: 20px;
    line-height: 1;
}
.enc-lp-fim {
    font-family: var(--font-a);
    font-size: 22px; font-style: italic;
    color: var(--ink); opacity: 0.3;
    letter-spacing: 6px;
}

/* =========================================
   DICA
   ========================================= */
#hints {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.48); font-family: var(--font-b);
    font-size: 17px; letter-spacing: 0.5px; z-index: 1000;
    transition: opacity 0.8s ease;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 9px 26px; border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.08); white-space: nowrap;
}
#hints b { color: rgba(255,255,255,0.72); font-weight: 600; }