.creo-hero-track {
    position: relative;
    height: 150vh;
    background-color: #0b173d;
}

.creo-hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.creo-seq-canvas {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    will-change: transform;
    transform-origin: center center;
}

.creo-god-rays {
    position: absolute;
    top: -20vh;
    left: 50%;
    transform: translateX(-50%);
    width: 150vw;
    height: 150vh;
    background: radial-gradient(circle at 50% 30%, rgba(255, 240, 180, 0.4) 0%, transparent 60%),
                conic-gradient(from 180deg at 50% 30%, transparent 0deg, rgba(255, 230, 140, 0.15) 20deg, transparent 45deg, rgba(255, 250, 180, 0.2) 90deg, transparent 135deg);
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    filter: blur(30px);
    will-change: opacity;
}

.creo-particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.creo-particle {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% { transform: translateY(110vh) translateX(0) scale(0.5); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-10vh) translateX(30px) scale(1.5); opacity: 0; }
}