/* ==========================================
   Fusionik — Variante C (objeto low-poly) — aditivo
   ========================================== */

/* Canvas de fuegos artificiales (reposo): cubre la pantalla, no bloquea clics */
.fireworks-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    z-index: 40;
}

/* Canvas con el objeto 3D central */
.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: heroCanvasIn 1.6s ease-out 0.2s forwards;
}
@keyframes heroCanvasIn { to { opacity: 1; } }

/* Atenuamos las manchas SOLO mientras el 3D está activo (clase .fx-3d).
   Al destruirse el 3D, la clase se quita y las formas recuperan su opacidad. */
.hero.fx-3d .hero-shape { opacity: 0.18; }

/* Viñeta radial (solo con 3D activo): oscurece el centro para que el texto
   sea legible sobre el objeto, dejando los bordes con el resplandor. */
.hero.fx-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 62% 52% at 50% 46%, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0) 70%);
}

.hero-content { z-index: 3; }
.hero-content h1,
.hero-subtitle { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }

/* Brillo animado del texto degradado */
.gradient-text {
    background-size: 220% auto;
    animation: gradientShimmer 6s ease-in-out infinite;
}
@keyframes gradientShimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Tarjetas con tilt 3D — solo donde hay ratón: vanilla-tilt no se inicializa
   en táctil (effects-3d.js) y will-change ahí solo gasta memoria de GPU. */
.capability-card,
.service-card,
.testimonial-card {
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition);
}
.js-tilt-glare { border-radius: inherit; }

@media (hover: hover) and (pointer: fine) {
    .capability-card,
    .service-card,
    .testimonial-card {
        transform-style: preserve-3d;
        will-change: transform;
    }
    .capability-card:hover,
    .service-card:hover,
    .testimonial-card:hover {
        box-shadow: var(--shadow-xl), 0 0 0 1px var(--primary-glow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-canvas { display: none; }
    .hero::after { display: none; }
    .gradient-text { animation: none; }
    .hero-shape { opacity: 0.4; }
}