/* Pedro.fm: sinal, frequencia, tempo e vento. */
#sonic-field{position:fixed;inset:0;width:100%;height:100%;z-index:25;pointer-events:none;mix-blend-mode:difference;opacity:.7}
#signal-cursor{position:fixed;left:0;top:0;z-index:45;pointer-events:none;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .18s;will-change:transform}
#signal-cursor.visible{opacity:1}
#signal-cursor .signal-ring{width:22px;height:22px;border:1px solid #e5ff5490;border-radius:50%;transition:width .2s,height .2s,background .2s}
#signal-cursor.action .signal-ring{width:32px;height:32px;background:#e5ff5420;border-color:#e5ff54}
#signal-label{padding:6px 10px;background:#101010;color:#f4f4ec;border:1px solid #555;border-radius:20px;font:12px Arial;white-space:nowrap}
#signal-label:empty{display:none}
.sound-dock{position:fixed;z-index:40;right:22px;top:18px}
body:not(.map-mode) .sound-dock{top:85px}
#sound-toggle{display:flex;align-items:center;gap:10px;border:1px solid #666;background:#101010e8;color:#f4f4ec;border-radius:30px;padding:10px 15px;font-size:14px;cursor:pointer}
#sound-toggle[aria-pressed=true]{border-color:#e5ff54;color:#e5ff54}
.sound-bars{display:flex;align-items:center;gap:3px;height:15px}
.sound-bars i{display:block;width:2px;height:5px;background:currentColor;transform-origin:center}
#sound-toggle[aria-pressed=true] .sound-bars i{animation:signal-meter 1.8s ease-in-out infinite}
.sound-bars i:nth-child(2){animation-delay:-.5s!important;height:12px}.sound-bars i:nth-child(3){animation-delay:-1s!important;height:8px}
:is(button,a[href]):not(:disabled){cursor:pointer;transition:color .18s,background-color .18s,outline-color .18s}
:is(button,a[href]):not(:disabled):focus-visible{outline:2px solid #e5ff54;outline-offset:6px}
:is(button,a[href]):not(:disabled):hover{outline:1px solid #e5ff54aa;outline-offset:4px}
#gallery button:not(:disabled):hover,#case .back:hover,.code-tabs button:hover,.download:hover{background:#e5ff54;color:#101010;border-color:#e5ff54}
#name-link:hover,#name-link:focus-visible{color:#e5ff54;outline:none;text-shadow:0 0 25px #e5ff5420}
.project-map .card.is-resonating{animation:soft-noise .78s ease-in-out infinite!important;animation-play-state:running!important;outline:2px solid #f4f4ec;outline-offset:7px}
#name-link.is-resonating{animation:soft-text-noise .9s ease-in-out infinite}
@keyframes soft-noise{0%,100%{transform:translate3d(0,0,0) rotate(var(--tilt))}20%{transform:translate3d(.7px,-.5px,0) rotate(calc(var(--tilt) + .18deg))}42%{transform:translate3d(-.8px,.6px,0) rotate(calc(var(--tilt) - .22deg))}67%{transform:translate3d(.4px,.3px,0) rotate(calc(var(--tilt) + .14deg))}83%{transform:translate3d(-.3px,-.5px,0) rotate(var(--tilt))}}
@keyframes soft-text-noise{0%,100%{translate:0 0}24%{translate:.45px -.3px}48%{translate:-.4px .25px}72%{translate:.2px .2px}}
@keyframes signal-meter{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.25)}}
@media(pointer:coarse){#signal-cursor{display:none}.sound-dock{right:12px}#sound-toggle{padding:9px 12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.is-resonating,.sound-bars i{animation:none!important}#signal-cursor{transition:none}}

#overview{cursor:pointer}#gallery.reading #gallery-stage{cursor:default}
:is(button,a[href]):not(:disabled):active{translate:0 1px}
@media(prefers-reduced-motion:reduce){.project-map .card.is-resonating,#name-link.is-resonating,#sound-toggle[aria-pressed=true] .sound-bars i{animation:none!important}}

/* Somente ondas como rastro: remove o circulo e o rotulo flutuante. */
#signal-cursor{display:none!important}
#lens{border-radius:12px;box-shadow:none;min-height:0;padding:24px}
.card-face{display:block;width:100%;height:100%;position:relative;z-index:1}
.card-hover-tint{position:absolute;inset:0;z-index:2;background:linear-gradient(145deg,#e5ff5424,#10101040);opacity:0;pointer-events:none;transition:opacity .25s}
.card-summary{position:absolute;left:20px;right:20px;bottom:17px;z-index:3;background:#101010e8;color:#f4f4ec;font-size:14px;line-height:1.4;padding:12px 14px;border-radius:4px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;opacity:0;transform:translate3d(0,12px,0);transition:transform .25s,opacity .25s;pointer-events:none}
.project-map .card:is(:hover,:focus-visible) .card-face{filter:blur(.65px) brightness(.92) saturate(.88)}
.project-map .card:is(:hover,:focus-visible) .card-hover-tint{opacity:1}
.project-map .card:is(:hover,:focus-visible) .card-summary{opacity:1;transform:translate3d(0,0,0)}
@media(pointer:coarse){.project-map .card .card-summary{opacity:1;transform:none;font-size:12px;left:10px;right:10px;bottom:12px;padding:8px}}
@media(prefers-reduced-motion:reduce){.card-summary,.card-hover-tint{transition:none}.project-map .card:is(:hover,:focus-visible) .card-face{filter:brightness(.92)}}

/* Ondas entre o fundo e o conteudo, nunca sobre a tipografia. */
#sonic-field{position:absolute;left:0;top:0;z-index:1;mix-blend-mode:normal;opacity:1;pointer-events:none}
#track{position:relative;transition:transform .75s cubic-bezier(.22,.75,.18,1)}
.slide .cover-word{position:relative;z-index:2}
.slide .slot{z-index:2}
#case{position:relative;isolation:isolate}
.detail-inner{position:relative;z-index:2}
.project-map .grid{z-index:2}
.project-map #name-intro{z-index:3}
.code-page{position:relative;isolation:isolate}
.code-page>*{position:relative;z-index:2}