/* Floating navigation and dimensional brand scene. */
#header{position:absolute;inset:0 0 auto;background:none;border:0;z-index:30;pointer-events:none}
#header .nav{min-height:0;height:88px;max-width:none;padding:0 40px;pointer-events:none}
#header .nav>a,#header .nav-actions,#header .navlinks{pointer-events:auto}
.brand-logo{background:transparent;width:160px;aspect-ratio:2.75;overflow:visible}
.brand-logo img{position:static;width:100%;height:100%;object-fit:contain;max-width:100%}
.home-view #header .brand-logo img{filter:invert(1) hue-rotate(180deg)}
#header .nav-actions{gap:12px}
#header .nav-actions .btn{border:0;padding:10px 16px;font-size:12px;background:transparent}
.home-view #header .nav-actions .btn{color:#eee}
#header .mobile-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:43px;height:43px;border-radius:50%;border:1px solid #98878a55;background:#fff8;backdrop-filter:blur(16px)}
.mobile-toggle span{display:block;width:16px;height:1px;background:currentColor;transition:transform .25s}
.mobile-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mobile-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.home-view #header .mobile-toggle{background:#ffffff0c;color:white;border-color:#ffffff35}
#header .navlinks{display:none}
#header .navlinks.open{display:flex;position:absolute;top:76px;right:40px;left:auto;width:min(330px,calc(100vw - 40px));flex-direction:column;align-items:stretch;gap:0;padding:20px;background:#161219f5;color:#eee;border:1px solid #ffffff24;border-radius:18px;box-shadow:0 25px 80px #0005;backdrop-filter:blur(25px)}
#header .navlinks a{padding:17px 12px;border-bottom:1px solid #ffffff12;font-size:16px}
#header .navlinks a:last-child{border-bottom:0}#header .navlinks a:hover,#header .navlinks a[aria-current]{color:#ff5269}
body:not(.home-view) #main{padding-top:88px}
.noir-hero{--scene-accent:#ff1838;--scene-glow:#ed103755;min-height:850px;background:radial-gradient(ellipse at 77% 50%,#310b19 0%,#100b13 42%,#09090d 76%)}
.hero-inner{padding-top:112px}.hero-topline{margin-bottom:16px}.noir-layout{min-height:590px}
.emblem-scene{perspective:950px;transform:none;min-height:500px}
.emblem-scene>.orbit,.emblem-scene>.hero-emblem,.emblem-scene>.emblem-halo{display:none}
.depth-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease-out}
.emblem-volume{position:absolute;left:50%;top:48%;width:350px;height:350px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(-9deg) rotateY(-22deg) rotateZ(-10deg);animation:volume-float 7s ease-in-out infinite}
.emblem-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}

.emblem-face{transform:translateZ(3px);filter:drop-shadow(0 0 2px #ff9a9a) drop-shadow(0 15px 32px #ff15334a)}
.depth-ring{position:absolute;left:50%;top:49%;width:440px;height:440px;border-radius:50%;transform-style:preserve-3d;border:2px solid var(--scene-accent);box-shadow:0 0 16px var(--scene-glow),inset 0 0 16px var(--scene-glow);background:transparent;transition:border-color .8s,box-shadow .8s}
.ring-a{transform:translate(-50%,-50%) rotateX(68deg) rotateY(-18deg);animation:ring-precess 14s linear infinite}
.ring-b{width:470px;height:470px;border-width:1px;border-color:#ff899a80;transform:translate(-50%,-50%) rotateY(65deg) rotateZ(-25deg)}
.ring-c{width:390px;height:390px;border-width:7px;border-color:transparent;border-top-color:var(--scene-accent);border-bottom-color:#ffffff70;box-shadow:none;transform:translate(-50%,-50%) rotateX(65deg) rotateY(30deg);animation:ring-precess 10s linear infinite reverse}
.stage-floor{position:absolute;left:50%;top:77%;width:370px;height:200px;border-radius:50%;background:radial-gradient(ellipse,var(--scene-glow),transparent 68%);transform:translateX(-50%) rotateX(65deg);filter:blur(14px)}
.orbit-spark{position:absolute;top:27%;right:14%;width:9px;height:9px;background:white;border-radius:50%;box-shadow:0 0 18px 5px var(--scene-accent);transform:translateZ(70px)}
.noir-hero[data-mood=conexao]{--scene-accent:#ff55bd;--scene-glow:#ff329975;background:radial-gradient(ellipse at 77% 50%,#3a1036 0%,#170c1b 42%,#09090d 76%)}
.noir-hero[data-mood=liberdade]{--scene-accent:#ff723b;--scene-glow:#ff592875;background:radial-gradient(ellipse at 77% 50%,#421b0c 0%,#1b0d11 42%,#09090d 76%)}
.noir-hero[data-mood=conexao] .emblem-volume{animation-duration:10s}.noir-hero[data-mood=liberdade] .ring-a{animation-duration:8s}
.scene-caption{bottom:10px}.mood-selector button{font-size:11px}.hero-baseline{padding:22px 0}
@keyframes volume-float{0%,100%{transform:translate(-50%,-50%) rotateX(-9deg) rotateY(-22deg) rotateZ(-10deg)}50%{transform:translate(-50%,-55%) rotateX(12deg) rotateY(23deg) rotateZ(3deg)}}
@keyframes ring-precess{from{transform:translate(-50%,-50%) rotateX(68deg) rotateY(-18deg) rotateZ(0deg)}to{transform:translate(-50%,-50%) rotateX(68deg) rotateY(-18deg) rotateZ(360deg)}}
@media(max-width:1000px){.emblem-volume{width:290px;height:290px}.depth-ring{width:350px;height:350px}.ring-b{width:390px;height:390px}.ring-c{width:320px;height:320px}}
@media(max-width:760px){#header .nav{height:72px;padding:0 22px}.brand-logo{width:140px}#header .navlinks.open{top:66px;right:20px}#header .nav-actions{gap:5px}#header .mobile-toggle{width:38px;height:38px}body:not(.home-view) #main{padding-top:72px}.hero-inner{padding-top:90px}.noir-hero{min-height:0}.noir-layout{min-height:0}.noir-copy{padding-top:24px}.emblem-scene{min-height:320px;margin:0 -10px}.emblem-volume{width:235px;height:235px}.depth-ring{width:290px;height:290px}.ring-b{width:310px;height:310px}.ring-c{width:250px;height:250px}.stage-floor{width:240px}.scene-caption{bottom:0}.hero-baseline{margin-top:10px}.hero-topline{margin-bottom:0}.mood-selector{margin-bottom:18px}.mood-selector button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.depth-stage{transform:none!important;transition:none}.emblem-volume,.depth-ring{animation:none!important}.mobile-toggle span{transition:none}}

/* Compact opening and distinct scenes for each mood. */
.home-view #header .brand-logo img{filter:brightness(0) invert(1)}
.home-view #header .brand-logo:before,.home-view #header .brand-logo:after{content:'';position:absolute;inset:0;background:url('assets/pumpxo-logo-transparent.png') center/contain no-repeat;pointer-events:none}
.home-view #header .brand-logo:before{clip-path:inset(0 77% 0 0);z-index:1}
.home-view #header .brand-logo:after{clip-path:inset(0 0 0 71%);z-index:1}
.noir-hero{min-height:0}
.hero-inner{min-height:min(100svh,900px);padding-top:92px;display:flex;flex-direction:column}
.hero-topline{margin-bottom:0}.noir-layout{min-height:0;flex:1}.noir-copy{padding:28px 0}.noir-copy h1{font-size:clamp(64px,7vw,104px)}
.emblem-scene{min-height:400px}.hero-baseline{padding:18px 0}.mood-selector{margin-bottom:20px}
.emblem-volume{width:310px;height:310px}.depth-ring{width:390px;height:390px}.ring-b{width:420px;height:420px}.ring-c{width:350px;height:350px}
.mood-sparkles,.mood-ribbons{position:absolute;inset:0;display:none;transform-style:preserve-3d;pointer-events:none}
.noir-hero[data-mood=conexao] .depth-ring,.noir-hero[data-mood=liberdade] .depth-ring,.noir-hero[data-mood=conexao] .orbit-spark,.noir-hero[data-mood=liberdade] .orbit-spark{display:none}
.noir-hero[data-mood=conexao] .mood-sparkles,.noir-hero[data-mood=liberdade] .mood-ribbons{display:block}
.mood-sparkles i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:#fff0f8;border-radius:50%;box-shadow:0 0 10px 3px #ff55bbaa;animation:spark-breathe 3.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.31s);transform:translateZ(45px)}
.mood-sparkles i:nth-child(3n){border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);width:20px;height:20px}
.mood-ribbons i{position:absolute;left:calc(12% + var(--i)*12%);top:75%;width:calc(8px + var(--i)*2px);height:calc(16px + var(--i)*5px);border:1px solid #ffb69caa;background:linear-gradient(140deg,#ff794688,#ffc8a911 55%,#ff442988);box-shadow:0 0 20px #ff572a40;border-radius:3px;animation:free-flight 5.8s linear infinite;animation-delay:calc(var(--i)*-.83s)}
.noir-hero[data-mood=conexao] .emblem-face{filter:drop-shadow(0 0 4px #ff446e) drop-shadow(0 12px 24px #ff288e55)}
.noir-hero[data-mood=liberdade] .emblem-volume{animation:free-emblem 8s ease-in-out infinite}
@keyframes spark-breathe{0%,100%{opacity:.25;transform:translate3d(0,8px,25px) scale(.6)}50%{opacity:1;transform:translate3d(5px,-10px,65px) scale(1.25)}}
@keyframes free-flight{0%{opacity:0;transform:translate3d(-20px,35px,-30px) rotateY(0deg) rotateZ(-25deg)}15%,75%{opacity:.85}100%{opacity:0;transform:translate3d(40px,-300px,90px) rotateY(240deg) rotateZ(100deg)}}
@keyframes free-emblem{0%,100%{transform:translate(-50%,-50%) rotateY(-20deg) rotateZ(-8deg)}50%{transform:translate(-50%,-54%) rotateY(25deg) rotateZ(8deg)}}
@media(min-width:761px) and (max-height:760px){.hero-inner{padding-top:85px;min-height:100svh}.noir-copy{padding:18px 0}.noir-copy h1{font-size:clamp(60px,6.6vw,90px);margin-bottom:20px}.noir-copy>p{margin-bottom:22px}.emblem-scene{min-height:350px}.emblem-volume{width:275px;height:275px}.depth-ring{width:330px;height:330px}.ring-b{width:365px;height:365px}.ring-c{width:300px;height:300px}.mood-selector{margin-bottom:14px}}
@media(max-width:760px){.hero-inner{min-height:100svh;padding-top:78px}.noir-layout{flex:1}.noir-copy{padding:18px 0 6px}.noir-copy h1{font-size:clamp(48px,11.2vw,76px);margin-bottom:16px}.noir-copy>p{margin-bottom:18px;font-size:13px}.mood-selector{margin-bottom:14px}.emblem-scene{min-height:240px;margin-top:0}.emblem-volume{width:190px;height:190px}.depth-ring{width:235px;height:235px}.ring-b{width:260px;height:260px}.ring-c{width:210px;height:210px}.hero-baseline{padding:14px 0;margin-top:4px}.scene-caption{bottom:0}.stage-floor{width:210px;height:130px}.mood-sparkles{inset:0 25px}.mood-ribbons{inset:0 20px}.mood-ribbons i{animation-name:free-flight-mobile}}
@keyframes free-flight-mobile{0%{opacity:0;transform:translate3d(-10px,20px,-30px) rotateY(0deg) rotateZ(-25deg)}15%,75%{opacity:.85}100%{opacity:0;transform:translate3d(20px,-190px,60px) rotateY(240deg) rotateZ(100deg)}}
@media(prefers-reduced-motion:reduce){.mood-sparkles i,.mood-ribbons i,.noir-hero[data-mood=liberdade] .emblem-volume{animation:none!important}.mood-ribbons i{top:calc(12% + var(--i)*10%);transform:rotate(25deg)}.mood-sparkles i{opacity:.8}}

/* Vector UI arrows and a single continuous logo color treatment. */
.ui-arrow{display:inline-block;width:1em;height:1em;min-width:1em;vertical-align:-.12em;flex-shrink:0;pointer-events:none}
.home-view #header .brand-logo img{filter:url(#brand-on-dark)}
.home-view #header .brand-logo:before,.home-view #header .brand-logo:after{content:none}


/* One composited emblem plane: avoid overlapping filtered raster layers. */
.emblem-volume{transform-style:flat;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.emblem-face,.noir-hero[data-mood=conexao] .emblem-face{filter:none;transform:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.emblem-volume{will-change:auto}}

.hero-topline span:first-child{display:flex}