/* ==========================================================================
   TrioLux v3 — Visual Effects & Animations
   ========================================================================== */

/* ---- Scroll Reveal ---- */
[data-r] {
    opacity: 0; transform: translateY(50px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-r].v { opacity: 1; transform: none }
[data-r][data-d="1"] { transition-delay: .08s }
[data-r][data-d="2"] { transition-delay: .16s }
[data-r][data-d="3"] { transition-delay: .24s }
[data-r][data-d="4"] { transition-delay: .32s }
[data-r][data-d="5"] { transition-delay: .4s }

/* Backward compat */
.fade-in { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out) }
.fade-in.is-visible, .fade-in.v { opacity: 1; transform: none }
[data-animate="up"] { opacity: 0; transform: translateY(50px) }
[data-animate].is-visible, [data-animate].v { opacity: 1; transform: none; filter: none; transition: all .7s var(--ease-out) }

/* ---- Shimmer Text ---- */
.shimmer-text {
    background: linear-gradient(110deg, var(--white) 30%, var(--accent) 50%, var(--violet) 70%, var(--white) 90%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmer 5s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 100% center } 50% { background-position: 0% center } }

/* ---- Gradient Text ---- */
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- Outline Text ---- */
.outline-text { -webkit-text-stroke: 1.5px var(--white); -webkit-text-fill-color: transparent }
.accent-text { color: var(--accent) }

/* ---- Image Hover Zoom ---- */
.image-hover-zoom { overflow: hidden }
.image-hover-zoom img { transition: transform .6s var(--ease-out) }
.image-hover-zoom:hover img { transform: scale(1.04) }

/* ---- Glow Ring ---- */
.glow-ring { position: relative }
.glow-ring::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
    background: var(--gradient); opacity: 0; transition: opacity .3s; filter: blur(5px);
}
.glow-ring:hover::after, *:hover > .glow-ring::after { opacity: .4 }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    [data-r], .fade-in, [data-animate], .shimmer-text {
        opacity: 1 !important; transform: none !important; filter: none !important;
        animation: none !important; transition: none !important;
    }
}