/* Página: Animação (usa a base de conteúdos em camera.css) */
.anim-hero::after{background:linear-gradient(90deg,color-mix(in oklch,var(--ink-950) 85%,transparent),transparent 65%),linear-gradient(transparent 60%,var(--bg-base))}
.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-6);align-items:start;margin-bottom:var(--space-7)}
.prose-block p{color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-relaxed);margin:0 0 var(--space-4)}
.prose-block b,.prose-block i{color:var(--text-primary)}
.callout.tight{margin:0}
.sub-head{margin-top:var(--space-9)}
.h3big{font-size:clamp(1.5rem,3.6vw,var(--text-2xl))}
.stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-850);border:1px solid var(--border-default);box-shadow:var(--shadow-lg),var(--glow-soft);max-width:960px;width:100%;margin:0 auto}
.stage canvas{display:block;width:100%;height:auto;touch-action:pan-y}
.hud-tag{position:absolute;left:16px;top:14px;padding:4px 10px;border-radius:var(--radius-xs);background:color-mix(in oklch,var(--ink-950) 72%,transparent);border:1px solid var(--border-accent);color:var(--orange-300);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-wider);pointer-events:none}
.pr-labels{position:absolute;left:0;right:0;bottom:12px;display:flex;pointer-events:none}
.pr-labels span{flex:1;text-align:center;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wider);font-size:var(--text-xs);color:var(--text-secondary)}
.pr-labels span:last-child{color:var(--orange-300)}
body.quizmode .pr-labels,body.quizmode .hud-tag#pr-tag{display:none}
.readout{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--blue-300)}
.info.single{grid-template-columns:1fr}
.info dl.rows{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.strip{position:relative;max-width:960px;width:100%;margin:0 auto;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-1);border:1px solid var(--border-subtle)}
.strip canvas{display:block;width:100%;height:auto}
.strip-note{position:absolute;right:10px;bottom:6px;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-wider)}
.legend-row{display:flex;gap:var(--space-5);flex-wrap:wrap;font-size:var(--text-sm);color:var(--text-secondary)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dot.k{background:var(--orange-500)}.dot.b{background:var(--purple-400)}.dot.i{background:var(--blue-500)}
.tl-wrap{max-width:var(--container-max);margin:0 auto}
.tl-ctrl{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.tl-bar{flex:1;height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden}.tl-bar i{display:block;height:100%;width:0;background:var(--grad-octopus)}
.tl{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px var(--space-4);scrollbar-width:thin;cursor:grab}
.tl.drag{cursor:grabbing;scroll-snap-type:none}
.tl-card{flex:0 0 min(320px,82vw);scroll-snap-align:start;padding:var(--space-5);background:linear-gradient(170deg,var(--surface-3),var(--surface-1));border:1px solid var(--border-default);border-radius:var(--radius-lg);position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.tl-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-octopus)}
.tl-card:hover{border-color:var(--border-accent);transform:translateY(-4px)}
.tl-card .yr{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--ls-wider);color:var(--blue-400);text-transform:uppercase}
.tl-card h3{margin:var(--space-3) 0}.tl-card p{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-relaxed)}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}
.source{max-width:760px;margin:var(--space-6) auto 0;text-align:center;font-size:var(--text-xs);color:var(--text-muted);line-height:var(--lh-relaxed)}
.cheat td:nth-child(1){font-family:var(--font-mono);color:var(--blue-400);width:48px}
.cheat td:nth-child(2){white-space:nowrap}
.cheat td.tr{color:var(--blue-300);font-size:var(--text-xs)}
.quiz-feedback em.pt{display:block;font-style:normal;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--blue-300);margin:2px 0 6px}
.curve-concepts{margin-bottom:var(--space-6)}
.curve-concepts .card{height:100%}
.curve-concepts .card h3{margin-bottom:var(--space-2)}
.curve-concepts .card p{margin:0;color:var(--text-secondary);line-height:var(--lh-relaxed)}
.easing-stage{max-width:1040px}
.curve-legend{display:flex;gap:var(--space-5);flex-wrap:wrap;color:var(--text-secondary);font-size:var(--text-xs)}
.curve-legend span{display:flex;align-items:center;gap:7px}
.curve-dot{display:inline-block;width:11px;height:11px;border-radius:50%}
.curve-dot.now{background:var(--orange-400);box-shadow:0 0 12px color-mix(in oklch,var(--orange-400) 60%,transparent)}
.curve-dot.frames{background:var(--blue-400);opacity:.65}
.curve-line{display:inline-block;width:24px;height:3px;border-radius:var(--radius-pill);background:var(--purple-400)}
#easing-info dt:nth-of-type(2){color:var(--blue-300)}
@media (max-width:900px){.two{grid-template-columns:1fr}.pr-labels span{font-size:var(--text-2xs)}}
@media (max-width:560px){.curve-legend{gap:var(--space-3)}.easing-lab .controls .range{flex-basis:100%}}