{"id":312,"date":"2025-10-09T14:40:36","date_gmt":"2025-10-09T14:40:36","guid":{"rendered":"https:\/\/cineontv.com.br\/projetocards\/?page_id=312"},"modified":"2025-10-13T02:44:25","modified_gmt":"2025-10-13T02:44:25","slug":"1part","status":"publish","type":"page","link":"https:\/\/unicloud.com.br\/projetosox\/","title":{"rendered":"PRIMEIRA PARTE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"312\" class=\"elementor elementor-312\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26cc337 e-con-full mdw-gta6-effect e-flex e-con e-parent\" data-id=\"26cc337\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dbfd4cf elementor-widget elementor-widget-html\" data-id=\"dbfd4cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n\/* For Desktop *\/\n\n.mdw-gta6-effect{\n    --svg-image-zoom-origin-x: 2px;\n    --svg-image-zoom-origin-y: 40px;\n    --gradient-heading-color-1: #DEA704;\n    --gradient-heading-color-2: #FFD747;\n    --gradient-heading-color-3: #FFE500;\n    \n    \/* Refresh Required *\/\n    \/*--banner-hd-url: url('HD_IMAGE_URL');*\/\n    --banner-maximum-zoom: 1.3;\n    --banner-initial-zoom: 200px;\n    --banner-entrance-transition: 1.5s;\n    --svg-image-height: 120px;\n    --svg-image-bottom-gap: 50px;\n    --svg-image-maximum-zoom: 400;\n    --svg-image-background: #000000;\n}\n\n\/* For Tablet *\/\n\n@media (max-width:1024px){\n.mdw-gta6-effect{\n    --svg-image-zoom-origin-x: 2px;\n    --svg-image-zoom-origin-y: 35px;\n    --svg-image-height: 105px;\n    --svg-image-bottom-gap: 15px;\n}\n}\n\n\/* For Mobile *\/\n\n@media (max-width:767px){\n.mdw-gta6-effect{\n    --svg-image-zoom-origin-x: 2px;\n    --svg-image-zoom-origin-y: 25px;\n    --svg-image-height: 90px;\n    --svg-image-bottom-gap: 10px;\n    \n}\n}\n\n.mdw-gta6-effect > *{\n    position: absolute;\n    top: 0;\n}\n.mdw-gta6-effect > *.sticky{\n    position: fixed;\n    top: 0;\n}\n.mdw-gta6-effect > *.sticky-end{\n    position: absolute;\n    bottom: 0;\n    top: auto !important;\n}\n.mdw-gta6-effect p{\n    margin-bottom: 0;\n}\nhtml.elementor-html .mdw-gta6-banner,\n.mdw-gta6-banner.loaded{\n    --banner-initial-zoom: 0px;\n}\n.mdw-gta6-banner:before,\n.mdw-gta6-banner .elementor-widget  > *{\n    opacity: 0;\n}\n.mdw-gta6-banner:before{\n    transform: scale(var(--banner-zoom,1));\n    background-size: cover;\n    background-position: center center;\n    top: calc(-1*var(--banner-initial-zoom,0px));\n    left: calc(-1*var(--banner-initial-zoom,0px));\n    height: calc(100% + var(--banner-initial-zoom,0px) * 2);\n    width: calc(100% + var(--banner-initial-zoom,0px) * 2);\n    filter: blur(calc(var(--banner-initial-zoom,0px)\/4));\n    transition: opacity var(--banner-entrance-transition,0s) ease-in-out, top var(--banner-entrance-transition,0s) ease-in-out, left var(--banner-entrance-transition,0s) ease-in-out, height var(--banner-entrance-transition,0s) ease-in-out, width var(--banner-entrance-transition,0s) ease-in-out, filter var(--banner-entrance-transition,0s) ease-in-out;\n}\n.mdw-gta6-banner.hd-bg:before{\n    background-image: var(--banner-hd-url) !important;\n}\n.mdw-gta6-banner .elementor-widget > *{\n    filter: blur(calc(var(--banner-initial-zoom,0px)\/4));\n    transition: all calc(var(--banner-entrance-transition,0s)\/2) linear calc(var(--banner-entrance-transition,0s)\/2) !important;\n}\n.mdw-gta6-banner.loaded:before,\nhtml.elementor-html .mdw-gta6-banner:before,\n.mdw-gta6-banner.loaded .elementor-widget > *,\nhtml.elementor-html .mdw-gta6-banner .elementor-widget > *{\n    opacity: 1;\n}\n.mdw-gta6-container{\n    --svg-image-top-gap: 0px;\n    position: relative;\n}\n.mdw-gta6-container:before{\n    opacity: var(--overlay-opacity-2,0);\n    transition: none;\n}\n.mdw-gta6-container:after{\n    content: \"\";\n    background: red;\n    height: 5px;\n    width: 5px;\n    position: absolute;\n    top: calc(var(--svg-image-top-gap,0px) + var(--svg-image-height,0px)\/2 + var(--svg-image-zoom-origin-y,0px));\n    left: calc(50% + var(--svg-image-zoom-origin-x,0px));\n    transform: translate(-50%,-50%);\n    z-index: 10;\n    border-radius: 50px;\n    opacity: 0.9;\n    display: none;\n}\nhtml.elementor-html .mdw-gta6-container:after{\n    display: block;\n}\nhtml:not(.elementor-html) .mdw-gta6-container,\nhtml:not(.elementor-html) .mdw-gta6-container > *{\n    pointer-events: none;\n}\nhtml:not(.elementor-html) .mdw-gta6-container.clickable,\nhtml:not(.elementor-html) .mdw-gta6-container.clickable > *{\n    pointer-events: auto;\n}\nhtml:not(.elementor-html) .mdw-gta6-container > .elementor-element{\n    opacity: 0;\n}\nhtml:not(.elementor-html) .mdw-gta6-container.clickable > .elementor-element{\n    opacity: 1;\n}\n.mdw-gta6-container svg{\n    min-height: var(--min-height,100vh);\n    width: 100%;\n    transform: scale(var(--svg-image-maximum-zoom,400));\n    transform-origin: calc(50% + var(--svg-image-zoom-origin-x,0px)) calc(var(--svg-image-top-gap) + var(--svg-image-height)\/2 + var(--svg-image-zoom-origin-y,0px));\n    opacity: 0;\n}\n.mdw-gta6-container svg path{\n    transform: scale(var(--svg-image-size,1)) translateX(calc(50%\/var(--svg-image-size,1) - var(--svg-image-natural-width,0px)\/2)) translateY(calc(var(--svg-image-top-gap,0px)\/var(--svg-image-size,1)));\n}\n.mdw-gta6-text{\n    bottom: var(--svg-image-top-gap,0px) !important;\n}\n.mdw-gta6-heading-1 > *{\n    background: linear-gradient(to bottom, var(--svg-image-background,#000) calc(var(--gradient-heading-start, 0)*1%), var(--gradient-heading-color-1,#fff) calc(var(--gradient-heading-start, 0)*1% + 70%), var(--gradient-heading-color-2,#fff) calc(var(--gradient-heading-start, 0)*1% + 120%), var(--gradient-heading-color-3,#fff) calc(var(--gradient-heading-start, 0)*1% + 170%));\n    background-clip: text;\n    -webkit-background-clip: text;\n}\n@media (min-width:768px){\n.mdw-gta6-banner,\n.mdw-gta6-container,\n.mdw-gta6-container svg{\n    height: 500px;\n}\n}\n@media (min-width:1025px){\n.mdw-gta6-banner,\n.mdw-gta6-container,\n.mdw-gta6-container svg{\n    height: 600px;\n}\n}\n@media (max-width:767px){\n.mdw-gta6-effect{\n    --banner-initial-zoom: 0px;\n}\n.mdw-gta6-effect > *,\n.mdw-gta6-effect > *.sticky,\n.mdw-gta6-effect > *.sticky-end{\n    position: relative !important;\n    top: unset !important;\n}\n.mdw-gta6-banner:before{\n    opacity: 1;\n    transform: none;\n}\n.mdw-gta6-container:before{\n    opacity: 0 !important;\n}\nhtml.elementor-html .mdw-gta6-container:before,\n.mdw-gta6-container.svg-added:before{\n    opacity: 1 !important;\n}\nhtml:not(.elementor-html) .mdw-gta6-container,\nhtml:not(.elementor-html) .mdw-gta6-container > *{\n    pointer-events: auto;\n}\n.mdw-gta6-container > *{\n    z-index: 1;\n}\n.mdw-gta6-container svg,\n.mdw-gta6-container > .elementor-element,\n.mdw-gta6-heading-1,\n.mdw-gta6-heading-2{\n    opacity: 1 !important;\n}\n.mdw-gta6-container svg{\n    transform: none !important;\n}\n.mdw-gta6-heading-1 > *{\n    --gradient-heading-start: -70 !important;\n}\n}\n<\/style>\n<script src=\"https:\/\/code.jquery.com\/jquery-2.2.4.min.js\"><\/script>\n<script>\nif(!MDWNonce118){\nvar MDWNonce118 = true\n;(function($){\nvar selector = '.mdw-gta6-effect'\n$(document).ready(function(){\n$(selector).each(function(i){\n\nvar $this = $(this),\nreached = false,\nloaded = false\n\nfunction getCSS(el, prop, defaultVal = ''){\n    var css = getComputedStyle(el[0]).getPropertyValue(prop)\n    return css ? css.trim() : defaultVal\n}\n\nfunction setCSS(el, prop, val){\n    el[0].style.setProperty(prop, val)\n}\n\nfunction setHDBackground(){\n    var hdURL = getCSS($this, '--banner-hd-url')\n    if(hdURL){ $this.find('.mdw-gta6-banner').addClass('hd-bg') }\n}\n\nfunction entranceBanner(){\n    var image = new Image(),\n    banner = $this.find('.mdw-gta6-banner')[0],\n    bannerBefore = window.getComputedStyle(banner, '::before'),\n    bannerBg = bannerBefore.getPropertyValue('background-image'),\n    bannerBgURL = bannerBg.replace(\/^url\\([\"']?\/, '').replace(\/[\"']?\\)$\/, '')\n    \n    image.src = bannerBgURL\n    \n    image.onload = function(){\n        loaded = true\n        if(reached && loaded){ $this.find('.mdw-gta6-banner').addClass('loaded') }\n    }\n    if(image.complete){\n        image.onload()\n    }\n}\n\nfunction createSVG(){\n    var svgSrc = $this.find('.mdw-gta6-svg img').attr('src')\n    \n    fetch(svgSrc)\n    .then(function(res){\n        return res.text()\n    })\n    .then(function(svgText){\n        var parser = new DOMParser(),\n        doc = parser.parseFromString(svgText, 'image\/svg+xml'),\n        svg = doc.querySelector('svg'),\n        d = $(svg).find('path').attr('d'),\n        svgBackground = getCSS($this, '--svg-image-background', '#000'),\n        svgHTML = `<svg>\n            <defs>\n                <mask class=\"mdw-gta6-mask\" id=\"mdw-gta6-mask-${i+1}\">\n                    <rect width=\"100%\" height=\"100%\" fill=\"white\"><\/rect>\n                    <path fill-rule=\"evenodd\" fill=\"#000000\" d=\"${d}\"\/>\n                <\/mask>\n            <\/defs>\n            <rect width=\"100%\" height=\"100%\" fill=\"${svgBackground}\" mask=\"url(#mdw-gta6-mask-${i+1})\"><\/rect>\n        <\/svg>`\n        \n        $this.find('.mdw-gta6-container').prepend(svgHTML).addClass('svg-added')\n    })\n}\n\nfunction adjustElements(){\n    var svgNaturalWidth = $this.find('.mdw-gta6-svg img')[0].naturalWidth,\n    svgNaturalHeight = $this.find('.mdw-gta6-svg img')[0].naturalHeight,\n    svgHeight = parseFloat(getCSS($this, '--svg-image-height', 0)),\n    svgImageSize = svgHeight\/svgNaturalHeight,\n    svgBottomGap = parseFloat(getCSS($this, '--svg-image-bottom-gap', 0)),\n    topGap = ($this.find('.mdw-gta6-container').outerHeight() - svgHeight - $this.find('.mdw-gta6-text').outerHeight() - svgBottomGap)\/2\n    \n    setCSS($this, '--svg-image-size', svgImageSize)\n    setCSS($this.find('.mdw-gta6-container'), '--svg-image-natural-width', svgNaturalWidth + 'px')\n    setCSS($this.find('.mdw-gta6-container'), '--svg-image-top-gap', topGap+'px')\n}\nfunction init(){\n    setHDBackground()\n    entranceBanner()\n    createSVG()\n    adjustElements()\n}\n\nfunction mapRange(value, inMin, inMax, outMin, outMax){\n    return (value - inMin) * (outMax - outMin) \/ (inMax - inMin) + outMin\n}\n\nfunction limit(value, min, max){\n    return Math.max(min, Math.min(value, max))\n}\nfunction easing(value, power){\n    return 1 - Math.pow((1 - value), power)\n}\n\nfunction setSticky(){\n    var rect = $this[0].getBoundingClientRect(),\n    inner = $this.children(),\n    seenPercentage = 20\n    \n    rect.top <= 0 ? inner.addClass('sticky') : inner.removeClass('sticky')\n    rect.bottom < $(window).height() ? inner.addClass('sticky-end') : inner.removeClass('sticky-end')\n    \n    if(($(window).height() - rect.top)\/$(window).height() > seenPercentage\/100){\n        reached = true\n        if(reached && loaded){ $this.find('.mdw-gta6-banner').addClass('loaded') }\n    }\n}\n\nfunction scrollAnimation(){\n    var progress = ($(window).scrollTop() - $this.offset().top)\/($this.height()-$(window).height()),\n    bannerMaxZoom = parseFloat(getCSS($this, '--banner-maximum-zoom', 1)),\n    bannerZoom = bannerMaxZoom - (bannerMaxZoom - 1)*easing(limit(mapRange(progress, 0, 0.6, 0, 1), 0, 1), 3),\n    bannerValue = 1 - limit(mapRange(progress, 0, 0.3, 0, 1), 0, 1),\n    bannerContentTransform = 50,\n    overlayOpacity = easing(limit(mapRange(progress, 0.3, 0.6, 0, 1), 0, 1), 2),\n    svgOpacity = limit(mapRange(progress, 0, 0.3, 0, 1), 0, 1)\n    s = easing(limit(mapRange(progress, 0.3, 0.6, 0, 1), 0, 1), 4),\n    svgMaxZoom = parseFloat(getCSS($this, '--svg-image-maximum-zoom', 1)),\n    svgZoom = limit(mapRange(s, 0, 1, svgMaxZoom, 1), 1, svgMaxZoom)\n    heading1Gradient = limit(mapRange(progress, 0.6, 0.9, 100, -70), -70, 100),\n    heading1Opacity = limit(mapRange(progress, 0.6, 0.9, 0.3, 1), 0.3, 1),\n    heading2Opacity = limit(mapRange(progress, .7, 1, 0, 1), 0, 1)\n    \n    setCSS($this, '--banner-zoom', bannerZoom)\n    $this.find('.mdw-gta6-banner > *').css({\n        'opacity': bannerValue,\n        'transform': 'translateY(' + ((bannerValue-1)*bannerContentTransform) + 'px)'\n    })\n    setCSS($this.find('.mdw-gta6-container'), '--overlay-opacity-2', overlayOpacity)\n    $this.find('.mdw-gta6-container svg').css({\n        'transform': 'scale(' + svgZoom + ')',\n        'opacity': svgOpacity\n    })\n    if(progress >= .6){\n        $this.find('.mdw-gta6-container').addClass('clickable')\n    }else{\n        $this.find('.mdw-gta6-container').removeClass('clickable')\n    }\n    setCSS($this.find('.mdw-gta6-heading-1'), '--gradient-heading-start', heading1Gradient)\n    $this.find('.mdw-gta6-heading-1').css({'opacity': heading1Opacity})\n    $this.find('.mdw-gta6-heading-2').css({'opacity': heading2Opacity})\n}\n\ninit()\n$(window).on('load resize', adjustElements)\n$(window).on('load scroll resize', function(){\n    setSticky()\n    scrollAnimation()\n})\n})\n})\n})(jQuery)\n}\n<\/script>\n\n<!-- Lenis Smooth Scroll -->\n<style>\nhtml.lenis, html.lenis body {\n  height: auto;\n}\n.lenis.lenis-smooth {\n  scroll-behavior: auto !important;\n}\n.lenis.lenis-smooth [data-lenis-prevent] {\n  overscroll-behavior: contain;\n}\n.lenis.lenis-stopped {\n  overflow: hidden;\n}\n.lenis.lenis-smooth iframe {\n  pointer-events: none;\n}\n<\/style>\n<script src=\"https:\/\/unpkg.com\/lenis@1.1.11\/dist\/lenis.min.js\"><\/script> \n<script>\n$(document).ready(function(){\nvar lenis = new Lenis()\nfunction raf(time) {\n  lenis.raf(time)\n  requestAnimationFrame(raf)\n}\nrequestAnimationFrame(raf)\n})\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e686da3 e-con-full mdw-gta6-banner e-flex e-con e-child\" data-id=\"e686da3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0581267 elementor-widget elementor-widget-image\" data-id=\"0581267\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/unicloud.com.br\/projetosox\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"333\" height=\"533\" src=\"https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Logotipo.png\" class=\"attachment-large size-large wp-image-311\" alt=\"\" srcset=\"https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Logotipo.png 333w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Logotipo-187x300.png 187w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-758bed2 elementor-widget elementor-widget-text-editor\" data-id=\"758bed2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tSCROLL ROLE PARA BAIXO\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<header class=\"elementor-element elementor-element-f2d9110 e-con-full mdw-gta6-container  e-flex e-con e-child\" data-id=\"f2d9110\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b74ab06 mdw-gta6-svg elementor-widget elementor-widget-image\" data-id=\"b74ab06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"342\" src=\"https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Novo-Projeto.svg\" class=\"attachment-large size-large wp-image-343\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ddfd87 e-con-full mdw-gta6-text e-flex e-con e-child\" data-id=\"7ddfd87\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5232b33 mdw-gta6-heading-1 elementor-widget elementor-widget-heading\" data-id=\"5232b33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Cada card <br> \u00e9  um portal<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f328a7b mdw-gta6-heading-2 elementor-widget elementor-widget-heading\" data-id=\"f328a7b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Uma ponte entre o digital e o mundo real. E, para alguns, a chave que destrava recompensas nunca antes imaginadas.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/header>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d814d4f e-con-full stars-bg-container e-flex e-con e-parent\" data-id=\"d814d4f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0fad2ca elementor-widget elementor-widget-html\" data-id=\"0fad2ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"star-background-wrapper\"><\/div>\r\n<canvas id=\"starCanvas\"><\/canvas>\r\n\r\n<script>\r\n  (function(){\r\n    const container = document.querySelector('.stars-bg-container');\r\n    const wrapper = document.querySelector('.star-background-wrapper');\r\n    const canvas = document.getElementById('starCanvas');\r\n    if (!container || !wrapper || !canvas) {\r\n      console.error('Elemento faltando: container, wrapper ou canvas');\r\n      return;\r\n    }\r\n    const ctx = canvas.getContext('2d');\r\n    let stars = [];\r\n    const numStars = 80;\r\n    const starImage = new Image();\r\n    starImage.crossOrigin = \"anonymous\";\r\n    starImage.src = 'https:\/\/cineontv.com.br\/wp-content\/uploads\/2025\/10\/estrela-dourada-sobre-fundo-preto-o-efeito-de-brilho-e-raios-de-luz-brilhante-vetor-solar_267774-2450.avif';\r\n\r\n    starImage.onload = () => {\r\n      resizeCanvas();\r\n      createStars();\r\n      drawStars();\r\n    };\r\n    starImage.onerror = () => {\r\n      console.error('Erro ao carregar a imagem da estrela');\r\n    };\r\n\r\n    function resizeCanvas() {\r\n      \/\/ O wrapper deve ocupar o container inteiro\r\n      const rect = container.getBoundingClientRect();\r\n      \/\/ ajustar wrapper\r\n      wrapper.style.width = rect.width + 'px';\r\n      wrapper.style.height = rect.height + 'px';\r\n      \/\/ posicionar\r\n      wrapper.style.position = 'absolute';\r\n      wrapper.style.top = 0;\r\n      wrapper.style.left = 0;\r\n      wrapper.style.overflow = 'hidden';\r\n\r\n      canvas.width = rect.width;\r\n      canvas.height = rect.height;\r\n      canvas.style.position = 'absolute';\r\n      canvas.style.top = 0;\r\n      canvas.style.left = 0;\r\n    }\r\n\r\n    window.addEventListener('resize', () => {\r\n      resizeCanvas();\r\n      createStars();\r\n    });\r\n\r\n    function createStars() {\r\n      stars = [];\r\n      for (let i = 0; i < numStars; i++) {\r\n        stars.push({\r\n          x: Math.random() * canvas.width,\r\n          y: Math.random() * canvas.height,\r\n          size: Math.random() * 15 + 10,\r\n          alpha: Math.random() * 0.4 + 0.3,\r\n          delta: Math.random() * 0.01 + 0.003\r\n        });\r\n      }\r\n    }\r\n\r\n    function drawStars() {\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n      for (let star of stars) {\r\n        star.alpha += star.delta;\r\n        if (star.alpha >= 0.7 || star.alpha <= 0.3) {\r\n          star.delta = -star.delta;\r\n        }\r\n        ctx.globalAlpha = star.alpha;\r\n        ctx.drawImage(starImage, star.x, star.y, star.size, star.size);\r\n      }\r\n      ctx.globalAlpha = 1;\r\n      requestAnimationFrame(drawStars);\r\n    }\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef7e507 tittle-hedline elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"ef7e507\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">ESCOLHA SEU LADO\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c92d8e elementor-widget__width-initial textoAnimado elementor-widget elementor-widget-text-editor\" data-id=\"0c92d8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tCada card carrega o DNA de uma fam\u00edlia. Uma vis\u00e3o de mundo. Uma forma de vencer.\nDescubra agora qual delas fala a sua l\u00edngua.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac8ead3 elementor-widget elementor-widget-html\" data-id=\"ac8ead3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/split-type\"><\/script>\r\n\r\n<script>\r\n\r\n    gsap.registerPlugin(ScrollTrigger);\r\n    const splitTypes = document.querySelectorAll(\".textoAnimado\");\r\n\r\n    splitTypes.forEach((char, i) => {\r\n      const text = new SplitType(char, { types: \"chars\" });\r\n\r\n      gsap.from(text.chars, {\r\n        scrollTrigger: {\r\n          trigger: char,\r\n          start: \"top 90%\",\r\n          end: \"top 20%\",\r\n          scrub: 1,\r\n         \r\n        },\r\n        y: -10,\r\n        opacity:0,\r\n        stagger: 0.1,\r\n      });\r\n    });\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b026f0 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6b026f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Anima\u00e7\u00e3o de Cards com GSAP (Sequ\u00eancia de Scroll)<\/title>\r\n    <style>\r\n        body { \r\n            background-color: #1a1a1a; \r\n            margin: 0; \r\n            padding: 0; \r\n            font-family: sans-serif;\r\n            \/* Aumentado ainda mais para a longa anima\u00e7\u00e3o de scroll *\/\r\n            height: 400vh;\r\n        }\r\n\r\n        .scrolling-active .static-card {\r\n            pointer-events: none;\r\n        }\r\n        \r\n        \/* CSS permanece o mesmo da vers\u00e3o anterior *\/\r\n        .custom-cursor, .fan-layout-container, .static-card, .card-inner, .card-front, .card-back, .popup-backdrop, .popup-close-button, .reveal-mask-container, .reveal-image {\r\n            \/* Todas as regras de estilo anteriores s\u00e3o mantidas aqui *\/\r\n        }\r\n\r\n        .custom-cursor { position: fixed; top: 0; left: 0; width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%) scale(0); opacity: 0; will-change: transform; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }\r\n        .cursor-text { color: #ffffff; font-size: 12px; font-weight: bold; text-align: center; line-height: 1.2; }\r\n        .fan-layout-container { display: flex; justify-content: center; align-items: center; height: 100vh; position: relative; perspective: 2000px; padding: 100px 0; }\r\n        .static-card { position: absolute; width: 250px; height: 380px; cursor: pointer; will-change: transform; transform-style: preserve-3d; }\r\n        .card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }\r\n        .card-front, .card-back { position: absolute; width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); backface-visibility: hidden; -webkit-backface-visibility: hidden; background-size: cover; background-position: center center; border: 1px solid rgba(255, 255, 255, 0.2); }\r\n        .card-back { transform: rotateY(180deg); }\r\n        .card-1 { transform: translateX(-560px) translateY(180px) rotate(-52deg); z-index: 1; }\r\n        .card-2 { transform: translateX(-480px) translateY(130px) rotate(-44deg); z-index: 2; }\r\n        .card-3 { transform: translateX(-400px) translateY(85px) rotate(-36deg); z-index: 3; }\r\n        .card-4 { transform: translateX(-320px) translateY(45px) rotate(-28deg); z-index: 4; }\r\n        .card-5 { transform: translateX(-240px) translateY(15px) rotate(-20deg); z-index: 5; }\r\n        .card-6 { transform: translateX(-160px) translateY(-5px) rotate(-12deg); z-index: 6; }\r\n        .card-7 { transform: translateX(-80px) translateY(-20px) rotate(-4deg); z-index: 7; }\r\n        .card-8 { transform: translateX(80px) translateY(-20px) rotate(4deg); z-index: 8; }\r\n        .card-9 { transform: translateX(160px) translateY(-5px) rotate(12deg); z-index: 9; }\r\n        .card-10 { transform: translateX(240px) translateY(15px) rotate(20deg); z-index: 10; }\r\n        .card-11 { transform: translateX(320px) translateY(45px) rotate(28deg); z-index: 11; }\r\n        .card-12 { transform: translateX(400px) translateY(85px) rotate(36deg); z-index: 12; }\r\n        .card-13 { transform: translateX(480px) translateY(130px) rotate(44deg); z-index: 13; }\r\n        .card-14 { transform: translateX(560px) translateY(180px) rotate(52deg); z-index: 14; }\r\n        .card-1 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-2 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-3 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-4 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-5 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-6 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-7 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-8 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0000_Giga-Mind-Verso.png'); }\r\n        .card-9 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0002_Dark-Mode-Verso.png'); }\r\n        .card-10 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0004_Comic-Boom-Verso.png');}\r\n        .card-11 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0006_Fanaticos-Verso.png'); }\r\n        .card-12 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0009_Trends-Verso.png'); }\r\n        .card-13 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0011_Nefarius-verso.png');}\r\n        .card-14 .card-front { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/TEXAS-BOY-VERSO.jpg');}\r\n        \r\n        .card-1 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-2 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-3 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-4 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-5 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-6 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-7 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); }\r\n        .card-8 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0001_Giga-Mind-Frente.png'); }\r\n        .card-9 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0003_Dark-Mode-Frente.png'); }\r\n        .card-10 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0004_Comic-Boom-Verso.png'); }\r\n        .card-11 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0007_Texas-boy-Verso.png'); }\r\n        .card-12 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0010_Trends-Frente.png'); }\r\n        .card-13 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0012_Nefarius-Frente.png'); }\r\n        .card-14 .card-back { background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0008_Texas-boy-Frente.png'); }\r\n        .popup-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(26, 26, 26, 0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 99; opacity: 0; pointer-events: none; }\r\n        .popup-close-button { position: fixed; top: 30px; right: 30px; width: 40px; height: 40px; z-index: 101; cursor: pointer; opacity: 0; pointer-events: none; }\r\n        .popup-close-button::before, .popup-close-button::after { content: \"\"; position: absolute; top: 50%; left: 10%; width: 80%; height: 2px; background: white; border-radius: 2px; }\r\n        .popup-close-button::before { transform: rotate(45deg); }\r\n        .popup-close-button::after { transform: rotate(-45deg); }\r\n        body.card-popup-active { overflow: hidden; }\r\n        .reveal-mask-container { position: absolute; width: 250px; height: 380px; border-radius: 12px; z-index: 15; pointer-events: none; overflow: hidden; }\r\n        .reveal-image { width: 100%; height: 100%; background-image: url('https:\/\/cineontv.com.br\/projetocards\/wp-content\/uploads\/2025\/10\/Card_0013_DARK-PERSON-Q.png'); background-size: cover; background-position: center; opacity: 0; transform: translateY(100%); }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"custom-cursor\">\r\n        <div class=\"cursor-text\">Conhecer<br>Fam\u00edlia<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"fan-layout-container\">\r\n        <div class=\"static-card card-1\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-2\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-3\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-4\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-5\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-6\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-7\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-8\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-9\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-10\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-11\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-12\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-13\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n        <div class=\"static-card card-14\"><div class=\"card-inner\"><div class=\"card-front\"><\/div><div class=\"card-back\"><\/div><\/div><\/div>\r\n      \r\n        <div class=\"popup-backdrop\"><\/div>\r\n        \r\n        <div class=\"reveal-mask-container\">\r\n            <div class=\"reveal-image\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"popup-close-button\"><\/div>\r\n    \r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollToPlugin.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", function () {\r\n            gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);\r\n\r\n            const section = document.querySelector(\".fan-layout-container\");\r\n            const cards = document.querySelectorAll(\".static-card\");\r\n            const revealImage = document.querySelector(\".reveal-image\");\r\n            \/\/ Demais constantes...\r\n            const cardFronts = document.querySelectorAll(\".card-front\");\r\n            const backdrop = document.querySelector(\".popup-backdrop\");\r\n            const closeButton = document.querySelector(\".popup-close-button\");\r\n            const cursor = document.querySelector(\".custom-cursor\");\r\n\r\n\r\n            \/\/ --- NOVA L\u00d3GICA: TIMELINE MESTRE PARA A SEQU\u00caNCIA DE SCROLL ---\r\n\r\n            \/\/ Criamos a timeline principal que vai conter todas as 4 fases.\r\n            const masterTimeline = gsap.timeline();\r\n\r\n            \/\/ FASE 1: As cartas se juntam no centro.\r\n            \/\/ Adicionamos a anima\u00e7\u00e3o de cada carta \u00e0 timeline mestre, todas come\u00e7ando no tempo 0.\r\n            cards.forEach(card => {\r\n                masterTimeline.to(card, { \r\n                    x: 0, \r\n                    y: 0, \r\n                    rotation: 0, \r\n                    ease: \"power2.inOut\" \r\n                }, 0);\r\n            });\r\n\r\n            \/\/ FASE 2: Pausa\/Segura as cartas no centro.\r\n            \/\/ Adicionamos um \"espa\u00e7o vazio\" na timeline. Durante este tempo, o scroll avan\u00e7a, mas nada acontece.\r\n            masterTimeline.to({}, { duration: 1 }); \/\/ Dura\u00e7\u00e3o de 1 segundo (ajust\u00e1vel)\r\n\r\n            \/\/ FASE 3: A imagem final se revela.\r\n            \/\/ Esta anima\u00e7\u00e3o come\u00e7a DEPOIS da pausa.\r\n            masterTimeline.to(revealImage, { \r\n                opacity: 1, \r\n                y: 0, \r\n                ease: \"power2.out\" \r\n            });\r\n\r\n            \/\/ FASE 4: Pausa\/Segura a imagem revelada no centro.\r\n            \/\/ Adicionamos outro \"espa\u00e7o vazio\" para manter a imagem final no centro enquanto o usu\u00e1rio rola.\r\n            masterTimeline.to({}, { duration: 1 }); \/\/ Dura\u00e7\u00e3o de 1 segundo (ajust\u00e1vel)\r\n\r\n            \/\/ O ScrollTrigger agora controla a masterTimeline\r\n            ScrollTrigger.create({\r\n                animation: masterTimeline,\r\n                trigger: section,\r\n                start: \"top -10%\",\r\n                \/\/ Aumentamos o 'end' para dar espa\u00e7o de scroll para todas as 4 fases\r\n                end: \"+=250%\",\r\n                scrub: 1,\r\n                pin: true,\r\n                anticipatePin: 1,\r\n                onEnter: () => section.classList.add(\"scrolling-active\"),\r\n                onLeaveBack: () => section.classList.remove(\"scrolling-active\"),\r\n            });\r\n\r\n\r\n            \/\/ --- L\u00d3GICA DE CLIQUE E HOVER (sem altera\u00e7\u00f5es) ---\r\n            \r\n            let isCardActive = false;\r\n            let activeCard = null;\r\n\r\n            window.addEventListener('mousemove', e => {\r\n                gsap.to(cursor, { duration: 0.3, x: e.clientX, y: e.clientY, ease: \"power2.out\" });\r\n            });\r\n\r\n            function runOpenAnimation(card) {\r\n                if (isCardActive) return;\r\n                gsap.to(cursor, { scale: 0, opacity: 0, duration: 0.3 });\r\n                const otherCardsFronts = Array.from(cardFronts).filter(front => front !== card.querySelector('.card-front'));\r\n                const cardInner = card.querySelector(\".card-inner\");\r\n                const originalZIndex = gsap.getProperty(card, \"zIndex\");\r\n                const originalY = gsap.getProperty(card, \"y\");\r\n                \r\n                card.timeline = gsap.timeline({\r\n                    onStart: () => {\r\n                        isCardActive = true;\r\n                        activeCard = card;\r\n                        document.body.classList.add('card-popup-active');\r\n                        gsap.set(section, { zIndex: 100 });\r\n                        gsap.set(revealImage, { opacity: 0, y: \"100%\" }); \r\n                    },\r\n                    onReverseComplete: () => {\r\n                        isCardActive = false;\r\n                        activeCard = null;\r\n                        card.timeline = null;\r\n                        gsap.set(card, { zIndex: originalZIndex });\r\n                        document.body.classList.remove('card-popup-active');\r\n                        gsap.set(section, { clearProps: \"zIndex\" });\r\n                        \r\n                        \/\/ Invalida a masterTimeline para garantir que ela releia o estado correto das cartas\r\n                        masterTimeline.invalidate();\r\n                    }\r\n                });\r\n                \r\n                gsap.set(card, { y: originalY }); \r\n                \r\n                card.timeline\r\n                    .to(otherCardsFronts, { filter: \"grayscale(100%)\", duration: 0.5 })\r\n                    .to(backdrop, { opacity: 1, duration: 0.7 }, \"<\")\r\n                    .to(closeButton, { opacity: 1, pointerEvents: 'auto', duration: 0.5 }, \"<\")\r\n                    .to(card, { \r\n                        x: 0, y: 0, rotation: 0, scale: 1.2, \r\n                        zIndex: 100, duration: 0.7, ease: \"power3.inOut\" \r\n                    }, \"<\")\r\n                    .to(cardInner, { rotationY: 180, duration: 0.7, ease: \"power3.inOut\" });\r\n            }\r\n\r\n            cards.forEach((card, index) => {\r\n                const originalY = gsap.getProperty(card, \"y\");\r\n                const cardFaces = card.querySelectorAll('.card-front, .card-back'); \r\n                card.timeline = null;\r\n\r\n                card.addEventListener(\"mouseenter\", () => {\r\n                    if (isCardActive) return;\r\n                    gsap.to(cursor, { scale: 1, opacity: 1, duration: 0.3, ease: \"power2.out\" });\r\n                    gsap.to(card, { y: originalY - 50, duration: 0.3, ease: \"power2.out\" });\r\n                    const currentFront = card.querySelector('.card-front');\r\n                    const otherFronts = Array.from(cardFronts).filter(front => front !== currentFront);\r\n                    gsap.to(currentFront, { filter: \"grayscale(0%)\", duration: 0.3 });\r\n                    gsap.to(otherFronts, { filter: \"grayscale(100%)\", duration: 0.3 });\r\n\r\n                    gsap.to(cardFaces, {\r\n                        boxShadow: \"0 6px 20px rgba(0,0,0,0.35), 0 0 25px rgba(226, 182, 66, 0.2)\",\r\n                        duration: 0.4,\r\n                        ease: \"power2.out\"\r\n                    });\r\n                });\r\n\r\n                card.addEventListener(\"mouseleave\", () => {\r\n                    if (isCardActive) return;\r\n                    gsap.to(cursor, { scale: 0, opacity: 0, duration: 0.3, ease: \"power2.out\" });\r\n                    gsap.to(card, { y: originalY, duration: 0.3, ease: \"power2.out\" });\r\n                    gsap.to(cardFronts, { filter: \"grayscale(0%)\", duration: 0.3 });\r\n\r\n                    gsap.to(cardFaces, {\r\n                        boxShadow: \"0 4px 15px rgba(0,0,0,0.3)\",\r\n                        duration: 0.4,\r\n                        ease: \"power2.out\"\r\n                    });\r\n                });\r\n\r\n                card.addEventListener(\"click\", () => {\r\n                    if (isCardActive && activeCard === card) {\r\n                        if (card.timeline) card.timeline.reverse();\r\n                        return;\r\n                    }\r\n                    if (isCardActive && activeCard !== card) return;\r\n                    gsap.to(window, {\r\n                        duration: 1,\r\n                        scrollTo: { y: section, offsetY: (window.innerHeight - section.offsetHeight) \/ 2 },\r\n                        ease: \"power2.inOut\",\r\n                        onComplete: () => runOpenAnimation(card)\r\n                    });\r\n                });\r\n            });\r\n            \r\n            closeButton.addEventListener(\"click\", () => {\r\n                if (activeCard && activeCard.timeline) activeCard.timeline.reverse();\r\n            });\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b6ddae e-flex e-con-boxed e-con e-child\" data-id=\"1b6ddae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48ac887 elementor-widget__width-initial tittle-hedline elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"48ac887\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">DA ABERTURA AO PR\u00caMIO: ENTENDA A JORNADA<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fcb2cd3 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"fcb2cd3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09f653b elementor-widget__width-initial textoAnimado2 elementor-widget elementor-widget-text-editor\" data-id=\"09f653b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Cada pacote traz 5 cards e um deles esconde uma numera\u00e7\u00e3o \u00fanica que abre caminho para pr\u00eamios, convites e experi\u00eancias exclusivas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12f9560 elementor-widget elementor-widget-html\" data-id=\"12f9560\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/split-type\"><\/script>\r\n\r\n<script>\r\n\r\n    gsap.registerPlugin(ScrollTrigger);\r\n    const splitTypes = document.querySelectorAll(\".textoAnimado2\");\r\n\r\n    splitTypes.forEach((char, i) => {\r\n      const text = new SplitType(char, { types: \"chars\" });\r\n\r\n      gsap.from(text.chars, {\r\n        scrollTrigger: {\r\n          trigger: char,\r\n          start: \"top 90%\",\r\n          end: \"top 20%\",\r\n          scrub: 1,\r\n         \r\n        },\r\n        y: -10,\r\n        opacity:0,\r\n        stagger: 0.1,\r\n      });\r\n    });\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3244a9d elementor-widget elementor-widget-spacer\" data-id=\"3244a9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e3a65fa e-flex e-con-boxed e-con e-child\" data-id=\"e3a65fa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04d5267 elementor-widget__width-initial tittle-hedline elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"04d5267\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">PR\u00caMIOS, CONVITES E AS MELHORES EXPERI\u00caNCIAS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fcc7cc elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"1fcc7cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f398cc2 elementor-widget__width-initial textoAnimado2 elementor-widget elementor-widget-text-editor\" data-id=\"f398cc2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Por tr\u00e1s de cada edi\u00e7\u00e3o, de cada card premiado, existem portas que se abrem para momentos que poucos j\u00e1 viveram e muitos sonham em viver.<br \/><br \/>Pr\u00eamios inesquec\u00edveis, encontros com pessoas importantes e ativa\u00e7\u00f5es criadas junto a grandes marcas parceiras que v\u00e3o muito al\u00e9m do que o dinheiro pode comprar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba4e349 elementor-widget elementor-widget-html\" data-id=\"ba4e349\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/split-type\"><\/script>\r\n\r\n<script>\r\n\r\n    gsap.registerPlugin(ScrollTrigger);\r\n    const splitTypes = document.querySelectorAll(\".textoAnimado2\");\r\n\r\n    splitTypes.forEach((char, i) => {\r\n      const text = new SplitType(char, { types: \"chars\" });\r\n\r\n      gsap.from(text.chars, {\r\n        scrollTrigger: {\r\n          trigger: char,\r\n          start: \"top 90%\",\r\n          end: \"top 20%\",\r\n          scrub: 1,\r\n         \r\n        },\r\n        y: -10,\r\n        opacity:0,\r\n        stagger: 0.1,\r\n      });\r\n    });\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-735aa47 elementor-align-center button2 elementor-widget elementor-widget-button\" data-id=\"735aa47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Quero ser um Card<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b016a0c reveal-bg  e-flex e-con-boxed e-con e-parent\" data-id=\"b016a0c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3637a03 e-con-full e-flex e-con e-child\" data-id=\"3637a03\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22d02b4 elementor-widget__width-initial tittle-hedline elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"22d02b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">O MOVIMENTO J\u00c1 COME\u00c7OU<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8922833 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8922833\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37ad236 elementor-widget__width-initial textoAnimado2 elementor-widget elementor-widget-text-editor\" data-id=\"37ad236\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Cada pacote traz 5 cards e um deles esconde uma numera\u00e7\u00e3o \u00fanica que abre caminho para pr\u00eamios, convites e experi\u00eancias exclusivas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c80327a elementor-align-center button elementor-widget elementor-widget-button\" data-id=\"c80327a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Seja um Card<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07b8cc7 elementor-widget elementor-widget-html\" data-id=\"07b8cc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\n  const container = document.querySelector('.reveal-bg');\r\n  const overlay = container.querySelector('.overlay');\r\n\r\n  container.addEventListener('mousemove', (e) => {\r\n    const rect = container.getBoundingClientRect();\r\n    const x = e.clientX - rect.left;\r\n    const y = e.clientY - rect.top;\r\n    overlay.style.maskImage = `radial-gradient(circle 120px at ${x}px ${y}px, transparent 99%, black 100%)`;\r\n    overlay.style.webkitMaskImage = `radial-gradient(circle 120px at ${x}px ${y}px, transparent 99%, black 100%)`;\r\n  });\r\n\r\n  container.addEventListener('mouseleave', () => {\r\n    overlay.style.maskImage = `radial-gradient(circle 0px at center, transparent 99%, black 100%)`;\r\n    overlay.style.webkitMaskImage = `radial-gradient(circle 0px at center, transparent 99%, black 100%)`;\r\n  });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca9229b e-con-full e-flex e-con e-child\" data-id=\"ca9229b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0e26cd8 e-con-full cardp e-flex e-con e-child\" data-id=\"0e26cd8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-562e5d2 e-con-full e-flex e-con e-child\" data-id=\"562e5d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a2c8e0 cover-image elementor-widget elementor-widget-image\" data-id=\"5a2c8e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"731\" height=\"1024\" src=\"https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-731x1024.png\" class=\"attachment-large size-large wp-image-659\" alt=\"\" srcset=\"https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-731x1024.png 731w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-214x300.png 214w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-768x1076.png 768w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-1097x1536.png 1097w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-1462x2048.png 1462w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius.png 1476w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c7c20a character elementor-widget elementor-widget-image\" data-id=\"5c7c20a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"731\" height=\"1024\" src=\"https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-731x1024.png\" class=\"attachment-large size-large wp-image-659\" alt=\"\" srcset=\"https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-731x1024.png 731w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-214x300.png 214w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-768x1076.png 768w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-1097x1536.png 1097w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius-1462x2048.png 1462w, https:\/\/unicloud.com.br\/projetosox\/wp-content\/uploads\/2025\/10\/Rapaz-Nefarius.png 1476w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73ba7aa e-flex e-con-boxed e-con e-parent\" data-id=\"73ba7aa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0fa7c44 cursor-flashlight e-flex e-con-boxed e-con e-parent\" data-id=\"0fa7c44\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-bc8f0e0 e-flex e-con-boxed e-con e-child\" data-id=\"bc8f0e0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-35cdf90 e-con-full e-flex e-con e-child\" data-id=\"35cdf90\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ef1330 elementor-widget__width-auto elementor-widget-tablet__width-auto textoAnimado elementor-widget elementor-widget-heading\" data-id=\"0ef1330\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Acompanhe nossas redes sociais<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-019cfc7 e-con-full e-flex e-con e-child\" data-id=\"019cfc7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9820cf2 elementor-widget__width-auto elementor-widget-tablet__width-auto textoAnimado elementor-widget elementor-widget-heading\" data-id=\"9820cf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Acompanhe nossas redes sociais<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SCROLL ROLE PARA BAIXO Cada card \u00e9 um portal Uma ponte entre o digital e o mundo real. E, para alguns, a chave que destrava recompensas nunca antes imaginadas. ESCOLHA SEU LADO Cada card carrega o DNA de uma fam\u00edlia. Uma vis\u00e3o de mundo. Uma forma de vencer. Descubra agora qual delas fala a sua [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-312","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/pages\/312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":355,"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/pages\/312\/revisions"}],"predecessor-version":[{"id":2487,"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/pages\/312\/revisions\/2487"}],"wp:attachment":[{"href":"https:\/\/unicloud.com.br\/projetosox\/wp-json\/wp\/v2\/media?parent=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}