/* Textura local, sem bibliotecas ou imagens externas. */
body{background-color:#061f27;background-image:url('assets/ocean-petrol.png');background-size:max(100%, 1600px) auto;background-position:center 70px;background-repeat:no-repeat}
.solutions,.process,.faq{background-image:url('assets/grain.svg')}
.portfolio,.contact{background-color:#061f27;background-image:linear-gradient(#061f2720,#061f2738),url('assets/ocean-petrol.png');background-size:cover;background-position:center;background-repeat:no-repeat}
.about{background-color:#061f27;background-image:linear-gradient(#061f2730,#061f2730),url('assets/ocean-petrol.png');background-size:cover;background-position:center bottom;background-repeat:no-repeat}
.hero{position:relative;isolation:isolate}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 45%,#24525b15,transparent 60%)}
.hero-art:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 200px at var(--light-x,65%) var(--light-y,45%),#e6cc9b24,transparent 75%);opacity:.5;transition:opacity .4s}
.hero-art:hover:before{opacity:1}
.about-visual{background-image:url('assets/grain.svg'),repeating-linear-gradient(125deg,transparent 0 50px,#c9ac7c05 51px,transparent 52px 100px)}
@media(max-width:800px){body{background-size:auto 1050px;background-position:35% 80px}.portfolio,.contact,.about{background-position:65% center}}
.header{box-shadow:0 6px 24px #061c2212}
.nav nav>a{position:relative;transition:color .2s}
.nav nav>a[aria-current="location"]{color:var(--gold)}
.nav nav>a:not(.nav-cta):after{content:'';position:absolute;bottom:-7px;left:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav nav>a[aria-current="location"]:after,.nav nav>a:hover:after{transform:scaleX(1)}
.button{position:relative;overflow:hidden;transition:background .25s,transform .25s,box-shadow .25s}
.button:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff24 50%,transparent 80%);transform:translateX(-120%);transition:transform .65s}
.button:hover:after{transform:translateX(120%)}
.button:active{transform:translateY(0) scale(.98)}
.button>span,.text-link>span{transition:transform .25s}
.button:hover>span,.text-link:hover>span{transform:translate(2px,-2px)}
.service-list details,.faq details{transition:background .25s}
.service-list details:hover,.faq details:hover{background:#c9ac7c0d}
.service-list summary h3{transition:color .25s}
.service-list summary:hover h3{color:#84643a}
.service-options label{transition:background .2s,border-color .2s,box-shadow .2s}
.service-options label:hover{border-color:#9c8257}
.service-options label:has(input:checked){box-shadow:inset 3px 0 #9c8257}
.form-progress b{transition:background .3s,color .3s,border-color .3s}
.project-visual{transition:border-color .35s,box-shadow .35s}
.project:hover .project-visual{border-color:#c9ac7c80;box-shadow:0 14px 35px #061b232b}
.project-visual .sketch{transition:transform .5s}
.project:hover .sketch{transform:translateY(-5px)}
.filters button{transition:background .2s,color .2s,border-color .2s}
@media(hover:hover) and (pointer:fine){
 .portrait img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
 .portrait:hover img{transform:scale(1.035)}
 .hero-art .art-orbit{transition:transform 1s}
 .hero-art:hover .art-orbit{transform:rotate(-29deg)}
}
@media(prefers-reduced-motion:no-preference){
 .service-list details[open] .service-content,.faq details[open] p{animation:content-in .35s ease-out}
 .portfolio-grid .project{animation:content-in .45s ease-out both}
 .portfolio-grid .project:nth-child(2){animation-delay:.06s}
 .portfolio-grid .project:nth-child(3){animation-delay:.12s}
 fieldset:not([hidden]){animation:content-in .3s ease-out}
 @keyframes content-in{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .portrait:hover img,.project:hover .sketch,.hero-art:hover .art-orbit,.button:hover,.button:active{transform:none}
 .hero-art .art-orbit,.hero-art:hover .art-orbit{transform:rotate(-34deg)}
}
