@font-face{font-family:Cinzel;src:url('/trajetoria-assets/fonts/CinzelDecorative-Regular.ttf');font-display:swap}
@font-face{font-family:Pinyon;src:url('/trajetoria-assets/fonts/PinyonScript-Regular.ttf');font-display:swap}
@font-face{font-family:Plex;src:url('/trajetoria-assets/fonts/ibm-plex-mono.ttf');font-display:swap}
:root{color-scheme:dark;--navy:#030a12;--gold:#c6a66a;--gold-light:#eee0b8;--ink:#f6f1e8;--muted:#b5c4d0;--ease-out:cubic-bezier(.16,1,.3,1);--axis-y:50%;--marker-x:35px;--step:clamp(280px,calc((100vw - 160px)/4),600px)}
*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--ink);font:14px/1.6 MuseuHeaderInter,Arial,sans-serif}::selection{background:#c6a66a;color:#030a12}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,.viewport:focus-visible{outline:2px solid var(--gold-light);outline-offset:5px}button:active:not(:disabled){opacity:.75}.skip{position:fixed;left:20px;top:-60px;z-index:100;background:var(--navy);color:var(--gold-light);padding:10px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}[hidden]{display:none!important}
.introduction{margin:32px 5.6% 0;display:flex;align-items:center;justify-content:space-between;gap:32px}h1{margin:0;font:400 clamp(30px,3vw,46px)/1.3 Cinzel,serif}.handwritten{margin:5px 0 0;color:var(--gold);font:32px/1.4 Pinyon,cursive}
.viewport{position:relative;height:clamp(540px,calc(100svh - 350px),800px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;cursor:grab;background:radial-gradient(ellipse at 50% 48%,#102334 0%,#07131f 40%,#030a12 75%)}.viewport::-webkit-scrollbar{display:none}.viewport.dragging{cursor:grabbing;user-select:none}.track{position:relative;list-style:none;display:flex;margin:0;padding:0 max(5.6vw,calc(100vw - var(--step) - 5.6vw)) 0 5.6vw;height:100%;width:max-content;min-width:100%}.ribbon{position:absolute;left:0;top:calc(var(--axis-y) - 32px);width:100%;height:64px;overflow:visible;pointer-events:none;z-index:0}.ribbon path{vector-effect:non-scaling-stroke}.ribbon-tip{pointer-events:none}

.milestone{position:relative;width:var(--step);flex:none;height:100%;z-index:1}.milestone::before{content:'';position:absolute;left:var(--marker-x);top:var(--axis-y);box-sizing:border-box;width:12px;height:12px;transform:translate(-50%,-50%) rotate(45deg);background:#b9975a;border:1px solid #eee0b8;box-shadow:2px 3px 5px #0009}.milestone::after{content:'';position:absolute;left:var(--marker-x);transform:translateX(-50%);top:calc(var(--axis-y) - 40px);height:40px;width:1px;background:linear-gradient(#b9975a66,#eee0b8)}.milestone:nth-child(even)::after{top:var(--axis-y);background:linear-gradient(#eee0b8,#b9975a66)}

.event{position:absolute;left:20px;bottom:calc(50% + 48px);width:calc(100% - 52px);border:0;padding:0;background:none;text-align:left;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:9px}.milestone:nth-child(even) .event{bottom:auto;top:calc(50% + 48px)}.event .year{font:400 clamp(50px,4.6vw,84px)/1.12 Cinzel,serif;color:var(--gold-light);letter-spacing:-.025em;font-variant-numeric:lining-nums}.event h2{font:400 16px/1.55 Cinzel,serif;margin:0;max-width:25ch;text-wrap:balance}.summary{font:13px/1.65 MuseuHeaderInter,Arial,sans-serif;color:var(--muted);max-width:29ch}.event .discover{font:12px/1.6 Plex,monospace;color:var(--gold);margin-top:3px;display:flex;align-items:center;gap:12px}.event .discover::before{content:'';height:1px;width:22px;background:#b9975a99}.event:focus-visible{outline-offset:8px}.event[aria-current=true] .discover{color:var(--gold-light)}.framed{display:block;width:190px;max-width:90%;aspect-ratio:1.5;margin:0;filter:drop-shadow(5px 9px 7px #0009)}.framed svg{display:block;width:100%;height:100%;overflow:visible}.event.has-photo .summary{display:none}.event.has-photo{gap:5px}.event.has-photo .year{font-size:46px}.event.has-photo h2{font-size:14px}.event.has-photo .framed{width:168px}
.navigation{margin:18px 5.6% 0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.period{display:flex;align-items:center;gap:20px}#current-year{font:400 22px/1.2 Cinzel,serif;color:var(--gold-light)}#position{font:12px/1.6 Plex,monospace;color:var(--gold)}.actions{display:flex;align-items:center;gap:16px}.actions button{color:var(--gold-light);background:none;border:1px solid #c6a66a66;min-width:44px;min-height:44px;border-radius:50%;display:grid;place-items:center}.actions #start{border:0;border-radius:0;font-size:12px;padding:0 10px}.actions svg,#close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}.years{display:flex;justify-content:space-between;gap:8px;margin:20px 5.6% 0;border-bottom:1px solid #c6a66a44}.years button{min-height:44px;border:0;border-bottom:2px solid transparent;padding:8px 10px;background:none;color:var(--muted);font:12px/1.5 Plex,monospace}.years button[aria-current=true]{color:var(--gold-light);border-bottom-color:var(--gold)}.closing{margin:26px 5.6% 32px;color:var(--gold);font:25px/1.5 Pinyon,cursive;display:flex;align-items:center;justify-content:space-between;gap:24px}.closing span{font:12px/1.7 Plex,monospace;color:var(--muted)}.loading{align-self:center;padding:40px;font-family:Plex,monospace}
@media(hover:hover) and (pointer:fine){.event:hover .discover{color:var(--gold-light)}.actions button:hover:not(:disabled){border-color:var(--gold-light)}.years button:hover{color:var(--gold-light)}}
dialog{padding:0;border:1px solid #c6a66a44;color:var(--ink);background:#07131d;width:min(1060px,94vw);max-width:none;max-height:90svh;overflow:auto;box-shadow:0 24px 70px #0009}dialog::backdrop{background:#02070fee}dialog[open]{display:flex;align-items:stretch}.detail-image{width:54%;display:flex;align-items:center;justify-content:center;background:#02080e;padding:24px}.detail-image img{max-width:100%;max-height:70svh;object-fit:contain}.detail-copy{flex:1;padding:54px 40px 40px;min-width:0}#detail-year{font:38px/1.3 Cinzel,serif;color:var(--gold);margin:0 0 12px}#detail-title{font:24px/1.5 Cinzel,serif;margin:0 0 24px;text-wrap:balance}#detail-text{color:#d2dbe0;font-size:15px;line-height:1.8}#detail-source,#detail-credits{font-size:12px;line-height:1.7;color:var(--muted);margin:20px 0 0}#close{position:absolute;right:12px;top:12px;width:44px;height:44px;background:#030a12;border:1px solid #c6a66a77;color:var(--gold-light);display:grid;place-items:center}
@media(max-width:900px){:root{--step:calc((100vw - 60px)/2)}.introduction{margin-top:24px}.event .year{font-size:60px}.viewport{height:560px}.closing{align-items:flex-start}.closing span{max-width:28ch}.event.has-photo .framed{width:180px}}
@media(max-width:600px){:root{--step:calc(100vw - 60px);--axis-y:calc(100% - 48px)}.introduction{display:block;margin:24px 24px 0}h1{font-size:30px}.handwritten{font-size:29px}.viewport{height:440px;margin-top:4px}.track{padding:0 calc(100vw - var(--step) - 24px) 0 24px}.milestone::after,.milestone:nth-child(even)::after{top:calc(var(--axis-y) - 40px);background:linear-gradient(#b9975a66,#eee0b8)}.event,.milestone:nth-child(even) .event{top:auto;bottom:94px;left:8px;width:calc(100% - 42px);gap:14px}.event .year{font-size:76px}.event h2{font-size:18px}.summary{font-size:13px}.event.has-photo{gap:7px}.event.has-photo .year{font-size:56px}.event.has-photo h2{font-size:16px}.event.has-photo .framed{width:222px}.navigation{margin:0 24px;gap:12px}.period{gap:12px}#current-year{font-size:19px}.actions{gap:4px}.actions #start{font-size:12px;padding:0 6px}.years{margin:16px 24px 0;gap:0}.years button{padding:6px 3px;min-width:0;font-size:12px}.closing{display:block;font-size:24px;margin:24px}.closing span{display:block;margin-top:12px;max-width:none}dialog[open]{display:block}.detail-image{width:100%;padding:56px 20px 12px}.detail-image img{max-height:32svh}.detail-copy{padding:40px 24px 28px}dialog:has(.detail-image:not([hidden])) .detail-copy{padding-top:20px}#detail-title{font-size:21px}#detail-year{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Ouro cunhado: texto real, com facetas de luz estáticas e relevo de menos de 1px. */
.event .year{user-select:text;-webkit-user-select:text;color:#d8bd83;filter:drop-shadow(.5px 1px .5px #000b)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .event .year{background:linear-gradient(175deg,#987744 0%,#c6a66a 16%,#eee0b8 30%,#f5e9c7 35%,#b9975a 45%,#ac8749 52%,#eee0b8 73%,#c6a66a 84%,#b9975a 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.2px #c6a66a55}
}
@media(prefers-reduced-motion:reduce){.ribbon-tip,.ribbon-illumination{display:none}}
@media(forced-colors:active){.event .year{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;filter:none;-webkit-text-stroke:0}.ribbon path{stroke:CanvasText}.ribbon-tip{display:none}}

/* Par vetorial em ouro envelhecido; área de toque independente do ornamento. */
.actions #previous,.actions #next{border:0;border-radius:0;min-width:56px;min-height:44px}
.actions #previous svg,.actions #next svg{width:52px;height:30px;stroke:none;filter:drop-shadow(0 2px 2px #0009);transition:filter 160ms ease}
.actions #next svg{transform:scaleX(-1)}
.actions .arrow-metal{stroke:#9b6b29;stroke-width:.65;stroke-linejoin:round}
.actions .arrow-relief{fill:none;stroke:#efd496;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) and (pointer:fine){.actions #previous:hover:not(:disabled) svg,.actions #next:hover:not(:disabled) svg{filter:drop-shadow(0 2px 2px #0009) drop-shadow(0 0 3px #edb74788) brightness(1.15)}}
@media(forced-colors:active){.ribbon-illumination{display:none}.actions .arrow-metal{fill:ButtonText;stroke:ButtonText}.actions .arrow-relief{stroke:ButtonFace}.actions #previous svg,.actions #next svg{filter:none}}

/* O losango registra a passagem do fio; a iluminação fica estável. */
.milestone.is-revealed::before{background:linear-gradient(135deg,#fffdf1,#ffe3a0 48%,#d79b2c);border-color:#fff9dc;box-shadow:2px 3px 5px #0009,0 0 5px #fff0bfdd,0 0 14px #ffc045cc,0 0 25px #e4931966}
@media(prefers-reduced-motion:reduce){.milestone.is-revealed::before{box-shadow:2px 3px 5px #0009}}
@media(forced-colors:active){.milestone.is-revealed::before{background:Highlight;border-color:CanvasText;box-shadow:none}}

/* Um único ano por marco; conteúdo reserva espaço mesmo antes da revelação. */
.viewport:not([data-ready]) .event{visibility:hidden}
.viewport:not([data-ready]) .event .year{transition:none}
.event .year{transform:translate(0,0);transition:transform 720ms cubic-bezier(.77,0,.175,1);transition-delay:180ms}
.milestone:not(.is-revealed) .event{pointer-events:none}
.milestone:not(.is-revealed) .year{transform:translate(24px,var(--year-offset,0px));pointer-events:auto}
.event>:not(.year){opacity:0;visibility:hidden;transition:opacity 180ms var(--ease-out),visibility 180ms}
.milestone.is-revealed .event>:not(.year){opacity:1;visibility:visible}
.milestone.is-revealed .event h2{transition-duration:420ms;transition-delay:720ms}
.milestone.is-revealed .event .summary{transition-duration:520ms;transition-delay:860ms}
.milestone.is-revealed .event .framed{transition-duration:600ms;transition-delay:850ms}
.years{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.years::-webkit-scrollbar{display:none}
.years button{flex:none}
@media(prefers-reduced-motion:reduce){.event .year,.event>:not(.year){transition:none!important}}

.milestone:not(.is-revealed) .event:focus-visible{outline:none}
.milestone:not(.is-revealed) .event:focus-visible .year{outline:2px solid var(--gold-light);outline-offset:8px}

.milestone.is-revealed .event .year{transition-delay:0ms}
.milestone.is-revealed .event .discover{transition-duration:300ms;transition-delay:940ms}
.milestone:first-child.is-revealed .event>:not(.year){transition:none}