/* =========================================================
   ALFA TECH V10.9 — MOTION EXPERIENCE
   Microinterações, profundidade, parallax e scroll cinematográfico.
   Sem bibliotecas externas. Respeita prefers-reduced-motion.
   ========================================================= */
:root{
  --motion-progress:0;
  --pointer-x:50vw;
  --pointer-y:50vh;
  --hero-rx:0deg;
  --hero-ry:0deg;
  --hero-tx:0px;
  --hero-ty:0px;
  --hero-scroll:0;
  --hero-grid-x:0px;--hero-grid-y:0px;--hero-grid-scroll:0px;
  --hero-glow1-x:0px;--hero-glow1-y:0px;--hero-glow2-x:0px;--hero-glow2-y:0px;
  --hero-copy-x:0px;--hero-copy-y:0px;--hero-copy-scroll:0px;
  --hero-visual-x:0px;--hero-visual-y:0px;--hero-visual-scroll:0px;
}

.motion-progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:10050;pointer-events:none;
  transform-origin:left center;transform:scaleX(var(--motion-progress));
  background:linear-gradient(90deg,#8b130c,#dd2a1b,#ff665b,#dd2a1b);
  box-shadow:0 0 18px rgba(221,42,27,.7);will-change:transform
}
.motion-spotlight{
  position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(221,42,27,.12) 0,rgba(221,42,27,.055) 25%,transparent 68%);
  transform:translate3d(calc(var(--pointer-x) - 260px),calc(var(--pointer-y) - 260px),0);
  filter:blur(8px);opacity:.8;mix-blend-mode:screen;will-change:transform
}
.motion-cursor-dot,.motion-cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:10060;border-radius:50%;opacity:0;will-change:transform}
.motion-cursor-dot{width:6px;height:6px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8);transform:translate3d(-20px,-20px,0)}
.motion-cursor-ring{width:34px;height:34px;border:1px solid rgba(255,82,70,.75);box-shadow:0 0 28px rgba(221,42,27,.16);transform:translate3d(-40px,-40px,0);transition:width .2s,height .2s,border-color .2s,background .2s}
.motion-cursor-ring.is-active{width:48px;height:48px;border-color:rgba(255,255,255,.6);background:rgba(221,42,27,.08)}
.motion-experience.motion-pointer .motion-cursor-dot,.motion-experience.motion-pointer .motion-cursor-ring{opacity:1}

.motion-experience .site-header{will-change:transform,background-color;transform:translateZ(0)}
.motion-experience .site-header.is-scrolled{box-shadow:0 16px 48px rgba(0,0,0,.22)}
.motion-experience .brand-logo--header{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.motion-experience .brand:hover .brand-logo--header{transform:scale(1.035);filter:drop-shadow(0 8px 22px rgba(255,255,255,.12)) drop-shadow(0 0 16px rgba(221,42,27,.15))}

/* HERO: grid vivo, profundidade e luz em movimento */
.motion-experience .hero{isolation:isolate;background:radial-gradient(circle at calc(68% + var(--hero-tx)) calc(32% + var(--hero-ty)),rgba(221,42,27,.12),transparent 31%),#060606}
.motion-experience .hero__grid{background-position:var(--hero-grid-x) var(--hero-grid-y);animation:motionGridDrift 14s linear infinite;will-change:background-position,transform;transform:translate3d(0,var(--hero-grid-scroll),0) scale(1.045)}
.motion-experience .hero__glow--one{animation:motionGlowOne 7s ease-in-out infinite alternate;transform:translate3d(var(--hero-glow1-x),var(--hero-glow1-y),0)}
.motion-experience .hero__glow--two{animation:motionGlowTwo 8.5s ease-in-out infinite alternate;transform:translate3d(var(--hero-glow2-x),var(--hero-glow2-y),0)}
.motion-experience .hero__copy{transform:translate3d(var(--hero-copy-x),calc(var(--hero-copy-y) + var(--hero-copy-scroll)),0);will-change:transform}
.motion-experience .hero__visual{transform:translate3d(var(--hero-visual-x),calc(var(--hero-visual-y) + var(--hero-visual-scroll)),0);will-change:transform}
.motion-experience .hero-logo-card--brand{transform:perspective(900px) rotateX(var(--hero-rx)) rotateY(var(--hero-ry)) translate3d(0,0,40px);transition:transform .18s linear,box-shadow .35s ease;box-shadow:inset 0 1px rgba(255,255,255,.06),0 44px 120px rgba(0,0,0,.5),0 0 70px rgba(221,42,27,.08)}
.motion-experience .hero-logo-card--brand:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.13) 42%,transparent 60%);transform:translateX(-120%);animation:motionLogoSweep 6s ease-in-out infinite}
.motion-experience .brand-badge--hero{animation:motionBadgeBreath 4.5s ease-in-out infinite}
.motion-experience .orbit--one{animation-duration:18s;filter:drop-shadow(0 0 14px rgba(221,42,27,.12))}
.motion-experience .orbit--two{animation-duration:12s}
.motion-experience .float-chip{animation-name:motionFloatChip;animation-timing-function:ease-in-out;animation-iteration-count:infinite;box-shadow:0 18px 55px rgba(0,0,0,.38),0 0 28px rgba(221,42,27,.045)}
.motion-experience .scroll-cue span{animation:motionScrollCue 1.7s ease-in-out infinite}

@keyframes motionGridDrift{to{background-position:56px 56px}}
@keyframes motionGlowOne{to{opacity:.32;filter:blur(95px);scale:1.22}}
@keyframes motionGlowTwo{to{opacity:.30;filter:blur(72px);scale:.82}}
@keyframes motionLogoSweep{0%,62%{transform:translateX(-130%);opacity:0}72%{opacity:1}88%,100%{transform:translateX(130%);opacity:0}}
@keyframes motionBadgeBreath{50%{transform:scale(1.025);filter:drop-shadow(0 20px 48px rgba(221,42,27,.30)) drop-shadow(0 0 24px rgba(255,255,255,.10))}}
@keyframes motionFloatChip{50%{translate:0 -14px;rotate:.4deg}}
@keyframes motionScrollCue{0%,100%{transform:scaleY(.55);transform-origin:top;opacity:.45}50%{transform:scaleY(1.15);opacity:1}}

/* Entradas com direção e stagger */
.motion-experience.motion-reveal-ready .reveal{opacity:0;filter:blur(5px);transform:translate3d(0,38px,0) scale(.985);transition:opacity .9s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1),filter .9s ease;transition-delay:var(--motion-delay,0ms)}
.motion-experience.motion-reveal-ready .reveal.motion-from-left{transform:translate3d(-48px,18px,0) scale(.985)}
.motion-experience.motion-reveal-ready .reveal.motion-from-right{transform:translate3d(48px,18px,0) scale(.985)}
.motion-experience.motion-reveal-ready .reveal.motion-scale{transform:translate3d(0,18px,0) scale(.94)}
.motion-experience.motion-reveal-ready .reveal.is-visible{opacity:1;filter:none;transform:none}
.motion-experience.motion-reveal-ready .section-heading.is-visible h2,.motion-experience.motion-reveal-ready .contact-copy.is-visible h2{animation:motionTitleIn .95s cubic-bezier(.2,.75,.2,1) both}
@keyframes motionTitleIn{from{opacity:.2;letter-spacing:-.075em;transform:translateY(18px)}to{opacity:1;letter-spacing:-.055em;transform:none}}

/* Cartões: profundidade, glare e resposta ao ponteiro */
.motion-tilt{transform-style:preserve-3d;will-change:transform;transform:perspective(1050px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translate3d(0,var(--tilt-lift,0px),0);transition:transform .18s linear,border-color .28s ease,box-shadow .28s ease}
.motion-tilt:hover{--tilt-lift:-5px;box-shadow:0 28px 72px rgba(0,0,0,.25)}
.motion-glare{position:absolute!important;inset:0!important;z-index:8!important;border-radius:inherit!important;pointer-events:none!important;background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,255,255,.13),transparent 28%)!important;opacity:0!important;transition:opacity .25s ease!important;mix-blend-mode:screen!important}
.motion-tilt:hover>.motion-glare{opacity:1!important}
.section--light .motion-glare{background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(221,42,27,.095),transparent 30%)!important;mix-blend-mode:multiply!important}
.motion-experience .value-grid article{overflow:hidden;transition:border-color .25s,background .25s,box-shadow .25s}
.motion-experience .value-grid article:hover{background:#fff;border-color:#cfd0d4;box-shadow:0 20px 50px rgba(24,25,29,.08)}
.motion-experience .value-grid article h3,.motion-experience .platform-grid article strong,.motion-experience .service-card h3{transition:transform .3s cubic-bezier(.2,.8,.2,1),color .3s}
.motion-experience .value-grid article:hover h3,.motion-experience .platform-grid article:hover strong,.motion-experience .service-card:hover h3{transform:translateX(5px)}

/* Soluções e fluxo */
.motion-experience .solution-stage{perspective:1200px}
.motion-experience .solution-card{position:relative;overflow:hidden;transition:border-color .3s,background .3s,box-shadow .3s}
.motion-experience .solution-card:hover{border-color:rgba(221,42,27,.32);box-shadow:0 28px 70px rgba(0,0,0,.24)}
.motion-experience .solution-card__icon{animation:motionIconPulse 3.8s ease-in-out infinite}
.motion-experience .solution-card:nth-child(3) .solution-card__icon{animation-delay:.6s}.motion-experience .solution-card:nth-child(5) .solution-card__icon{animation-delay:1.2s}
.motion-experience .solution-connector span{position:relative;overflow:hidden}
.motion-experience .solution-connector span:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ff4c40,transparent);transform:translateX(-110%);animation:motionConnector 2.2s linear infinite}
.motion-experience .device-flow i{animation:motionArrowPulse 1.5s ease-in-out infinite}.motion-experience .device-flow i:nth-of-type(2){animation-delay:.25s}.motion-experience .device-flow i:nth-of-type(3){animation-delay:.5s}
@keyframes motionIconPulse{50%{transform:translateY(-5px) rotate(3deg);box-shadow:0 12px 28px rgba(221,42,27,.15)}}
@keyframes motionConnector{to{transform:translateX(110%)}}
@keyframes motionArrowPulse{50%{transform:translateX(5px);color:#ff6c61}}

/* Projetos: imagens ganham vida sem falsificar conteúdo */
.motion-experience .project-showcase{transition:border-color .35s,box-shadow .35s,background .35s;overflow:hidden}
.motion-experience .project-showcase:hover{border-color:rgba(255,255,255,.16);box-shadow:0 38px 110px rgba(0,0,0,.30)}
.motion-experience .project-real .real-browser{transform:perspective(1300px) rotateY(calc(-4deg + var(--project-rx,0deg))) rotateX(var(--project-ry,1deg)) translate3d(0,calc(var(--project-shift,0px)),0);will-change:transform}
.motion-experience .project-real .real-phone{animation:motionPhoneFloat 5s ease-in-out infinite;will-change:transform}
.motion-experience .project-showcase--gym .real-phone{animation-delay:.9s}
.motion-experience .real-browser__viewport img{transform:scale(1.005);transition:transform 6s cubic-bezier(.2,.7,.2,1),object-position 6s ease}
.motion-experience .project-showcase:hover .real-browser__viewport img{transform:scale(1.045)}
.motion-experience .real-shot-badge{animation:motionBadgeGlow 2.5s ease-in-out infinite}
@keyframes motionPhoneFloat{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-11px)}}
@keyframes motionBadgeGlow{50%{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 22px rgba(237,28,22,.18)}}

/* Stack contínua */
.motion-experience .tech-marquee{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.motion-experience .tech-track{width:max-content;min-width:100%;flex-wrap:nowrap;justify-content:flex-start;animation:motionMarquee 26s linear infinite;padding-left:22px}
.motion-experience .tech-track:hover{animation-play-state:paused}
.motion-experience .tech-track span{white-space:nowrap;transition:color .2s,transform .2s}.motion-experience .tech-track span:hover{color:#dd2a1b;transform:translateY(-2px)}
@keyframes motionMarquee{to{transform:translateX(var(--marquee-distance,-38%))}}

/* Devices */
.motion-experience .responsive-stage{position:relative;overflow:hidden;background:radial-gradient(circle at var(--responsive-x,72%) var(--responsive-y,38%),rgba(221,42,27,.12),transparent 24%),#111216}
.motion-experience .device--desktop{animation:motionDeviceDesktop 5s ease-in-out infinite}.motion-experience .device--tablet{animation:motionDeviceTablet 5.8s ease-in-out infinite .5s}.motion-experience .device--mobile{animation:motionDeviceMobile 4.8s ease-in-out infinite 1s}
.motion-experience .device span{background-size:200% 100%;animation:motionDeviceScreen 5s ease-in-out infinite}
@keyframes motionDeviceDesktop{50%{transform:translateY(-8px) rotateX(2deg)}}@keyframes motionDeviceTablet{50%{transform:translate(-4px,-8px) rotate(-1deg)}}@keyframes motionDeviceMobile{50%{transform:translate(3px,-12px) rotate(1.5deg)}}
@keyframes motionDeviceScreen{50%{background-position:100% 0}}

/* Processo: linha de progresso viva */
.motion-experience .process-list{position:relative}
.motion-experience .process-list:before{content:"";position:absolute;left:16px;top:0;bottom:0;width:2px;background:linear-gradient(#dd2a1b,#ff5c50);transform-origin:top;transform:scaleY(var(--process-progress,0));box-shadow:0 0 14px rgba(221,42,27,.45);z-index:2}
.motion-experience .process-list article{position:relative;overflow:hidden}
.motion-experience .process-list article:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(221,42,27,.55),transparent);transform:translateX(-110%);transition:transform .7s ease}
.motion-experience .process-list article:hover:after{transform:translateX(110%)}
.motion-experience .process-list article>span{position:relative;z-index:3;transition:color .25s,transform .25s}.motion-experience .process-list article:hover>span{color:#ff5d52;transform:translateX(6px)}

/* Princípios */
.motion-experience .principles:after{animation:motionAlphaDrift 10s ease-in-out infinite alternate;will-change:transform}
.motion-experience .principle-grid span{position:relative;overflow:hidden;transition:background .25s,transform .25s}.motion-experience .principle-grid span:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-130%);transition:transform .6s}.motion-experience .principle-grid span:hover{background:rgba(255,255,255,.05);transform:translateY(-2px)}.motion-experience .principle-grid span:hover:after{transform:translateX(130%)}
@keyframes motionAlphaDrift{to{transform:translate3d(-42px,34px,0) rotate(-5deg) scale(1.04)}}

/* Plataforma */
.motion-experience .platform-grid article{overflow:hidden;transition:border-color .3s,box-shadow .3s,background .3s}.motion-experience .platform-grid article:hover{border-color:rgba(221,42,27,.3);background:#111114;box-shadow:0 25px 65px rgba(0,0,0,.22)}
.motion-experience .platform-grid article:after{animation:motionPlatformGlow 5s ease-in-out infinite alternate}.motion-experience .platform-grid article:nth-child(even):after{animation-delay:1s}
.motion-experience .console-stack i{animation:motionArrowPulse 1.5s ease-in-out infinite}.motion-experience .platform-console{position:relative;overflow:hidden}.motion-experience .platform-console:after{content:"";position:absolute;left:-30%;top:0;width:22%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);transform:skewX(-18deg);animation:motionConsoleSweep 6s ease-in-out infinite;pointer-events:none}
@keyframes motionPlatformGlow{to{opacity:.17;scale:1.35}}@keyframes motionConsoleSweep{0%,55%{left:-35%}85%,100%{left:120%}}

/* Contato */
.motion-experience .contact-glow{transform:translate3d(var(--contact-glow-x,0px),var(--contact-glow-y,0px),0);animation:motionContactGlow 7s ease-in-out infinite alternate}
.motion-experience .project-form{position:relative;overflow:hidden;transition:border-color .35s,box-shadow .35s}.motion-experience .project-form:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--form-x,50%) var(--form-y,50%),rgba(221,42,27,.07),transparent 26%);opacity:0;transition:opacity .25s}.motion-experience .project-form:hover:before{opacity:1}.motion-experience .project-form:focus-within{border-color:rgba(221,42,27,.28);box-shadow:0 32px 90px rgba(0,0,0,.34),0 0 0 1px rgba(221,42,27,.07)}
.motion-experience input,.motion-experience textarea,.motion-experience select{transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}.motion-experience input:focus,.motion-experience textarea:focus,.motion-experience select:focus{transform:translateY(-1px)}
@keyframes motionContactGlow{to{opacity:.2;scale:1.18}}

/* Botões magnéticos e ripple */
.motion-magnetic{--mag-x:0px;--mag-y:0px;transform:translate3d(var(--mag-x),var(--mag-y),0);will-change:transform}
.btn.motion-magnetic:hover{transform:translate3d(var(--mag-x),calc(var(--mag-y) - 2px),0)}
.motion-ripple-host{position:relative;overflow:hidden!important}
.motion-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.24);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:motionRipple .68s ease-out forwards}
@keyframes motionRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* Case pages */
.motion-experience .case-hero{overflow:hidden;position:relative}.motion-experience .case-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at calc(74% + var(--hero-tx)) calc(26% + var(--hero-ty)),rgba(221,42,27,.13),transparent 31%);pointer-events:none}.case-page--gym.motion-experience .case-hero:before{background:radial-gradient(circle at calc(74% + var(--hero-tx)) calc(26% + var(--hero-ty)),rgba(22,119,255,.16),transparent 31%)}
.motion-experience .case-preview--real .real-browser{transition:transform .25s linear,box-shadow .3s;transform:perspective(1200px) rotateX(var(--case-rx,0deg)) rotateY(var(--case-ry,0deg)) translateZ(0)}
.motion-experience .case-mobile-shot{animation:motionPhoneFloat 5s ease-in-out infinite}
.motion-experience .case-feature-grid article{transition:transform .3s,border-color .3s,box-shadow .3s}.motion-experience .case-feature-grid article:hover{transform:translateY(-6px);border-color:rgba(221,42,27,.25);box-shadow:0 22px 60px rgba(0,0,0,.18)}

/* Legal pages: movimento discreto */
.motion-experience.legal-page .legal-hero{position:relative;overflow:hidden}.motion-experience.legal-page .legal-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#dd2a1b;filter:blur(150px);opacity:.08;right:-180px;top:-220px;animation:motionContactGlow 8s ease-in-out infinite alternate}.motion-experience.legal-page .legal-card{transition:transform .3s,border-color .3s,box-shadow .3s}.motion-experience.legal-page .legal-card:hover{transform:translateY(-3px);border-color:#35373d;box-shadow:0 20px 50px rgba(0,0,0,.18)}

@media (hover:none),(pointer:coarse){
  .motion-cursor-dot,.motion-cursor-ring,.motion-spotlight{display:none!important}
  .motion-tilt{transform:none!important}
  .motion-experience .hero__copy,.motion-experience .hero__visual{transform:none}
  .motion-experience .project-real .real-browser{transform:none}
}
@media(max-width:820px){
  .motion-experience .hero__grid{animation-duration:20s}
  .motion-experience .tech-track{animation-duration:34s}
  .motion-experience .process-list:before{left:7px}
}
@media(max-width:620px){
  .motion-experience .hero__visual{transform:scale(.72)!important}
  .motion-experience .project-real .real-phone{animation-duration:6s}
  .motion-experience .principles:after{animation-duration:14s}
}
@media(prefers-reduced-motion:reduce){
  .motion-progress,.motion-spotlight,.motion-cursor-dot,.motion-cursor-ring{display:none!important}
  .motion-experience *,.motion-experience *:before,.motion-experience *:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .motion-experience.motion-reveal-ready .reveal{opacity:1!important;filter:none!important;transform:none!important}
  .motion-tilt,.motion-magnetic,.motion-experience .hero__copy,.motion-experience .hero__visual,.motion-experience .hero-logo-card--brand,.motion-experience .project-real .real-browser{transform:none!important}
}