#scrollh {
    position: relative;
    width: 100%;
    height: 250vh;
    background-color: rgb(14, 14, 17);
}

.scrollh-pin {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.9s ease;
}

.scrollh-trilha {
    position: relative;
    height: 100%;
    will-change: transform;
}

/* cor das formas: segue o tema, exceto no branco (fica escura) */
body {
    --forma-cor: var(--spark-color, 255, 255, 255);
}
body.tema-branco {
    --forma-cor: 40, 40, 40;
}

/* ===== formas geométricas 2D ===== */

.forma {
    position: absolute;
    pointer-events: auto;
    cursor: grab;
    background: rgba(var(--forma-cor), 0.34);
}

.forma.arrastando {
    cursor: grabbing;
    z-index: 50;
}

.forma-quadrado  { border-radius: 4px; }
.forma-triangulo { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.forma-losango   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/* ===== esfera com ilusão de rotação (substitui o círculo) ===== */

.forma-esfera {
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55), rgba(var(--forma-cor), 0.55) 42%, rgba(var(--forma-cor), 0.22) 75%, rgba(var(--forma-cor), 0.08) 100%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}

.forma-esfera::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.4) 0px,
        rgba(255, 255, 255, 0.4) 2px,
        transparent 2px,
        transparent 13px
    );
    background-size: 52px 100%;
    background-repeat: repeat;
    mix-blend-mode: overlay;
    animation: girar-esfera var(--vel-esfera, 3.4s) linear infinite;
    pointer-events: none;
}

@keyframes girar-esfera {
    from { background-position: 0 0; }
    to   { background-position: -52px 0; } /* exatamente 1 período — loop sem emenda visível */
}

/* ===== textos espalhados ===== */

.scrollh-texto {
    position: absolute;
    color: white;
    background: transparent;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
}
body.tema-branco   .scrollh-texto { color: rgb(20, 20, 20); }
body.tema-preto    .scrollh-texto,
body.tema-cinza    .scrollh-texto,
body.tema-colorido .scrollh-texto { color: white; }
.scrollh-texto.arrastando {
    cursor: grabbing;
    z-index: 50;
}

/* ===== imagens espalhadas (decorativas, não arrastam) ===== */

.scrollh-imagem {
    position: absolute;
    object-fit: cover;
    border-radius: 6px;
    opacity: 0.55;
    filter: grayscale(1) contrast(1.1);
    mix-blend-mode: overlay;
    pointer-events: none;
    user-select: none;
}

/* ===== capas de álbum — cor cheia, destaque, arrastáveis ===== */

.scrollh-capa {
    position: absolute;
    object-fit: cover;
    border-radius: 0px;
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.55),
        0 0 0 2px rgba(255, 255, 255, 0.12);
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    z-index: 8; /* acima de formas/textos/3D, sem brigar com o modal (10000) */
}

.scrollh-capa.arrastando {
    cursor: grabbing;
    z-index: 60;
}

/* ===== formas 3D (cubo / pirâmide) ===== */

.objeto3d-container {
    position: absolute;
    pointer-events: auto;
    cursor: grab;
    width: var(--tam);
    height: var(--tam);
    perspective: calc(var(--tam) * 4);
}

.objeto3d-container.arrastando {
    cursor: grabbing;
    z-index: 50;
}

.objeto3d {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: girar3d var(--duracao, 14s) linear infinite;
    pointer-events: none;
}

@keyframes girar3d {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to   { transform: rotateX(360deg) rotateY(360deg); }
}

.face-quad {
    position: absolute;
    width: var(--tam);
    height: var(--tam);
    background: rgba(var(--forma-cor), 0.26);
    border: 1px solid rgba(var(--forma-cor), 0.85);
    box-sizing: border-box;
}

.face-frente   { transform: translateZ(calc(var(--tam) / 2)); }
.face-tras     { transform: rotateY(180deg) translateZ(calc(var(--tam) / 2)); }
.face-direita  { transform: rotateY(90deg) translateZ(calc(var(--tam) / 2)); }
.face-esquerda { transform: rotateY(-90deg) translateZ(calc(var(--tam) / 2)); }
.face-topo     { transform: rotateX(90deg) translateZ(calc(var(--tam) / 2)); }
.face-base     { transform: rotateX(-90deg) translateZ(calc(var(--tam) / 2)); }

.face-piramide {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--tam);
    height: var(--tam);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: rgba(var(--forma-cor), 0.26);
    transform-origin: 50% 100%;
}

.piramide-lado1 { transform: rotateY(0deg)   rotateX(-32deg); }
.piramide-lado2 { transform: rotateY(90deg)  rotateX(-32deg); }
.piramide-lado3 { transform: rotateY(180deg) rotateX(-32deg); }
.piramide-lado4 { transform: rotateY(270deg) rotateX(-32deg); }