/* Portfólio · Raabe Sampaio — estilos. Paletas: troque data-palette em #app (atlas | nanquim | cianotipo). */
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/young-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/literata-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/literata-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/literata-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/literata-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:italic;font-weight:500;font-display:swap;src:url('../assets/fonts/literata-latin-500-italic.woff2') format('woff2')}

/* ---------- paletas ---------- */
.page{--dk: #17120F; --dk2: #261D17; --pp: #E9DEC6; --pp2: #DDD0B3; --ink: #1D1712; --mu: #5A4B3A; --mud: #BDB097; --hot: #E5533A; --hotd: #A82A16; --ch: #EADFC6; --bone: #F1E8D2; --ver: #2F5E52; --ln: rgba(29,23,18,.3);}
.page[data-palette="nanquim"]{--dk: #0E1114; --dk2: #1A2127; --pp: #E8E6DE; --pp2: #DAD7CB; --ink: #0E1114; --mu: #4A525A; --mud: #AEB8BF; --hot: #3FB59B; --hotd: #1F6B59; --ch: #DCE6E4; --bone: #EEF2EF; --ver: #2F4A5E; --ln: rgba(14,17,20,.3);}
.page[data-palette="cianotipo"]{--dk: #0A1F4D; --dk2: #12327A; --pp: #F1EADB; --pp2: #E7DEC9; --ink: #0A1F4D; --mu: #3F4E78; --mud: #A9BFEA; --hot: #FF6B4A; --hotd: #B5321A; --ch: #CFE3FF; --bone: #F4EFE3; --ver: #1E4A6B; --ln: rgba(10,31,77,.3);}

body{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--hot);color:var(--dk)}
.disp{font-family:'Young Serif',Georgia,serif;font-weight:400}
.lbl{font-family:'Atkinson Hyperlegible',system-ui,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.06em;line-height:1.35}
.disp [style*="italic"]{font-family:'Literata',Georgia,serif}

/* ---------- entradas ---------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none}}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
.pl{stroke-dasharray:1;stroke-dashoffset:0}
.drawin{animation:draw 1.6s ease-in-out 1.1s both}

/* ---------- estrelas do fundo ---------- */
@keyframes twinkle{from{opacity:.2} to{opacity:1}}
.stars{position:absolute;inset:0;pointer-events:none}
.stars.a{background-image:radial-gradient(1.5px 1.5px at 8% 18%,var(--bone),transparent),radial-gradient(1px 1px at 22% 62%,var(--bone),transparent),radial-gradient(1.5px 1.5px at 35% 12%,var(--bone),transparent),radial-gradient(1px 1px at 47% 78%,var(--bone),transparent),radial-gradient(1.5px 1.5px at 61% 30%,var(--bone),transparent),radial-gradient(1px 1px at 74% 70%,var(--bone),transparent),radial-gradient(1.5px 1.5px at 88% 22%,var(--bone),transparent),radial-gradient(1px 1px at 93% 84%,var(--bone),transparent);animation:twinkle 4s ease-in-out infinite alternate}
.stars.b{background-image:radial-gradient(1px 1px at 14% 40%,var(--bone),transparent),radial-gradient(1.5px 1.5px at 28% 88%,var(--bone),transparent),radial-gradient(1px 1px at 41% 46%,var(--bone),transparent),radial-gradient(1px 1px at 55% 10%,var(--bone),transparent),radial-gradient(1.5px 1.5px at 68% 52%,var(--bone),transparent),radial-gradient(1px 1px at 82% 90%,var(--bone),transparent),radial-gradient(1px 1px at 96% 48%,var(--bone),transparent);animation:twinkle 6.5s ease-in-out -2s infinite alternate}

/* ---------- esfera celeste ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
.slow{transform-box:view-box;transform-origin:50% 50%;animation:spin 320s linear infinite}
.slow.rev{animation-duration:220s;animation-direction:reverse}
.orbit{transform-box:view-box;transform-origin:50% 50%;animation:spin 110s linear infinite}
.counter{transform-box:fill-box;transform-origin:center;animation:spin 110s linear infinite reverse}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.8)}}
.node{transform-box:fill-box;transform-origin:center;animation:pulse 4s ease-in-out infinite}
.node.n2{animation-delay:-.8s}.node.n3{animation-delay:-1.6s}.node.n4{animation-delay:-2.4s}.node.n5{animation-delay:-3.2s}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--hot);animation:pulse 2.4s ease-in-out infinite}

/* ---------- cometas ---------- */
@keyframes comet{0%{transform:translate(0,0) rotate(-24deg);opacity:0} 2%{opacity:1} 9%{transform:translate(-620px,280px) rotate(-24deg);opacity:0} 100%{transform:translate(-620px,280px) rotate(-24deg);opacity:0}}
.comet{position:absolute;width:140px;height:2px;background:linear-gradient(90deg,var(--hot),transparent);border-radius:2px;opacity:0;animation:comet 15s linear infinite;pointer-events:none}
.comet::before{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--bone);box-shadow:0 0 12px 3px var(--hot)}

/* ---------- revelar / desenhar ao rolar ---------- */
@keyframes reveal{from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none}}
@keyframes moonrise{from{transform:translateY(120px)} to{transform:none}}
@supports (animation-timeline: view()) {
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .moonrise{animation:moonrise linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  .cdraw{animation:draw linear both;animation-timeline:view();animation-range:entry 5% cover 45%}
}

/* ---------- botões, links, seletor de idioma ---------- */
.lnk{background-image:linear-gradient(var(--hot),var(--hot));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s ease}
.lnk:hover{background-size:100% 2px}
.dbl{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 30px;border:1px solid var(--bone);outline:1px solid var(--bone);outline-offset:-6px;transition:outline-offset .25s ease, background .25s ease, color .25s ease}
.dbl:hover{outline-offset:-3px}
.dbl.fill{background:var(--hot);color:var(--dk)}
.dbl.out:hover{background:var(--bone);color:var(--dk)}
.lg{font-family:'Atkinson Hyperlegible',system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;min-width:46px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--mud);cursor:pointer;transition:background .25s ease, color .25s ease}
.lg:hover{color:var(--bone)}
.lg.on{background:var(--bone);color:var(--dk)}
.lg:focus-visible,.dbl:focus-visible,a:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* ---------- mockups dos projetos ---------- */
@keyframes scan{from{top:0} to{top:100%}}
.scr{position:relative;overflow:hidden}
.scr::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--hot),transparent);opacity:.55;animation:scan 4.5s ease-in-out infinite alternate}
.bw,.ph{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.media:hover .bw{transform:translateY(-6px)}
.media:hover .ph{transform:translateY(-14px) rotate(2deg)}
.media.rv:hover .ph{transform:translateY(-14px) rotate(-2deg)}

/* ---------- índice de projetos ---------- */
.row{transition:background .35s ease}
.row .t{transition:color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.row:hover{background:var(--dk2)}
.row:hover .t{color:var(--hot);transform:translateX(10px)}
.row .arr{transition:transform .3s ease}
.row:hover .arr{transform:translateX(6px)}

/* ---------- efemérides ---------- */
.eph{transition:background .3s ease}
.eph:hover{background:var(--pp2)}
.eph .pn{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.eph:hover .pn{transform:scale(1.18) rotate(-12deg)}

/* ---------- estrelas do arsenal ---------- */
@keyframes tw{0%,100%{opacity:1} 50%{opacity:.45}}
.st{transform-box:fill-box;transform-origin:center;transition:transform .3s ease;animation:tw 5s ease-in-out infinite}
.st.d2{animation-delay:-1.5s}.st.d3{animation-delay:-3s}
.st:hover{transform:scale(1.7)}

/* ---------- estante ---------- */
.spine{display:flex;flex-direction:column;align-items:center;gap:14px;flex:none;width:72px;padding:14px 0 16px;border-radius:3px 3px 0 0;box-shadow:inset 3px 0 0 rgba(255,255,255,.12), inset -3px 0 0 rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.spine:hover,.spine:focus-visible{transform:translateY(-18px)}
.spine.lean{transform:rotate(11deg);transform-origin:bottom left;margin-left:10px}
.spine.lean:hover,.spine.lean:focus-visible{transform:rotate(7deg) translateY(-10px)}
.vt{writing-mode:vertical-rl}
.drop::first-letter{font-family:'Young Serif',Georgia,serif;float:left;font-size:88px;line-height:.8;padding:8px 14px 0 0;color:var(--hotd)}

/* ---------- movimento reduzido ---------- */
.noanim *, .noanim *::before, .noanim *::after{animation:none !important;transition:none !important}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{animation:none !important;transition:none !important}
}

/* ---------- acessibilidade e fallback ---------- */
.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; padding:10px 16px; background:var(--bone, #F1E8D2); color:#17120F; font:700 15px/1.2 'Atkinson Hyperlegible', system-ui, sans-serif; border-radius:6px}
.skip-link:focus{left:12px}
.noscript{margin:0; padding:32px; max-width:720px; font:18px/1.6 'Literata', Georgia, serif; color:#17120F}
body{background:#17120F}