/* ============================================================================
   Skynyx — Advanced visual layer
   Premium effects on top of modern.css: animated gradients, depth orbs,
   glassmorphism, button shine, richer micro-interactions and scroll reveals.
   Content only — never touches navbar (.nav_all/.navbar*/.mega-menu/…) or the
   site footer (footer/.footerall/.footer-container/.footer-column/.policy-moves).
   ========================================================================== */

/* ---- Accessibility: honour reduced-motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Animated gradient (shimmer) on big headings -------------------------- */
.section-title {
    background: linear-gradient(90deg, #5369f8 0%, #8b5cf6 40%, #22d3ee 62%, #5369f8 100%) !important;
    background-size: 220% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: sky-shimmer 7s linear infinite;
}
@keyframes sky-shimmer { to { background-position: 220% center; } }

/* ---- Cards: deeper lift + icon micro-interaction ------------------------- */
.benefit-card, .benefit-home-card, .card_1 {
    transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.benefit-card:hover, .card_1:hover {
    transform: translateY(-9px) scale(1.012);
    box-shadow: 0 32px 64px rgba(83, 105, 248, .22);
}
.benefit-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.benefit-card:hover .benefit-icon,
.benefit-home-card:hover .benefit-icon {
    transform: translateY(-2px) rotate(-6deg) scale(1.08);
    box-shadow: 0 12px 22px rgba(83, 105, 248, .28);
}
.card_1:hover .card-image { transform: scale(1.06); transition: transform .35s ease; }

/* ---- Buttons: shine sweep on hover --------------------------------------- */
.convert-button, .btn-primary, .btn-success, .btn-warning, .card-read-more {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.convert-button::after, .btn-primary::after, .btn-success::after,
.btn-warning::after, .card-read-more::after {
    content: "";
    position: absolute;
    top: 0; left: -125%;
    width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    z-index: -1;
}
.convert-button:hover::after, .btn-primary:hover::after, .btn-success:hover::after,
.btn-warning:hover::after, .card-read-more:hover::after { left: 135%; }

/* ---- Glassmorphism on code + WhatsApp panels ----------------------------- */
.code-reference, .whatsapp-integrate {
    background: rgba(255, 255, 255, .72) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .7) !important;
}

/* ---- Comparison table: row hover ----------------------------------------- */
.comparison-table tbody tr { transition: background .2s ease; }
.comparison-table tbody tr:hover { background: rgba(83, 105, 248, .06) !important; }

/* ---- Feature chips: gradient glow on hover ------------------------------- */
.features-inline-list li {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .2s ease;
}
.features-inline-list li:hover {
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(83, 105, 248, .22);
    transform: translateY(-4px);
}
.features-inline-list li:hover .icons-usage-color { color: var(--m-accent); }

/* ---- Numbered "Try It Out" steps: gradient badge + connector ------------- */
.api_first { position: relative; }
.num_one img {
    box-shadow: 0 8px 18px rgba(83, 105, 248, .28);
    border-radius: 12px;
}

/* ---- Hero headline: subtle living glow ----------------------------------- */
.display-head { animation: sky-hero 6s ease-in-out infinite; }
@keyframes sky-hero {
    0%,100% { text-shadow: 0 12px 34px rgba(0,0,0,.28); }
    50%     { text-shadow: 0 18px 46px rgba(0,0,0,.38); }
}

/* ---- Scroll reveal (activated by the observer in footer.php) ------------- */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
}
.js-reveal .reveal.in { opacity: 1; transform: none; }