/* ============================================
   Oddology Inc. - Visual Effects CSS
   ============================================ */

/* Text Scramble Effect */
.scramble-char {
    color: var(--gradient-start);
    text-shadow: 0 0 10px var(--gradient-start);
}

.scramble-line {
    display: inline;
}

/* Tilt Cards */
.project-card,
.service-card,
.floating-card,
.about-card {
    transform-style: preserve-3d;
    will-change: transform;
}

.tilt-shine {
    transition: background 0.2s ease;
}

/* Particles Canvas Layering */
#particles-canvas {
    mix-blend-mode: screen;
}

/* Make sure content is above particles */
.main-nav,
main,
footer,
.hero,
.about,
.services,
.contact,
.projects-section,
.portfolio-hero {
    position: relative;
    z-index: 1;
}

/* Gradient background should be above particles but below content */
.gradient-bg {
    z-index: 0;
}

/* Reserve space for hero title to prevent layout shift */
.hero-title {
    min-height: 12rem;
    min-width: 100%;
    white-space: pre-line;
}

@media (max-width: 768px) {
    .hero-title {
        min-height: 10rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        min-height: 8rem;
    }
}

/* Sync floating cards with octopus */
.floating-card {
    animation: octopusFloat 6s ease-in-out infinite;
}

@keyframes octopusFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}