/* Hero — camadas decorativas Originkit. Tipografia via Tailwind. */

.hero-10 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Glow */
.hero-10__glow {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-10__glow-curve {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 320px;
    opacity: 0.35;
    background: linear-gradient(to bottom, #9d4edd 0%, #6a0dad 35%, #f3e8ff 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, #000 0%, #000 40%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, #000 0%, #000 40%, transparent 78%);
}

html.dark .hero-10__glow-curve {
    opacity: 0.4;
    background: linear-gradient(to bottom, #9d4edd 0%, #6a0dad 28%, #4b0878 55%, #0f0a18 100%);
}

.hero-10__glow-bloom {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 140%;
    height: 240px;
    transform: translateX(-50%);
    filter: blur(80px);
    opacity: 0.35;
    background: radial-gradient(ellipse 85% 90% at 50% 0%, #9d4edd 0%, #6a0dad 40%, transparent 76%);
}

html.dark .hero-10__glow-bloom {
    opacity: 0.45;
}

/* Pixel corners */
.hero-10__pixels {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 1512px;
    height: 48%;
    gap: 2.5rem;
    transform: translateX(-50%);
    overflow: hidden;
}

.hero-10__pixel-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    mask-image: radial-gradient(farthest-corner at top left, #000 30%, transparent 62%);
    -webkit-mask-image: radial-gradient(farthest-corner at top left, #000 30%, transparent 62%);
}

.hero-10__pixel-panel--right {
    mask-image: radial-gradient(farthest-corner at top right, #000 30%, transparent 62%);
    -webkit-mask-image: radial-gradient(farthest-corner at top right, #000 30%, transparent 62%);
}

.hero-10__pixel-card {
    width: 100%;
    height: 100%;
}

.hero-10__pixel-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Curved marquee (infinito) */
.hero-10__marquee {
    position: relative;
    width: 100%;
    max-width: 920px;
    height: 56px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.hero-10__marquee-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 165%;
    max-width: 1320px;
    height: auto;
    aspect-ratio: 1440 / 800;
    transform: translate(-50%, -66%);
    overflow: visible;
    display: block;
}

/* Prism grid 3D */
.hero-10__prism-wrap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    height: 60%;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
}

.hero-10__prism-mask {
    position: absolute;
    inset: 0;
    opacity: 0.88;
}

html.dark .hero-10__prism-mask {
    opacity: 0.95;
}

.hero-10__prism-scaler {
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 240%;
    transform: translateX(-50%);
}

.hero-10__prism-root {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
}

.hero-10__prism-perspective {
    position: absolute;
    inset: 0;
    perspective: 1000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
}

.hero-10__prism-plane {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%) rotateY(0deg) rotateX(50deg);
    transform-origin: center center;
    transform-style: preserve-3d;
}

.hero-10__prism-grid {
    display: flex;
    flex-direction: column;
}

.hero-10__prism-row {
    display: flex;
}

.hero-10__prism-cell {
    flex-shrink: 0;
    box-sizing: border-box;
}

.hero-10__prism-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.hero-10__prism-lit {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .hero-10__glow-curve { height: 380px; }
    .hero-10__glow-bloom { height: 280px; }
    .hero-10__pixels { height: 42%; }
    .hero-10__marquee { height: 64px; max-width: 1000px; }
    .hero-10__marquee-svg { width: 150%; transform: translate(-50%, -67%); }
    .hero-10__prism-scaler { width: 200%; }
}

@media (min-width: 1280px) {
    .hero-10__pixels { max-width: none; gap: 3rem; }
    .hero-10__prism-scaler {
        inset: 0;
        left: 0;
        width: 100%;
        transform: none;
    }
    .hero-10__marquee-svg { width: 120%; max-width: 1200px; transform: translate(-50%, -68%); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-10__pixels,
    .hero-10__prism-wrap,
    .hero-10__marquee {
        display: none;
    }
}