/* Slower entrances and studio lighting for the approved Infinet artwork. */
:root{
 --reveal-duration:1.5s;
 --hero-light-cycle:14s;
 --hero-float-cycle:12s;
}
.reveal-ready{
 transition-duration:var(--reveal-duration);
 transition-timing-function:cubic-bezier(.16,.65,.25,1);
}
.hero-art.reveal-ready{
 --hero-enter-x:150px;
 opacity:0;
 transform:translate3d(var(--hero-enter-x),0,0);
 transition:none;
}
.hero-art.reveal-ready.seen{animation:hero-art-enter 2.4s cubic-bezier(.16,.65,.25,1) var(--reveal-delay,0ms) both}
.hero-copy>:not(h1){opacity:0;transform:translate3d(0,56px,0)}
.hero-copy>.reveal-ready{transition:none}
.hero-copy>.reveal-ready.seen{animation:hero-copy-rise 1.5s cubic-bezier(.16,.65,.25,1) var(--reveal-delay,0ms) both}
.hero-line{display:block}
.hero-line{
 opacity:0;
 transform:translate3d(0,72px,0);
}
.hero-line.reveal-ready{transition:none}
.hero-line.reveal-ready.seen{animation:hero-text-rise 1.8s cubic-bezier(.16,.65,.25,1) var(--reveal-delay,0ms) both}
.button,.nav-cta{transition-duration:.45s}
.service-card{transition-duration:.55s}
.project-card-image img{transition-duration:.85s}

.hero{isolation:isolate;background-color:var(--bg)}
.hero>.container{position:relative}
.hero::before{
 content:"";
 position:absolute;
 inset:70px -10% 0 20%;
 background:radial-gradient(ellipse at 72% 42%,#8ceab517,transparent 52%),
            radial-gradient(ellipse at 58% 25%,#d4fff409,transparent 48%);
 pointer-events:none;
 opacity:.45;
}
.hero-parallax,.hero-scene{position:absolute;inset:0;pointer-events:none}
.hero-parallax{
 visibility:hidden;
 transform:translate3d(var(--hero-shift-x,0px),var(--hero-shift-y,0px),0);
 transition:transform 1.4s cubic-bezier(.16,.65,.25,1);
}
.brand-hero.artwork-ready .hero-parallax{visibility:visible}
.hero-scene{
 transform-origin:66% 50%;
 /* Fade the displayed crop as well as the bitmap's transparent edges. */
 -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
 mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
 -webkit-mask-composite:source-in;
 mask-composite:intersect;
}
.hero-scene>img{z-index:0;mix-blend-mode:normal;border-radius:0}
.brand-hero .art-label{
 left:7%;
 right:3%;
 font-size:14px;
 line-height:1.7;
 letter-spacing:.075em;
 color:#d3e6db;
 padding-left:14px;
 text-wrap:balance;
}
.hero-material-light,.hero-orbits{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-material-light{
 z-index:1;
 background:linear-gradient(112deg,transparent 40%,#b5f5d508 44%,#eafffba6 49%,#affbcd2e 53%,transparent 58%);
 background-size:320% 100%;
 background-position:100% 50%;
 -webkit-mask:url('/wp-content/themes/infinetapps/assets/hero-logo-mask-20261007.webp') center/contain no-repeat;
 mask:url('/wp-content/themes/infinetapps/assets/hero-logo-mask-20261007.webp') center/contain no-repeat;
 mix-blend-mode:screen;
 opacity:0;
}
.hero-orbits{z-index:2;overflow:hidden;opacity:0;transition:opacity 1.5s}
.hero-orbit-light{
 fill:none;
 stroke:#beffe1;
 stroke-width:2.5;
 stroke-linecap:round;
 stroke-dasharray:1.8 10 23 965.2;
 opacity:.85;
 filter:drop-shadow(0 0 7px #87ffd4);
}
.hero-orbit-light.secondary{stroke:#91e5c3;opacity:.65;stroke-width:2.2}
.hero-star{fill:#c2ffe5;filter:drop-shadow(0 0 10px #88f5c2);opacity:.4}
.hero-accent{color:var(--mint);padding-bottom:.14em;margin-bottom:-.14em}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .hero-accent{
  background:linear-gradient(108deg,#b5f5b7 0%,#b5f5b7 35%,#d9ffed 42%,#fbfffd 46%,#a0e9c0 51%,#b5f5b7 60%,#b5f5b7 100%);
  background-size:260% 100%;
  background-position:100% 50%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 15px #96f1b71a);
 }
}
.hero.motion-ready::before{animation:hero-atmosphere 16s ease-in-out infinite}
.hero.motion-ready .hero-scene{animation:hero-float var(--hero-float-cycle) ease-in-out infinite}
.hero.motion-ready .hero-material-light{animation:hero-material-sweep var(--hero-light-cycle) ease-in-out infinite}
.hero.motion-ready .hero-accent{animation:hero-type-sheen var(--hero-light-cycle) ease-in-out infinite}
.hero.motion-ready .hero-line.hero-accent.seen{
 animation:hero-text-rise 1.8s cubic-bezier(.16,.65,.25,1) var(--reveal-delay,0ms) both,
           hero-type-sheen var(--hero-light-cycle) ease-in-out infinite;
}
.hero.motion-ready .hero-orbit-light{animation:hero-orbit-travel 22s linear infinite}
.hero.motion-ready .hero-orbits{opacity:1}
.hero.motion-ready .hero-orbit-light.secondary{animation-duration:30s;animation-direction:reverse;animation-delay:-11s}
.hero.motion-ready .hero-star{animation:hero-star-light 8s ease-in-out infinite}
.hero.motion-ready .hero-star:nth-of-type(2){animation-delay:-3s}
.hero.motion-ready .hero-star:nth-of-type(3){animation-delay:-6s}
.hero.motion-paused::before,.hero.motion-paused .hero-scene,
.hero.motion-paused .hero-material-light,.hero.motion-paused .hero-accent,
.hero.motion-paused .hero-orbit-light,.hero.motion-paused .hero-star{animation-play-state:paused}

@keyframes hero-text-rise{
 from{opacity:0;transform:translate3d(0,72px,0)}
 to{opacity:1;transform:none}
}
@keyframes hero-copy-rise{
 from{opacity:0;transform:translate3d(0,56px,0)}
 to{opacity:1;transform:none}
}
@keyframes hero-art-enter{
 from{opacity:0;transform:translate3d(var(--hero-enter-x,150px),0,0)}
 to{opacity:1;transform:none}
}
@keyframes hero-float{
 0%,100%{transform:translate3d(0,3px,0)}
 50%{transform:translate3d(0,-9px,0)}
}
@keyframes hero-atmosphere{
 0%,100%{opacity:.35;transform:translate3d(-14px,10px,0)}
 50%{opacity:.95;transform:translate3d(14px,-8px,0)}
}
@keyframes hero-type-sheen{
 0%,5%{background-position:100% 50%}
 47%,100%{background-position:0% 50%}
}
@keyframes hero-material-sweep{
 0%,18%{background-position:100% 50%;opacity:0}
 25%{opacity:.85}
 60%{background-position:0% 50%;opacity:.85}
 68%,100%{background-position:0% 50%;opacity:0}
}
@keyframes hero-orbit-travel{to{stroke-dashoffset:-1000}}
@keyframes hero-star-light{
 0%,100%{opacity:.3}
 50%{opacity:.95}
}
@media(max-width:800px){
 .hero-art.reveal-ready{--hero-enter-x:95px}
 .hero-material-light{-webkit-mask-size:cover;mask-size:cover}
 .brand-hero{margin-bottom:48px}
 .brand-hero .art-label{bottom:-8%;left:5%;right:5%;font-size:13px;letter-spacing:.055em}
 .hero.motion-ready .hero-scene{animation-name:hero-float-mobile}
 .hero-orbit-light{stroke-width:3.2}
}
@keyframes hero-float-mobile{
 0%,100%{transform:translate3d(0,2px,0)}
 50%{transform:translate3d(0,-5px,0)}
}
@media(prefers-reduced-motion:reduce){
 .hero-copy>:not(h1),.hero-line,.reveal-ready,.hero-line.reveal-ready,.hero-art.reveal-ready{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
 .hero::before{animation:none!important;opacity:.4;transform:none}
 .hero-parallax,.hero-scene{transform:none!important;animation:none!important;transition:none!important}
 .hero-accent{background:none;color:var(--mint);-webkit-text-fill-color:var(--mint);filter:none;animation:none!important}
 .hero-material-light,.hero-orbits{display:none!important}
}