/* ===== AREEN TECH — VISUAL EFFECTS ===== */

/* ── GRADIENT WAVE BACKGROUND ── */
.wave-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.wave-bg::before,
.wave-bg::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    border-radius: 43%;
    opacity: 0.045;
}

.wave-bg::before {
    background: radial-gradient(ellipse at 60% 40%, #48bb9f 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, #1a6aff 0%, transparent 50%);
    animation: waveSpin 22s linear infinite;
}

.wave-bg::after {
    background: radial-gradient(ellipse at 80% 20%, #48bb9f 0%, transparent 55%),
                radial-gradient(ellipse at 40% 70%, #5fcfb1 0%, transparent 45%);
    animation: waveSpin 34s linear infinite reverse;
}

@keyframes waveSpin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.08); }
    to   { transform: rotate(360deg) scale(1); }
}

/* Keep page content above wave */
.page, footer, .footer { position: relative; z-index: 1; }

/* ── HERO PARALLAX LAYERS ── */
.hero-parallax {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

.hero-logo {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* ── 3D SERVICE CARD HOVER ── */
.service-card {
    transform-style: preserve-3d;
    perspective: 800px;
    will-change: transform;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.service-card:hover {
    box-shadow: 0 20px 50px rgba(72,187,159,0.2), 0 0 0 1px rgba(72,187,159,0.4);
}

/* ── SCROLL REVEAL ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.reveal-left {
    transform: translateX(-32px);
}

.reveal.reveal-right {
    transform: translateX(32px);
}

.reveal.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Stagger delays for grid children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.34s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.42s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.5s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.58s; }

/* Grid child reveal */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ── HERO GLOW PULSE ── */
.hero-logo {
    animation: logoPulse 4s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(72,187,159,0.3); }
    50%       { box-shadow: 0 8px 48px rgba(72,187,159,0.55), 0 0 80px rgba(72,187,159,0.15); }
}

/* ── FLOATING PARTICLES (lightweight CSS) ── */
.particles-home {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #48bb9f;
    border-radius: 50%;
    opacity: 0;
    animation: floatUp var(--dur, 12s) var(--delay, 0s) linear infinite;
}

@keyframes floatUp {
    0%   { opacity: 0; transform: translateY(100vh) scale(0.5); }
    10%  { opacity: 0.4; }
    90%  { opacity: 0.2; }
    100% { opacity: 0; transform: translateY(-10vh) scale(1.2); }
}

/* ── BOTS SECTION ENTRY ── */
.bots-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.bots-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── SECTION TITLE REVEAL ── */
.section-title.reveal,
.section-sub.reveal {
    transition: opacity 0.5s ease, transform 0.5s ease;
}