[CADA FACE DO BLOCO POSSUI CAPACIDADE DE INSERIR 1 LINK E UMA IMAGEM INDICADO NO CÓDIGO]
____________________________________________________________________________________
<div class="wp-interactive-physics-container">
<div class="stage-3d">
<div class="wall wall-back"></div>
<div class="wall wall-left"></div>
<div class="wall wall-right"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
</div>
<canvas id="physics-canvas"></canvas>
<div id="3d-box" class="cube">
<div class="face front" data-axis="front">
<a href="https://seu-link-1.com" target="_self">
<img src="https://picsum.photos/300/300?random=1" alt="Face Frontal">
</a>
</div>
<div class="face back" data-axis="back">
<a href="https://seu-link-2.com" target="_self">
<img src="https://picsum.photos/300/300?random=2" alt="Face Traseira">
</a>
</div>
<div class="face left" data-axis="left">
<a href="https://seu-link-3.com" target="_self">
<img src="https://picsum.photos/300/300?random=3" alt="Face Esquerda">
</a>
</div>
<div class="face right" data-axis="right">
<a href="https://seu-link-4.com" target="_self">
<img src="https://picsum.photos/300/300?random=4" alt="Face Direita">
</a>
</div>
<div class="face top" data-axis="top">
<a href="https://seu-link-5.com" target="_self">
<img src="https://picsum.photos/300/300?random=5" alt="Face Superior">
</a>
</div>
<div class="face bottom" data-axis="bottom">
<a href="https://seu-link-6.com" target="_self">
<img src="https://picsum.photos/300/300?random=6" alt="Face Inferior">
</a>
</div>
</div>
</div>
<style>
/* --- AMBIENTE E RESET GLOBAL --- */
.wp-interactive-physics-container {
position: relative;
width: 100%;
height: 65vh;
min-height: 500px;
background: #050505;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
perspective: 1000px;
}
.wp-interactive-physics-container * {
box-sizing: border-box;
}
#physics-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0;
}
/* --- PROFUNDIDADE TRIDIMENSIONAL DO CENÁRIO --- */
.wp-interactive-physics-container .stage-3d {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateZ(-300px);
pointer-events: none;
transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
/* Classe disparada no zoom para sumir com o fundo */
.wp-interactive-physics-container.zooming .stage-3d {
transform: translateZ(-1500px);
opacity: 0;
}
.wp-interactive-physics-container .wall {
position: absolute;
background: #111111;
border: 2px solid rgba(0, 255, 0, 0.08);
}
.wp-interactive-physics-container .wall-back {
width: 100%; height: 100%;
top: 0; left: 0;
background-image: radial-gradient(rgba(0, 255, 0, 0.15) 1px, transparent 0);
background-size: 40px 40px;
transform: translateZ(-300px);
}
.wp-interactive-physics-container .wall-left {
width: 600px; height: 100%;
top: 0; left: 0;
transform: rotateY(90deg) translateZ(-300px);
background: linear-gradient(90deg, #0a0a0a, #151515);
}
.wp-interactive-physics-container .wall-right {
width: 600px; height: 100%;
top: 0; right: 0;
transform: rotateY(-90deg) translateZ(-300px);
background: linear-gradient(-90deg, #0a0a0a, #151515);
}
.wp-interactive-physics-container .wall-top {
width: 100%; height: 600px;
top: 0; left: 0;
transform: rotateX(-90deg) translateZ(-300px);
background: linear-gradient(180deg, #0a0a0a, #151515);
}
.wp-interactive-physics-container .wall-bottom {
width: 100%; height: 600px;
bottom: 0; left: 0;
transform: rotateX(90deg) translateZ(-300px);
background: linear-gradient(0deg, #0a0a0a, #151515);
border-top: 4px solid rgba(0, 255, 0, 0.2);
}
/* --- O CUBO REAL EM 3D --- */
.wp-interactive-physics-container .cube {
position: absolute;
width: 140px;
height: 140px;
transform-style: preserve-3d;
z-index: 10;
will-change: transform;
pointer-events: auto;
cursor: grab;
}
/* Remove transições normais durante a física, exceto quando o teletransporte é ativado */
.wp-interactive-physics-container .cube.warp-speed {
transition: transform 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) !important;
cursor: default;
}
.wp-interactive-physics-container .cube:active {
cursor: grabbing;
}
/* --- FACES DO CUBO --- */
.wp-interactive-physics-container .face {
position: absolute;
width: 140px;
height: 140px;
background: rgba(0, 0, 0, 0.9);
border: 3px solid #00FF00;
box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.4), 0 0 25px rgba(0, 255, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
backface-visibility: visible;
}
.wp-interactive-physics-container .cube:hover .face {
border-color: #55ff55;
box-shadow: inset 0 0 25px rgba(0, 255, 0, 0.6), 0 0 35px rgba(0, 255, 0, 0.8);
}
.wp-interactive-physics-container .face a {
display: block;
width: 100%;
height: 100%;
padding: 6px;
pointer-events: auto;
}
.wp-interactive-physics-container .face img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
filter: grayscale(20%);
pointer-events: none;
transition: transform 0.3s ease, filter 0.3s;
}
.wp-interactive-physics-container .face:hover img {
transform: scale(1.08);
filter: grayscale(0%);
}
.wp-interactive-physics-container .front { transform: rotateY(0deg) translateZ(70px); }
.wp-interactive-physics-container .back { transform: rotateY(180deg) translateZ(70px); }
.wp-interactive-physics-container .right { transform: rotateY(90deg) translateZ(70px); }
.wp-interactive-physics-container .left { transform: rotateY(-90deg) translateZ(70px); }
.wp-interactive-physics-container .top { transform: rotateX(90deg) translateZ(70px); }
.wp-interactive-physics-container .bottom { transform: rotateX(-90deg) translateZ(70px); }
@media (max-width: 600px) {
.wp-interactive-physics-container .cube { width: 110px; height: 110px; }
.wp-interactive-physics-container .face { width: 110px; height: 110px; }
.wp-interactive-physics-container .front { transform: rotateY(0deg) translateZ(55px); }
.wp-interactive-physics-container .back { transform: rotateY(180deg) translateZ(55px); }
.wp-interactive-physics-container .right { transform: rotateY(90deg) translateZ(55px); }
.wp-interactive-physics-container .left { transform: rotateY(-90deg) translateZ(55px); }
.wp-interactive-physics-container .top { transform: rotateX(90deg) translateZ(55px); }
.wp-interactive-physics-container .bottom { transform: rotateX(-90deg) translateZ(55px); }
}
</style>
<script>
(function() {
function loadMatter(callback) {
if (window.Matter) { callback(); return; }
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js';
script.async = true;
script.onload = callback;
document.head.appendChild(script);
}
loadMatter(() => {
const { Engine, Runner, Bodies, Composite, Mouse, MouseConstraint, Constraint, Events } = Matter;
const container = document.querySelector('.wp-interactive-physics-container');
const canvas = document.getElementById('physics-canvas');
const domBox = document.getElementById('3d-box');
let width = container.clientWidth;
let height = container.clientHeight;
let isMobile = width < 600;
let boxSize = isMobile ? 110 : 140;
const engine = Engine.create({ gravity: { x: 0, y: 0 } });
const world = engine.world;
const runner = Runner.create();
Runner.run(runner, engine);
let gap = 60;
let ground = Bodies.rectangle(width / 2, height - 20 + gap/2, width, gap, { isStatic: true });
let ceiling = Bodies.rectangle(width / 2, 20 - gap/2, width, gap, { isStatic: true });
let leftWall = Bodies.rectangle(20 - gap/2, height / 2, gap, height, { isStatic: true });
let rightWall = Bodies.rectangle(width - 20 + gap/2, height / 2, gap, height, { isStatic: true });
let boxBody = Bodies.rectangle(width / 2, height / 2, boxSize, boxSize, {
restitution: 0.7,
frictionAir: 0.015
});
let centralAnchor = Constraint.create({
pointA: { x: width / 2, y: height / 2 },
bodyB: boxBody,
pointB: { x: 0, y: 0 },
stiffness: 0.012,
damping: 0.06
});
Composite.add(world, [ground, ceiling, leftWall, rightWall, boxBody, centralAnchor]);
const mouse = Mouse.create(container);
const mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: { stiffness: 0.12, render: { visible: false } }
});
Composite.add(world, mouseConstraint);
mouseConstraint.mouse.element.removeEventListener("mousewheel", mouseConstraint.mouse.mousewheel);
mouseConstraint.mouse.element.removeEventListener("DOMMouseScroll", mouseConstraint.mouse.mousewheel);
let rotX = 25;
let rotY = -35;
let rotZ = 0;
let velRotX = 0.4;
let velRotY = 0.5;
let isDragging = false;
let isWarping = false; // Bloqueia a física ao iniciar animação de imersão
let lastMouseX = 0;
let lastMouseY = 0;
// Executa o cálculo matemático para alinhar a face perfeitamente à tela antes do zoom
function executeWarpAnimation(axis, targetUrl) {
isWarping = true;
container.classList.add('zooming');
domBox.classList.add('warp-speed');
// Congela o motor de física do Matter.js
boxBody.isStatic = true;
// Define os ângulos exatos para trazer a respectiva face para frente
switch(axis) {
case 'front': rotX = 0; rotY = 0; break;
case 'back': rotX = 0; rotY = 180; break;
case 'left': rotX = 0; rotY = 90; break;
case 'right': rotX = 0; rotY = -90; break;
case 'top': rotX = -90; rotY = 0; break;
case 'bottom': rotX = 90; rotY = 0; break;
}
rotZ = 0;
// Coordenadas centrais do viewport do container
const centerX = width / 2 - boxSize / 2;
const centerY = height / 2 - boxSize / 2;
// Aplica a transformação de imersão contínua (Move para o centro, ajusta rotação e explode o tamanho no Z)
domBox.style.transform = `translate3d(${centerX}px, ${centerY}px, 800px) scale3d(8, 8, 8) rotateX(${rotX}deg) rotateY(${rotY}deg) rotateZ(${rotZ}deg)`;
// Redireciona na mesma janela após o término do efeito visual
setTimeout(() => {
window.location.href = targetUrl;
}, 550);
}
// Intercepta e gerencia os cliques (computador e celular)
const faces = document.querySelectorAll('.wp-interactive-physics-container .face');
faces.forEach(faceElement => {
const faceLink = faceElement.querySelector('a');
let startX = 0, startY = 0;
// Previne o redirecionamento imediato padrão do link <a>
faceLink.addEventListener('click', (e) => e.preventDefault());
faceElement.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
}, { passive: true });
faceElement.addEventListener('touchend', (e) => {
if (isWarping) return;
let endX = e.changedTouches[0].clientX;
let endY = e.changedTouches[0].clientY;
let distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
if (distance < 6) {
executeWarpAnimation(faceElement.getAttribute('data-axis'), faceLink.getAttribute('href'));
}
});
faceElement.addEventListener('mousedown', (e) => {
startX = e.clientX;
startY = e.clientY;
});
faceElement.addEventListener('mouseup', (e) => {
if (isWarping) return;
let distance = Math.sqrt(Math.pow(e.clientX - startX, 2) + Math.pow(e.clientY - startY, 2));
if (distance < 6) {
executeWarpAnimation(faceElement.getAttribute('data-axis'), faceLink.getAttribute('href'));
}
});
});
// Controles normais de arraste inercial
container.addEventListener('mousedown', (e) => {
if (isWarping) return;
isDragging = true;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
container.addEventListener('touchstart', (e) => {
if (isWarping || e.touches.length === 0) return;
isDragging = true;
lastMouseX = e.touches[0].clientX;
lastMouseY = e.touches[0].clientY;
}, {passive: true});
window.addEventListener('mousemove', (e) => {
if (!isDragging || isWarping) return;
let deltaX = e.clientX - lastMouseX;
let deltaY = e.clientY - lastMouseY;
velRotY += deltaX * 0.15;
velRotX -= deltaY * 0.15;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
window.addEventListener('touchmove', (e) => {
if (!isDragging || isWarping || e.touches.length === 0) return;
let deltaX = e.touches[0].clientX - lastMouseX;
let deltaY = e.touches[0].clientY - lastMouseY;
velRotY += deltaX * 0.2;
velRotX -= deltaY * 0.2;
lastMouseX = e.touches[0].clientX;
lastMouseY = e.touches[0].clientY;
}, {passive: true});
window.addEventListener('mouseup', () => { isDragging = false; });
window.addEventListener('touchend', () => { isDragging = false; });
// Sincronização contínua com a Física (SÓ FUNCIONA SE NÃO ESTIVER EM TELETRANSPORTE)
Events.on(engine, 'afterUpdate', () => {
if (isWarping) return;
const pos = boxBody.position;
rotZ = boxBody.angle * (180 / Math.PI);
rotX += velRotX;
rotY += velRotY;
if (!isDragging) {
velRotX *= 0.95;
velRotY *= 0.95;
} else {
velRotX *= 0.6;
velRotY *= 0.6;
}
domBox.style.transform = `translate3d(${pos.x - boxSize/2}px, ${pos.y - boxSize/2}px, 50px) rotateX(${rotX}deg) rotateY(${rotY}deg) rotateZ(${rotZ}deg)`;
});
window.addEventListener('resize', () => {
if (isWarping) return;
width = container.clientWidth;
height = container.clientHeight;
isMobile = width < 600;
boxSize = isMobile ? 110 : 140;
centralAnchor.pointA = { x: width / 2, y: height / 2 };
Matter.Body.setPosition(ground, { x: width / 2, y: height - 20 + gap/2 });
Matter.Body.setPosition(ceiling, { x: width / 2, y: 20 - gap/2 });
Matter.Body.setPosition(leftWall, { x: 20 - gap/2, y: height / 2 });
Matter.Body.setPosition(rightWall, { x: width - 20 + gap/2, y: height / 2 });
});
});
})();
</script>[POSSUEM INDICATIVOS DE LINK, IMAGEM DE CAPA E IMAGEM DA CAPA DO VERSO]
[COPIAR E COLAR O CÓDIGO ABAIXO NO EDITOR DE BLOCOS]
___________________________________________________________________________
<!-- Bloco de Código do Livro 3D -->
<div class="meu-livro-3d-componente">
<!-- CONFIGURAÇÕES DE LINKS E IMAGENS (Altere aqui) -->
<a href="URL_DO_SEU_PDF_OU_LINK" class="book-link-u">
<div class="book-container-u">
<div class="book-3d-u">
<!-- Imagem da Frente -->
<div class="side-u front-u" style="background-image: url('URL_DA_IMAGEM_DA_FRENTE');"></div>
<!-- Imagem do Verso -->
<div class="side-u back-u" style="background-image: url('URL_DA_IMAGEM_DO_VERSO');"></div>
<!-- Texto da Lombada -->
<div class="spine-u"><span class="spine-text-u">NOME DO LIVRO</span></div>
<div class="page-edge-u edge-front-u"></div>
<div class="page-edge-u edge-top-u"></div>
<div class="page-edge-u edge-right-u"></div>
</div>
</div>
</a>
<!-- ESTILOS EXCLUSIVOS (Não causam conflito com a página) -->
<style>
.meu-livro-3d-componente {
width: 100%; max-width: 300px; height: 350px;
display: flex; justify-content: center; align-items: center;
background: #000; contain: layout style; overflow: hidden;
touch-action: none; user-select: none; margin: 20px auto; border-radius: 8px;
}
.book-link-u { display: block; text-decoration: none; width: 150px; height: 220px; filter: drop-shadow(0 0 20px rgba(57, 255, 20, 0.2)); transform-style: preserve-3d; position: relative; }
.book-container-u { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: float-u 6s ease-in-out infinite; }
.book-3d-u { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(-5deg) rotateY(45deg); cursor: grab; }
.side-u { position: absolute; width: 100%; height: 100%; border: 1px solid #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat; backface-visibility: hidden; }
.front-u { transform: translateZ(20px); }
.back-u { transform: translateZ(-20px) rotateY(180deg); }
.spine-u { position: absolute; left: 0; width: 40px; height: 100%; background: #050505; transform: rotateY(-90deg) translateZ(20px); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 15px rgba(57, 255, 20, 0.3); }
.spine-text-u { color: #39ff14; font-family: sans-serif; font-weight: bold; font-size: 12px; text-transform: uppercase; writing-mode: vertical-rl; text-shadow: 0 0 10px #39ff14; }
.page-edge-u { position: absolute; background: #eee; }
.edge-front-u { width: 100%; height: 40px; bottom: -40px; transform: rotateX(90deg) translateZ(20px); }
.edge-top-u { width: 100%; height: 40px; top: -40px; transform: rotateX(-90deg) translateZ(20px); }
.edge-right-u { width: 40px; height: 100%; right: -40px; transform: rotateY(-90deg) translateZ(20px); }
@keyframes float-u { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } }
</style>
<!-- SCRIPT AUTO-EXECUTÁVEL (Isola este livro dos outros) -->
<script>
(() => {
// Captura apenas os elementos DESTE bloco de código específico
const scripts = document.getElementsByTagName('script');
const esteScript = scripts[scripts.length - 1];
const wrapper = esteScript.parentElement;
const book = wrapper.querySelector('.book-3d-u');
const link = wrapper.querySelector('.book-link-u');
let isRotating = false, rotX = 0, rotY = 45, lastX, lastY, moved = false;
wrapper.addEventListener('pointerdown', (e) => {
isRotating = true; moved = false;
lastX = e.clientX; lastY = e.clientY;
});
window.addEventListener('pointermove', (e) => {
if (!isRotating) return;
moved = true;
rotY += (e.clientX - lastX) * 0.5;
rotX -= (e.clientY - lastY) * 0.5;
rotX = Math.max(-90, Math.min(90, rotX));
book.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
lastX = e.clientX; lastY = e.clientY;
});
window.addEventListener('pointerup', () => isRotating = false);
link.addEventListener('click', (e) => { if (moved) e.preventDefault(); });
})();
</script>
</div>
<!-- Fim do Bloco do Livro 3D -->
[POSSUEM INDICATIVOS DE LINK, E IMAGEM INDIVIDUAL PARA CADA CARD]
[COPIAR E COLAR O CÓDIGO ABAIXO NO EDITOR DE BLOCOS]
___________________________________________________________________________
<div class="wp-custom-carousel-container">
<div class="neon-banner-wrapper">
<div class="neon-slider" id="neonSlider" style="--quantity: 10; --rotateY: 0deg;">
<div class="neon-item" style="--position: 1;">
<a href="https://reinodascoisas.com/codigos/">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/codigo-card-laranja.webp" alt="Slider 1">
</a>
</div>
<div class="neon-item" style="--position: 2;">
<a href="https://reinodascoisas.com/noticias/" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/IMAGENS-9.png" alt="Slider 2">
</a>
</div>
<div class="neon-item" style="--position: 3;">
<a href="https://reinodascoisas.com/sites" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/sites-card-verde.webp" alt="Slider 3">
</a>
</div>
<div class="neon-item" style="--position: 4;">
<a href="reinodascoisas.com/ia" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/ia-card-verde-claro.webp" alt="Slider 4">
</a>
</div>
<div class="neon-item" style="--position: 5;">
<a href="https://reinodascoisas.com/textos/" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/texto-card-azul-claro.webp" alt="Slider 5">
</a>
</div>
<div class="neon-item" style="--position: 6;">
<a href="imagens" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/imagens-card-azul-claro.webp" alt="Slider 6">
</a>
</div>
<div class="neon-item" style="--position: 7;">
<a href="reinodascoisas.com/musicas" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/musica-card-azul.webp" alt="Slider 7">
</a>
</div>
<div class="neon-item" style="--position: 8;">
<a href="reinodascoisas.com/videos" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/Videos-card-vermelho-claro.webp" alt="Slider 8">
</a>
</div>
<div class="neon-item" style="--position: 9;">
<a href="https://reinodascoisas.com/membros/" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/membros-card-vermelh-vivo.webp">
</a>
</div>
<div class="neon-item" style="--position: 10;">
<a href="https://reinodascoisas.com/livros/" class="neon-card-link">
<img src="http://reinodascoisas.com/wp-content/uploads/2026/06/livros-laranja-vivo.webp" alt="Slider 10">
</a>
</div>
</div>
</div>
</div>
<div class="neon-warp-overlay" id="warpOverlay">
<div class="neon-warp-card" id="warpCard">
<img id="warpImg" src="" alt="">
</div>
</div>
<style>
/* ====================================================
ESTILOS DO CARROSSEL 3D
==================================================== */
.wp-custom-carousel-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
user-select: none;
}
.neon-banner-wrapper {
width: 100%;
height: 550px;
text-align: center;
overflow: hidden;
position: relative;
background-color: #000000;
border-radius: 12px;
cursor: grab;
}
.neon-banner-wrapper:active {
cursor: grabbing;
}
.neon-banner-wrapper .neon-slider {
position: absolute;
width: 160px;
height: 210px;
top: 30%;
left: calc(50% - 80px);
transform-style: preserve-3d;
transform: perspective(1000px) rotateX(-12deg) rotateY(var(--rotateY));
z-index: 2;
transition: transform 0.1s ease-out;
}
.neon-banner-wrapper .neon-slider .neon-item {
position: absolute;
inset: 0 0 0 0;
transform:
rotateY(calc( (var(--position) - 1) * (360deg / var(--quantity)) ))
translateZ(320px);
border: 3px solid #00ff66;
border-radius: 8px;
box-shadow: 0 0 15px #00ff66, inset 0 0 10px #00ff66;
overflow: hidden;
background-color: #000000;
cursor: pointer;
transition: box-shadow 0.3s ease;
}
.neon-banner-wrapper .neon-slider .neon-item:hover {
box-shadow: 0 0 25px #00ff66, inset 0 0 15px #00ff66;
}
.neon-card-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
pointer-events: none;
}
.neon-banner-wrapper .neon-slider .neon-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* ====================================================
ANIMAÇÃO DE BLACKOUT FLUIDA (WARP EFFECT)
==================================================== */
.neon-warp-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
opacity: 0;
pointer-events: none;
transition: background-color 0.38s ease, opacity 0.1s ease;
}
.neon-warp-overlay.active {
opacity: 1;
pointer-events: auto;
background-color: #000000; /* O fundo da página escurece junto */
}
.neon-warp-card {
width: 160px;
height: 210px;
border: 2px solid #00ff66; /* Borda estritamente fina */
border-radius: 8px;
background-color: #000000;
box-shadow: 0 0 20px #00ff66, inset 0 0 12px #00ff66;
overflow: hidden;
position: relative;
/* Curva de aceleração exponencial */
transition: width 0.38s cubic-bezier(0.65, 0, 0.35, 1),
height 0.38s cubic-bezier(0.65, 0, 0.35, 1),
border-radius 0.38s ease,
box-shadow 0.38s ease;
}
.neon-warp-card img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transition: opacity 0.28s ease-in 0.04s; /* Começa a virar breu logo após arrancar */
}
/* Estado Final (Blackout Total) */
.neon-warp-overlay.active .neon-warp-card {
width: 104vw; /* Estica 4% além da tela para engolir as bordas neon */
height: 104vh;
border-radius: 0px;
box-shadow: 0 0 60px #00ff66, inset 0 0 40px #00ff66;
}
.neon-warp-overlay.active .neon-warp-card img {
opacity: 0; /* Imagem morre no preto absoluto */
}
@media (max-width: 768px) {
.neon-banner-wrapper { height: 400px; }
.neon-banner-wrapper .neon-slider {
width: 110px;
height: 150px;
left: calc(50% - 55px);
top: 32%;
}
.neon-banner-wrapper .neon-slider .neon-item {
transform: rotateY(calc( (var(--position) - 1) * (360deg / var(--quantity)) )) translateZ(180px);
border: 2px solid #00ff66;
}
.neon-warp-card {
width: 110px;
height: 150px;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.querySelector(".neon-banner-wrapper");
const slider = document.getElementById("neonSlider");
const warpOverlay = document.getElementById("warpOverlay");
const warpImg = document.getElementById("warpImg");
let isDragging = false;
let startX = 0;
let currentRotateY = 0;
let dragThreshold = 5;
// --- ARRASTE DO CARROSSEL ---
function startDrag(e) {
if (warpOverlay.classList.contains("active")) return;
isDragging = true;
startX = e.pageX || e.touches[0].pageX;
wrapper.style.transition = "none";
}
function doDrag(e) {
if (!isDragging) return;
const currentX = e.pageX || e.touches[0].pageX;
const diffX = currentX - startX;
let newRotateY = currentRotateY + (diffX * 0.5);
slider.style.setProperty("--rotateY", `${newRotateY}deg`);
}
function endDrag(e) {
if (!isDragging) return;
isDragging = false;
const transformValue = slider.style.getPropertyValue("--rotateY");
if (transformValue) {
currentRotateY = parseFloat(transformValue);
}
}
wrapper.addEventListener("mousedown", startDrag);
window.addEventListener("mousemove", doDrag);
window.addEventListener("mouseup", endDrag);
wrapper.addEventListener("touchstart", startDrag, { passive: true });
window.addEventListener("touchmove", doDrag, { passive: true });
window.addEventListener("touchend", endDrag);
// --- GATILHO DE CLIQUE FLUIDO ---
const items = document.querySelectorAll(".neon-item");
items.forEach(item => {
let touchStartX = 0;
item.addEventListener("mousedown", (e) => { touchStartX = e.pageX; });
item.addEventListener("touchstart", (e) => { touchStartX = e.touches[0].pageX; }, { passive: true });
item.addEventListener("click", function(e) {
if (Math.abs(e.pageX - touchStartX) > dragThreshold) return;
const linkEl = this.querySelector("a");
const imgEl = this.querySelector("img");
if (linkEl && imgEl) {
const targetUrl = linkEl.getAttribute("href");
if (targetUrl && targetUrl !== "#") {
// 1. Clona a imagem do card para dentro do portal de transição
warpImg.src = imgEl.src;
// 2. Dispara a expansão
warpOverlay.classList.add("active");
// 3. Redireciona cravado nos 380ms da animação CSS
setTimeout(() => {
window.location.href = targetUrl;
}, 380);
}
}
});
});
});
</script>