/* MOTOR DE CONVITES — Motion Engine 1.9 Presets reutilizáveis. O JS define data-motion-transition, data-motion-reveal e data-motion-intensity no . O CSS estrutural do tema continua intacto. */ :root{ --motion-screen-duration:360ms; --motion-overlay-duration:540ms; --motion-distance:16px; --motion-blur:9px; --motion-scale-in:.975; --motion-ease:cubic-bezier(.2,.75,.2,1); } html[data-motion-intensity="low"]{ --motion-screen-duration:260ms; --motion-overlay-duration:400ms; --motion-distance:9px; --motion-blur:5px; --motion-scale-in:.987; } html[data-motion-intensity="high"]{ --motion-screen-duration:460ms; --motion-overlay-duration:680ms; --motion-distance:24px; --motion-blur:13px; --motion-scale-in:.958; } /* A camada de transição é neutra por padrão; o preset escolhido assume o visual. */ .story-transition{ pointer-events:none!important; isolation:isolate; } .story-transition span{display:none!important} /* Preset: sem camada entre telas. */ html[data-motion-transition="none"] .story-transition{display:none!important} /* Preset: fade — simples e barato. */ html[data-motion-transition="fade"] .story-transition{ display:block!important; opacity:0!important; visibility:hidden!important; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-secondary,#20345f) 88%,#000 12%),var(--theme-primary,#4f79ff))!important; transition:opacity calc(var(--motion-overlay-duration) * .42) ease,visibility 0s linear var(--motion-overlay-duration)!important; } html[data-motion-transition="fade"] .story-transition.is-active{opacity:.96!important;visibility:visible!important;transition-delay:0s!important} html[data-motion-transition="fade"] .story-transition i{display:none!important} /* Preset: dissolve — blur + manchas suaves. */ html[data-motion-transition="dissolve"] .story-transition{ display:block!important; opacity:0!important; visibility:hidden!important; background: radial-gradient(circle at 22% 28%,color-mix(in srgb,var(--theme-accent,#ffd166) 54%,transparent) 0 13%,transparent 37%), radial-gradient(circle at 77% 66%,color-mix(in srgb,var(--theme-primary,#4f79ff) 68%,transparent) 0 17%,transparent 44%), color-mix(in srgb,var(--theme-secondary,#20345f) 86%,#000 14%)!important; backdrop-filter:blur(var(--motion-blur)); transition:opacity calc(var(--motion-overlay-duration) * .48) ease,filter var(--motion-overlay-duration) ease,visibility 0s linear var(--motion-overlay-duration)!important; filter:saturate(.82) blur(4px); } html[data-motion-transition="dissolve"] .story-transition.is-active{opacity:.94!important;visibility:visible!important;filter:saturate(1.08) blur(0)!important;transition-delay:0s!important} html[data-motion-transition="dissolve"] .story-transition i{display:none!important} /* Preset: slide — uma faixa de cor atravessa a tela. */ html[data-motion-transition="slide"] .story-transition{ display:block!important; opacity:1!important; visibility:hidden!important; background:transparent!important; overflow:hidden!important; } html[data-motion-transition="slide"] .story-transition::before{ content:"";position:absolute;inset:-4%; background:linear-gradient(135deg,var(--theme-secondary,#20345f),var(--theme-primary,#4f79ff) 62%,var(--theme-accent,#ffd166)); transform:translate3d(-112%,0,0) skewX(-7deg); will-change:transform; } html[data-motion-transition="slide"] .story-transition.is-active{visibility:visible!important} html[data-motion-transition="slide"] .story-transition.is-active::before{animation:motionSlideAcross var(--motion-overlay-duration) var(--motion-ease) both} html[data-motion-transition="slide"] .story-transition i{display:none!important} @keyframes motionSlideAcross{0%{transform:translate3d(-112%,0,0) skewX(-7deg)}48%,58%{transform:translate3d(0,0,0) skewX(-7deg)}100%{transform:translate3d(112%,0,0) skewX(-7deg)}} /* Preset: zoom — íris radial cinematográfica, sem canvas. */ html[data-motion-transition="zoom"] .story-transition{ display:grid!important;place-items:center!important; opacity:0!important;visibility:hidden!important; background:radial-gradient(circle at center,color-mix(in srgb,var(--theme-accent,#ffd166) 45%,#fff 15%) 0 7%,var(--theme-primary,#4f79ff) 8% 30%,var(--theme-secondary,#20345f) 64%)!important; clip-path:circle(8% at 50% 50%); transition:clip-path calc(var(--motion-overlay-duration) * .68) var(--motion-ease),opacity calc(var(--motion-overlay-duration) * .25) ease,visibility 0s linear var(--motion-overlay-duration)!important; } html[data-motion-transition="zoom"] .story-transition.is-active{opacity:.98!important;visibility:visible!important;clip-path:circle(78% at 50% 50%)!important;transition-delay:0s!important} html[data-motion-transition="zoom"] .story-transition i{display:none!important} /* Preset: brush — três pinceladas irregulares; substitui implementações por tema. */ html[data-motion-transition="brush"] .story-transition{ display:block!important;opacity:0!important;visibility:hidden!important;background:transparent!important;overflow:hidden!important; transition:opacity .06s linear,visibility 0s linear var(--motion-overlay-duration)!important; } html[data-motion-transition="brush"] .story-transition.is-active{opacity:1!important;visibility:visible!important;transition-delay:0s!important} html[data-motion-transition="brush"] .story-transition i{ display:block!important;position:absolute;left:-35%;width:170%;height:36%; background:linear-gradient(90deg,transparent 0%,var(--theme-secondary,#20345f) 12%,var(--theme-primary,#4f79ff) 48%,var(--theme-accent,#ffd166) 75%,transparent 100%)!important; filter:blur(.7px);transform:translate3d(-120%,0,0) skewX(-8deg); clip-path:polygon(0 22%,8% 4%,20% 17%,34% 0,46% 21%,61% 8%,78% 23%,91% 3%,100% 22%,96% 81%,81% 100%,65% 84%,52% 100%,33% 82%,18% 100%,2% 78%); will-change:transform; } html[data-motion-transition="brush"] .story-transition i:nth-child(1){top:-2%} html[data-motion-transition="brush"] .story-transition i:nth-child(2){top:31%;transform:translate3d(-120%,0,0) skewX(7deg);animation-delay:calc(var(--motion-overlay-duration) * .06)!important} html[data-motion-transition="brush"] .story-transition i:nth-child(3){top:64%;animation-delay:calc(var(--motion-overlay-duration) * .12)!important} html[data-motion-transition="brush"] .story-transition.is-active i{animation:motionBrushAcross calc(var(--motion-overlay-duration) * .88) var(--motion-ease) both} @keyframes motionBrushAcross{0%{transform:translate3d(-120%,0,0) skewX(-8deg)}46%,62%{transform:translate3d(0,0,0) skewX(-3deg)}100%{transform:translate3d(120%,0,0) skewX(5deg)}} /* REVEALS: usam propriedades individuais para preservar o transform de centralização dos temas. */ .screen{transition:opacity var(--motion-screen-duration) var(--motion-ease),filter var(--motion-screen-duration) var(--motion-ease),translate var(--motion-screen-duration) var(--motion-ease),scale var(--motion-screen-duration) var(--motion-ease)!important} html[data-motion-reveal="none"] .screen.is-pre-enter, html[data-motion-reveal="none"] .screen.is-leaving{opacity:1!important;filter:none!important;translate:0 0!important;scale:1!important} html[data-motion-reveal="fade"] .screen.is-pre-enter{opacity:0!important;filter:none!important;translate:0 0!important;scale:1!important} html[data-motion-reveal="fade"] .screen.is-leaving{opacity:0!important;filter:none!important;translate:0 0!important;scale:1!important} html[data-motion-reveal="rise"] .screen.is-pre-enter{opacity:0!important;filter:none!important;translate:0 var(--motion-distance)!important;scale:1!important} html[data-motion-reveal="rise"] .screen.is-leaving{opacity:0!important;filter:none!important;translate:0 calc(var(--motion-distance) * -.45)!important;scale:1!important} html[data-motion-reveal="scale"] .screen.is-pre-enter{opacity:0!important;filter:none!important;translate:0 0!important;scale:var(--motion-scale-in)!important} html[data-motion-reveal="scale"] .screen.is-leaving{opacity:0!important;filter:none!important;translate:0 0!important;scale:1.018!important} html[data-motion-reveal="cinematic"] .screen.is-pre-enter{opacity:0!important;filter:blur(var(--motion-blur)) saturate(.86)!important;translate:0 var(--motion-distance)!important;scale:var(--motion-scale-in)!important} html[data-motion-reveal="cinematic"] .screen.is-leaving{opacity:0!important;filter:blur(calc(var(--motion-blur) * .55)) saturate(.9)!important;translate:0 calc(var(--motion-distance) * -.35)!important;scale:1.012!important} /* Estado normal sempre limpo, inclusive após navegação por histórico. */ .screen.is-active:not(.is-pre-enter):not(.is-leaving){filter:none!important;translate:0 0!important;scale:1!important} /* Acessibilidade e economia: movimento não pode ser requisito para usar o convite. */ @media(prefers-reduced-motion:reduce){ .story-transition{display:none!important} .screen,.screen.is-active,.screen.is-pre-enter,.screen.is-leaving{transition:none!important;animation:none!important;opacity:1!important;filter:none!important;translate:0 0!important;scale:1!important} }