/* ============================================
   SYMTRI CMaaS — VISUAL EFFECTS LAYER
   Loaded after each page's inline <style> block so
   these rules win against same-specificity selectors.

   Restores the "signature" effects documented in
   branding/BRAND-GUIDELINES.md §7:
   - Hero gradient overlay + atmospheric blob (header
     backdrop-filter has color/edges to frost against)
   - Cinematic .reveal scroll-fade (800ms / 30px,
     matches the old .fade-in rhythm)
   - Optional .alt-bg-wrap blob behind alternate sections
   ============================================ */

/* === Hero — restore depth so backdrop-blur reads === */
.hero-dark {
    background: radial-gradient(ellipse at top, #1a1132 0%, #0a0a0a 65%);
    position: relative;
    overflow: hidden;
}

.hero-dark::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    max-width: 140vw;
    height: 700px;
    background: radial-gradient(ellipse at center,
        rgba(139, 92, 246, 0.40) 0%,
        rgba(236, 72, 153, 0.28) 30%,
        rgba(251, 146, 60, 0.18) 55%,
        transparent 75%);
    filter: blur(80px);
    -webkit-filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: heroBlobPulse 10s ease-in-out infinite;
}

.hero-dark-content {
    position: relative;
    z-index: 2;
}

@keyframes heroBlobPulse {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.95; }
    50%      { transform: translateX(-50%) scale(1.12); opacity: 1;    }
}

/* === Atmospheric blob behind alternate-bg sections === */
.alt-bg-wrap {
    position: relative;
    overflow: hidden;
}

.alt-bg-wrap::before {
    content: '';
    position: absolute;
    top: 30%;
    right: -250px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at center,
        rgba(139, 92, 246, 0.18) 0%,
        rgba(236, 72, 153, 0.12) 35%,
        rgba(251, 146, 60, 0.08) 60%,
        transparent 80%);
    filter: blur(80px);
    -webkit-filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.alt-bg-wrap > * {
    position: relative;
    z-index: 1;
}

/* === Cinematic scroll-fade — restore old .fade-in rhythm === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: keep content-first behavior — show everything immediately,
   no fade. Matches the inline-CSS choice in each page's <style>. */
@media (max-width: 767px) {
    .reveal,
    .reveal.revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Always respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hero-dark::before {
        animation: none;
    }
}