
/* ------------------------------------------------------------------
   CONNECT AI / MOTION — V3.4
   Decorative splash; zero dependencies; respects reduced motion.
   All scenes are CSS/SVG, and the JavaScript only controls lifecycle.
   ------------------------------------------------------------------ */
.motion-intro{
 position:fixed;inset:0;z-index:90;display:grid;place-items:center;isolation:isolate;
 overflow:hidden;padding:clamp(20px,4vw,50px);color:#f0fbff;
 background:radial-gradient(ellipse 70% 60% at 50% 50%,#142333 0%,#0a111e 55%,#070b14 100%);
 visibility:hidden;opacity:0;pointer-events:none;
 transition:opacity .5s cubic-bezier(.2,.72,.2,1),visibility 0s linear .5s;
}
.motion-intro.is-visible{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .28s ease,visibility 0s}
.motion-intro.is-leaving{visibility:visible;opacity:0;pointer-events:none;transition:opacity .46s cubic-bezier(.18,.72,.3,1)}
.motion-intro__ambient{position:absolute;z-index:-2;width:min(75vw,850px);height:min(75vw,850px);border-radius:50%;opacity:.72;filter:blur(85px);pointer-events:none}
.motion-intro__ambient--left{left:-33%;top:-38%;background:radial-gradient(circle,#338fab6e,transparent 67%);animation:motion-drift-a 4.8s ease-in-out infinite alternate}
.motion-intro__ambient--right{right:-38%;bottom:-55%;background:radial-gradient(circle,#52d5b84d,transparent 68%);animation:motion-drift-b 4.5s ease-in-out infinite alternate}
.motion-intro__grid{position:absolute;inset:-15%;z-index:-1;pointer-events:none;opacity:.12;background-image:linear-gradient(to right,#9de0df38 1px,transparent 1px),linear-gradient(to bottom,#9de0df38 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(ellipse 55% 55% at center,#000,transparent);transform:perspective(500px) rotateX(13deg) scale(1.1)}
.motion-intro__stage{position:relative;width:min(100%,520px);display:flex;flex-direction:column;align-items:center;text-align:center;isolation:isolate;transform:translateY(5px)}
.motion-intro__halo{position:absolute;top:-90px;left:50%;width:365px;height:365px;border:1px solid #a1eef41d;border-radius:50%;transform:translateX(-50%) scale(.55);opacity:0;pointer-events:none}
.motion-intro.is-visible .motion-intro__halo{animation:motion-halo 1.42s cubic-bezier(.1,.7,.2,1) .12s forwards}
.motion-intro__halo:before,.motion-intro__halo:after{content:"";position:absolute;border:1px solid #a1eef21b;border-radius:50%;inset:24px}
.motion-intro__halo:after{inset:58px;border-color:#b8fff525}
.motion-intro__glass{position:relative;width:126px;height:126px;display:grid;place-items:center;margin:7px auto 33px;border-radius:36px;overflow:hidden;
 background:linear-gradient(145deg,#efffff3e 0%,#7ab6dc19 34%,#6ac9b621 72%,#d5ffff3b 100%);
 border:1px solid #e4ffff82;box-shadow:inset 0 1px 0 #ffffff87,inset 0 -18px 38px #9de2db17,0 42px 110px #8ae4de26,0 0 0 10px #9ce8ee09;
 -webkit-backdrop-filter:blur(23px) saturate(185%);backdrop-filter:blur(23px) saturate(185%);
 opacity:0;transform:translateY(45px) scale(.67) rotate(-13deg);
}
.motion-intro.is-visible .motion-intro__glass{animation:motion-glass-arrive .7s cubic-bezier(.18,1.32,.32,1) .10s forwards,motion-glass-float 2.8s ease-in-out .95s infinite}
.motion-intro__refraction{position:absolute;inset:0;background:radial-gradient(circle at 22% 10%,#ffffff69,transparent 34%),linear-gradient(125deg,transparent 24%,#f5ffff2d 44%,transparent 65%)}
.motion-intro__mark{position:relative;width:82px;height:82px;display:grid;place-items:center;color:#d9fffc;filter:drop-shadow(0 3px 17px #64ecdb60)}
.motion-intro__mark svg{width:82px;height:82px}
.motion-intro__mark-line,.motion-intro__check{stroke-dasharray:190;stroke-dashoffset:190}
.motion-intro.is-visible .motion-intro__mark-line{animation:motion-draw .7s cubic-bezier(.2,.8,.2,1) .29s forwards}
.motion-intro.is-visible .motion-intro__check{stroke-dasharray:45;stroke-dashoffset:45;animation:motion-draw .42s cubic-bezier(.17,.86,.26,1) .79s forwards}
.motion-intro__shine{position:absolute;top:-50%;left:-80%;height:200%;width:42%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,#ffffff68,transparent);filter:blur(8px)}
.motion-intro.is-visible .motion-intro__shine{animation:motion-shine 1.12s ease-out .49s both}
.motion-intro__spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#e0fffd;box-shadow:0 0 12px 3px #a9ffefaa;opacity:0}
.motion-intro__spark--a{top:25px;right:14px}.motion-intro__spark--b{left:19px;bottom:15px}
.motion-intro.is-visible .motion-intro__spark--a{animation:motion-spark .8s ease-in-out .79s both}
.motion-intro.is-visible .motion-intro__spark--b{animation:motion-spark .87s ease-in-out .95s both}
.motion-intro__wordmark{display:flex;align-items:baseline;justify-content:center;gap:.12em;white-space:nowrap;font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:clamp(41px,9vw,65px);line-height:1.03;letter-spacing:-.095em;opacity:0;transform:translateY(26px);text-shadow:0 2px 25px #a9ffed14}
.motion-intro__wordmark b{font-weight:800;letter-spacing:-.06em;color:#a2eadf;text-shadow:0 0 32px #9ffff43b}
.motion-intro.is-visible .motion-intro__wordmark{animation:motion-text-raise .55s cubic-bezier(.2,.83,.2,1) .49s forwards}
.motion-intro__underline{height:1px;width:170px;margin-top:22px;transform:scaleX(0);transform-origin:center;background:linear-gradient(90deg,transparent,#bffff2,transparent)}
.motion-intro.is-visible .motion-intro__underline{animation:motion-scale-x .45s ease .84s forwards}
.motion-intro__tagline{font-size:clamp(12px,2vw,14px);font-weight:500;letter-spacing:.025em;color:#b2c9d8;margin:17px 0 0;opacity:0;transform:translateY(12px)}
.motion-intro.is-visible .motion-intro__tagline{animation:motion-text-raise .55s ease .85s forwards}
.motion-intro__status{display:flex;align-items:center;gap:9px;margin-top:44px;color:#a5b5c5;font-size:10px;letter-spacing:.24em;font-weight:700;opacity:0;transform:translateY(7px)}
.motion-intro.is-visible .motion-intro__status{animation:motion-text-raise .36s ease 1.1s forwards}
.motion-intro__status-pulse{width:7px;height:7px;background:#91e7d1;border-radius:50%;box-shadow:0 0 0 4px #98e7d219,0 0 15px #96e7da70}
.motion-intro__progress{width:184px;height:2px;border-radius:5px;background:#d5eeed25;margin-top:16px;overflow:hidden;opacity:0}
.motion-intro.is-visible .motion-intro__progress{animation:motion-text-raise .3s ease 1.1s forwards}
.motion-intro__progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#5db5bf,#e6fffb);transform:scaleX(0);transform-origin:left;box-shadow:0 0 16px #79f2eac9}
.motion-intro.is-visible .motion-intro__progress span{animation:motion-scale-x .86s cubic-bezier(.13,.82,.2,1) 1.2s forwards}
.motion-intro__skip{position:absolute;right:clamp(18px,4vw,58px);bottom:max(22px,env(safe-area-inset-bottom));z-index:1;border:1px solid #cee9f535;color:#bed0df;background:#ffffff08;padding:10px 15px;border-radius:999px;font-size:11px;letter-spacing:.015em;transition:background .2s ease,border-color .2s ease;opacity:0;transform:translateY(8px)}
.motion-intro.is-visible .motion-intro__skip{animation:motion-text-raise .35s ease .3s forwards}
.motion-intro__skip:hover,.motion-intro__skip:focus-visible{background:#a8f7e626;border-color:#a6eedd99;color:#fff;outline:2px solid transparent}
.motion-intro__skip span{font-size:14px;margin-left:5px}
.motion-intro__corner{position:absolute;left:clamp(18px,4vw,58px);color:#9eb3c077;font-size:9px;letter-spacing:.22em;font-weight:700;white-space:nowrap}
.motion-intro__corner--top{top:30px}.motion-intro__corner--bottom{bottom:32px}
body.motion-intro-running .app{opacity:0;transform:translateY(18px) scale(.991);filter:blur(8px)}
body.motion-intro-revealing .app{animation:motion-app-reveal .72s cubic-bezier(.16,.88,.22,1) both}
@keyframes motion-glass-arrive{to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes motion-glass-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes motion-text-raise{to{opacity:1;transform:translateY(0)}}
@keyframes motion-scale-x{to{transform:scaleX(1)}}
@keyframes motion-draw{to{stroke-dashoffset:0}}
@keyframes motion-halo{to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes motion-shine{0%{left:-80%}100%{left:150%}}
@keyframes motion-spark{0%,100%{opacity:0;transform:scale(.35)}40%{opacity:1;transform:scale(1.1)}}
@keyframes motion-drift-a{to{transform:translate(9%,9%) scale(1.15)}}
@keyframes motion-drift-b{to{transform:translate(-9%,-8%) scale(1.06)}}
@keyframes motion-app-reveal{from{opacity:0;transform:translateY(18px) scale(.991);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
/* V3.4 — geometria luminosa, refração e contraste premium, tudo em CSS */
.motion-intro {background:radial-gradient(ellipse 65% 62% at 52% 48%,#1b2948 0%,#0d1526 50%,#070a13 100%)}
.motion-intro__ambient--left{background:radial-gradient(circle,#7c99fc63,transparent 67%)}
.motion-intro__ambient--right{background:radial-gradient(circle,#95d3ff5e,transparent 68%)}
.motion-intro__grid{opacity:.16;background-image:linear-gradient(to right,#a9c8ff2b 1px,transparent 1px),linear-gradient(to bottom,#a9c8ff2b 1px,transparent 1px)}
.motion-intro__lightfield{position:absolute;inset:-15%;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(ellipse 39% 32% at 50% 48%,rgba(198,227,255,.17),transparent 75%),conic-gradient(from 235deg at 50% 48%,transparent 0deg,rgba(185,207,255,.08) 55deg,transparent 95deg,transparent 230deg,rgba(153,189,255,.09) 279deg,transparent 330deg);mix-blend-mode:screen}
.motion-intro.is-visible .motion-intro__lightfield{animation:ca-lightfield 1.5s cubic-bezier(.2,.75,.2,1) .15s both}
.motion-intro__ray{position:absolute;left:50%;top:50%;height:2px;width:85vmax;opacity:0;pointer-events:none;z-index:-1;transform-origin:left center;background:linear-gradient(90deg,#d7eaff00,#c0dbff72 16%,#ffffff 47%,#bedcff44 70%,transparent);box-shadow:0 0 18px #c5dcff55;filter:blur(.3px)}
.motion-intro__ray--a{transform:rotate(-31deg) translateX(-60%)}
.motion-intro__ray--b{transform:rotate(151deg) translateX(-60%)}
.motion-intro.is-visible .motion-intro__ray--a{animation:ca-ray-a 1.18s cubic-bezier(.15,.8,.25,1) .42s both}
.motion-intro.is-visible .motion-intro__ray--b{animation:ca-ray-b 1.1s cubic-bezier(.15,.8,.25,1) .62s both}
.motion-intro__orbit{position:absolute;z-index:-1;top:-66px;left:50%;height:290px;width:290px;border-radius:50%;border:1px solid rgba(210,232,255,.26);box-shadow:0 0 22px rgba(143,192,255,.10),inset 0 0 36px rgba(144,185,255,.07);opacity:0;transform:translateX(-50%) scale(.55) rotate(-60deg)}
.motion-intro__orbit:before{content:'';position:absolute;inset:13px;border-radius:50%;border:1px solid rgba(195,223,255,.1)}
.motion-intro__orbit i{position:absolute;top:16px;left:55px;width:8px;height:8px;border-radius:50%;background:#effaff;box-shadow:0 0 11px 3px #d0e9ff9c,0 0 30px #7fafff}
.motion-intro.is-visible .motion-intro__orbit{animation:ca-orbit 1.55s cubic-bezier(.11,.78,.28,1) .12s both}
.motion-intro__shockwave{position:absolute;z-index:-1;top:69px;left:50%;height:142px;width:142px;border:2px solid #e6f8ffb0;border-radius:50%;box-shadow:0 0 20px #d4e9ff7a,0 0 42px #9ac5ff40;opacity:0;transform:translate(-50%,-50%) scale(.7);pointer-events:none}
.motion-intro.is-visible .motion-intro__shockwave{animation:ca-shockwave .9s cubic-bezier(.13,.7,.17,1) .55s both}
.motion-intro__glass{background:linear-gradient(147deg,rgba(235,245,255,.43),rgba(143,174,232,.18) 32%,rgba(116,145,215,.26) 69%,rgba(234,247,255,.39));border:1px solid #f2f8ff9c;box-shadow:inset 0 2px 1px #ffffffa8,inset -2px -15px 33px #7ba9ff26,0 35px 110px #8eaaff32,0 0 0 10px #dceaff0b;will-change:transform}
.motion-intro__mark{color:#eff8ff;filter:drop-shadow(0 3px 18px #b5d0ff9b)}
.motion-intro__refraction{background:radial-gradient(circle at 20% 10%,#fff9,transparent 35%),linear-gradient(120deg,transparent 24%,#fff4 46%,transparent 65%)}
.motion-intro__spark{box-shadow:0 0 12px 3px #d2e9ffaa}
.motion-intro__wordmark{gap:.10em;letter-spacing:-.08em;font-weight:760;font-size:clamp(40px,9vw,66px);color:#f9fbff;text-shadow:0 3px 35px rgba(167,199,255,.22)}
.motion-intro__wordmark b{color:#c5ddff;text-shadow:0 0 26px rgba(190,217,255,.55)}
.motion-intro__underline{margin-top:20px;background:linear-gradient(90deg,transparent,#e3f1ff 50%,transparent)}
.motion-intro__tagline{color:#d5dfef}
.motion-intro__status{margin-top:34px;color:#bdcbe2;letter-spacing:.21em}
.motion-intro__status-pulse{background:#bbd8ff;box-shadow:0 0 0 4px #b6d3ff27,0 0 16px #b6d3ffae}
.motion-intro__progress{background:#e0edff30}
.motion-intro__progress span{background:linear-gradient(90deg,#6e94dc,#f1f7ff);box-shadow:0 0 14px #b2d5ff}
.motion-intro__skip{border-color:#dce7ff43;background:#e0ebff12;color:#dce6f7;min-height:41px}
.motion-intro__skip:hover,.motion-intro__skip:focus-visible{background:#c8d9ff32;border-color:#e8f2ffad}
@keyframes ca-lightfield{0%{opacity:0;transform:scale(.8) rotate(-12deg)}44%{opacity:1}100%{opacity:.7;transform:scale(1.12) rotate(8deg)}}
@keyframes ca-ray-a{0%{opacity:0;transform:rotate(-31deg) translateX(-40%) scaleX(.1)}38%{opacity:.72}100%{opacity:0;transform:rotate(-31deg) translateX(-40%) scaleX(1.08)}}
@keyframes ca-ray-b{0%{opacity:0;transform:rotate(151deg) translateX(-40%) scaleX(.1)}40%{opacity:.6}100%{opacity:0;transform:rotate(151deg) translateX(-40%) scaleX(1.08)}}
@keyframes ca-orbit{0%{opacity:0;transform:translateX(-50%) scale(.55) rotate(-60deg)}38%{opacity:.9}100%{opacity:.52;transform:translateX(-50%) scale(1.05) rotate(24deg)}}
@keyframes ca-shockwave{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}16%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(2.45)}}
@media(max-width:690px){.motion-intro__glass{width:112px;height:112px;border-radius:31px;margin-bottom:34px}.motion-intro__stage{transform:translateY(-5px)}.motion-intro__halo{width:310px;height:310px;top:-80px}.motion-intro__status{margin-top:39px}.motion-intro__corner--bottom{bottom:29px;max-width:40%;line-height:1.8;white-space:normal}.motion-intro__wordmark{font-size:clamp(37px,12vw,52px)}}
@media(max-width:690px){.motion-intro__orbit{top:-62px;width:265px;height:265px}.motion-intro__shockwave{top:62px}.motion-intro__ray{width:105vmax}.motion-intro__ambient{filter:blur(68px)}}
@media(prefers-reduced-motion:reduce){.motion-intro{display:none!important}.motion-intro *{animation:none!important;transition:none!important}body.motion-intro-running .app{opacity:1;filter:none;transform:none}body.motion-intro-revealing .app{animation:none!important}}
