/* ==========================================================================
   NIVORA ENHANCEMENT LAYER
   Loaded after nivora-theme.css. Additive only: it fixes classes that were
   used in markup but never styled, adds motion/texture utilities, and
   respects reduced-motion preferences. Colours come from the :root tokens
   defined in nivora-theme.css, so this file does not re-brand the site.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FIXES: classes used in markup that had no CSS
   -------------------------------------------------------------------------- */

/* Back-to-top button (markup: #scrollTopBtn.scroll-to-top, shown via .visible).
   Sits bottom-left so it does not collide with the WhatsApp button. */
.scroll-to-top {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-glow);
    cursor: pointer;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.scroll-to-top:hover {
    transform: translateY(-3px) scale(1.06);
}

.scroll-to-top:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.45);
    outline-offset: 3px;
}

/* Floating stat chips on the hero. Movement uses the individual `translate`
   property so it does not fight the transform used by .hover-lift-3d. */
.floating-stat-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem 0.55rem 0.55rem;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    z-index: 3;
    animation: nvr-float 6s ease-in-out infinite;
}

.floating-stat-badge.badge-bottom-right {
    animation-delay: -3s;
}

@keyframes nvr-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}


/* --------------------------------------------------------------------------
   2. GLOW BORDER: a gradient edge that sweeps around cards on hover.
   Uses ::after, because ::before is already used by .spotlight-card and
   .hero-glass-card. Desktop pointers only.
   -------------------------------------------------------------------------- */

@property --nvr-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@media (hover: hover) and (pointer: fine) {
    .service-card-modern,
    .wc-card-modern,
    .tech-matrix-card,
    .nvr-industry-card,
    .nvr-stat-card,
    .hero-glass-card {
        position: relative;
    }

    .service-card-modern::after,
    .wc-card-modern::after,
    .tech-matrix-card::after,
    .nvr-industry-card::after,
    .nvr-stat-card::after,
    .hero-glass-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: conic-gradient(
            from var(--nvr-angle),
            transparent 0deg 260deg,
            #6366F1 300deg,
            #06B6D4 340deg,
            transparent 360deg
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }

    .service-card-modern:hover::after,
    .wc-card-modern:hover::after,
    .tech-matrix-card:hover::after,
    .nvr-industry-card:hover::after,
    .nvr-stat-card:hover::after,
    .hero-glass-card:hover::after {
        opacity: 1;
        animation: nvr-spin 3.5s linear infinite;
    }
}

@keyframes nvr-spin {
    to { --nvr-angle: 360deg; }
}


/* --------------------------------------------------------------------------
   3. UTILITIES: available for new sections. Not applied globally, because
   existing sections already set their own backgrounds.
   -------------------------------------------------------------------------- */

/* Animated gradient text (flowing colour). */
.text-gradient-flow {
    background: linear-gradient(90deg, #6366F1, #06B6D4, #8B5CF6, #6366F1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: nvr-gradient-flow 6s linear infinite;
}

@keyframes nvr-gradient-flow {
    to { background-position: 300% 0; }
}

/* Faint grid, faded toward the edges. Add to a section that has no background-image. */
.nvr-grid-bg {
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Film-grain texture via an inline SVG noise filter (no image request). */
.nvr-grain {
    position: relative;
}

.nvr-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}


/* --------------------------------------------------------------------------
   4. ACCESSIBILITY: respect reduced-motion preferences.
   Keeps content visible even when reveal animations are disabled.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-on-scroll,
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .section-header {
        opacity: 1 !important;
        transform: none !important;
    }

    .floating-stat-badge {
        animation: none !important;
    }
}


/* --------------------------------------------------------------------------
   5. PALETTE: violet is the primary colour, cyan is the accent.
   Bootstrap's default blue (#0d6efd) is hard-coded into .btn-primary and the
   primary utilities. These overrides point them at the Nivora violet.
   Blue and orange are no longer used anywhere on the site.
   -------------------------------------------------------------------------- */

:root {
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-text-emphasis: #3730A3;
    --bs-primary-bg-subtle: #EEF2FF;
    --bs-primary-border-subtle: #C7D2FE;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338CA;
    --bs-link-hover-color-rgb: 67, 56, 202;
    --bs-focus-ring-color: rgba(99, 102, 241, 0.25);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4338CA;
    --bs-btn-hover-border-color: #3730A3;
    --bs-btn-focus-shadow-rgb: 99, 102, 241;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3730A3;
    --bs-btn-active-border-color: #312E81;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4F46E5;
    --bs-btn-disabled-border-color: #4F46E5;
}

.btn-outline-primary {
    --bs-btn-color: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4F46E5;
    --bs-btn-hover-border-color: #4F46E5;
    --bs-btn-focus-shadow-rgb: 99, 102, 241;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4F46E5;
    --bs-btn-active-border-color: #4F46E5;
    --bs-btn-disabled-color: #4F46E5;
    --bs-btn-disabled-border-color: #4F46E5;
}

.form-control:focus,
.form-select:focus {
    border-color: #A5B4FC;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.2);
}

.form-check-input:checked,
.form-check-input:checked:focus {
    background-color: #4F46E5;
    border-color: #4F46E5;
}