/* =================================================================
   GRADIENTS
   Brand gradient library + cursor-following hotspot.
   Loaded by inc/enqueue.php (order matters: see the list there).
   ================================================================= */

/* ---------------------------------------------------------------
   Brand gradients — reusable background components
   Drop the class onto any Elementor container via
   Advanced > CSS Classes. Leave the container's own background
   empty so there's nothing for Elementor to override.

   Palette vars (--ipg-*) are defined globally. The faded stops
   derive from those same vars via relative-colour syntax, so each
   colour has one source of truth — retune the var, the whole
   gradient follows.
--------------------------------------------------------------- */
.gradient-hero {
    background:
        radial-gradient(ellipse 120% 70% at 60% 0%,
            var(--ipg-arctic) 0%,
            var(--ipg-powder) 32%,
            rgb(from var(--ipg-cobalt) r g b / 0.5) 62%,
            rgb(from var(--ipg-navy) r g b / 0) 100%),
        radial-gradient(ellipse 30% 40% at 15% 100%,
            var(--ipg-deepnavy) 0%,
            rgb(from var(--ipg-deepnavy) r g b / 0.45) 55%,
            rgb(from var(--ipg-deepnavy) r g b / 0) 100%),
        linear-gradient(180deg,
            var(--ipg-powder) 0%,
            var(--ipg-cobalt) 40%,
            var(--ipg-navy) 72%,
            var(--ipg-deepnavy) 100%);
}

/* ---------------------------------------------------------------
   GRADIENT LIBRARY (continued from .gradient-hero above)
   Reusable background gradients — add the class to any Elementor
   container via Advanced > CSS Classes and leave the container's
   own background empty. Named by look, not by the section they
   debuted in, so they read honestly when reused. Built on --ipg-*
   vars (+ relative-colour syntax for faded stops) so a palette
   retune cascades through every gradient at once.

   NOTE: #e3f0f9 (a near-white frost) is used in -bloom and
   -spotlight and is NOT in the --ipg-* palette. If it's a real
   brand tint, add it as a global var (e.g. --ipg-frost) in
   Elementor and swap the two literals below for a single source.
--------------------------------------------------------------- */

/* Subtle translucent tint — e.g. the stats bar over the hero */
.gradient-veil {
    background: linear-gradient(180deg,
        rgb(from var(--ipg-powder)   r g b / 0.1) 0%,
        rgb(from var(--ipg-deepnavy) r g b / 0.1) 43.27%,
        rgb(from var(--ipg-deepnavy) r g b / 0.1) 100%);
}

/* Soft light bloom rising from below — e.g. the Services section */
.gradient-bloom {
    background: radial-gradient(circle at 50% 140%,
        #e3f0f9 40%,
        var(--ipg-powder) 52%,
        var(--ipg-cobalt) 58%,
        var(--ipg-cobalt) 100%);
}

/* Soft light bloom rising from below — e.g. the Services section */
.gradient-bloom-reverse {
    background: radial-gradient(circle at 50% -75%,
        #e3f0f9 40%,
        var(--ipg-powder) 62%,
        var(--ipg-cobalt) 68%,
        var(--ipg-cobalt) 100%);
}

/* Card gradients — cobalt -> powder, three positional variants.
   Case-study loop-grid tiles reuse .gradient-tile-1 for consistency
   (keep .case-study-tile for its border-radius/padding). */
.gradient-tile-1 {
    background: radial-gradient(104.56% 94.37% at 41.49% 5.63%,
        var(--ipg-cobalt) 0%, var(--ipg-powder) 100%);
}
.gradient-tile-2 {
    background: linear-gradient(157.14deg,
        var(--ipg-cobalt) -3.8%, var(--ipg-powder) 74.84%);
}
.gradient-tile-3 {
    background: radial-gradient(83.45% 75.32% at 75.54% 67.97%,
        var(--ipg-cobalt) 0%, var(--ipg-powder) 100%);
}

/* Dramatic dark-core -> bright-edge bloom — e.g. the final CTA band */
.gradient-spotlight {
    background: radial-gradient(ellipse 80% 150% at 50% 0%,
        var(--ipg-deepnavy) 0%,
        var(--ipg-deepnavy) 42%,
        var(--ipg-navy)   62%,
        var(--ipg-cobalt) 70%,
        var(--ipg-powder) 75%,
        #e3f0f9 80%);
}
/* Mobile: the ellipse is sized as % of the box, so on a narrow, tall
   section "80% wide" becomes a skinny column and the light edges
   pinch in from the sides (the "squished tunnel"). Widen it well past
   the box so the sides stay dark and the bloom reads as a gentle
   dome at the bottom — same colour stops, just a mobile-shaped
   ellipse. (150%/130% chosen over wider: 200% over-blooms and
   washes out the lower button.) */
@media (max-width: 767px) {
    .gradient-spotlight {
        background: radial-gradient(ellipse 150% 130% at 50% 0%,
            var(--ipg-deepnavy) 0%,
            var(--ipg-deepnavy) 42%,
            var(--ipg-navy)   62%,
            var(--ipg-cobalt) 70%,
            var(--ipg-powder) 75%,
            #e3f0f9 80%);
    }
}

/* Deep blue field with a soft corner glow — the footer */
.gradient-footer {
    background:
        radial-gradient(ellipse 70% 55% at 40% 100%,
            var(--ipg-powder) 0%,
            rgb(from var(--ipg-powder) r g b / 0.55) 40%,
            rgb(from var(--ipg-cobalt) r g b / 0) 75%),
        radial-gradient(ellipse 55% 65% at 5% 0%,
            var(--ipg-deepnavy) 0%,
            rgb(from var(--ipg-deepnavy) r g b / 0.5) 50%,
            rgb(from var(--ipg-deepnavy) r g b / 0) 100%),
        linear-gradient(175deg,
            var(--ipg-navy)   0%,
            var(--ipg-cobalt) 25%,
            var(--ipg-cobalt) 95%);
}

/* Frost panel — pale blue at the top with a lighter centre, easing
   down into powder, with deeper blue pooling in the two bottom
   corners. Tuned against colours sampled from the mega menu mock
   (top edge #aed7f5, top centre #bfe2f6, bottom centre #79b4ee,
   bottom corners #4e88d4). Light enough for navy text throughout.
   Layers, top to bottom of the stack: centre highlight, two corner
   glows, base fade. */
/* The frost gradient is also painted by the mega menu's shared header
   panel (megamenu.css), so it lives in a variable: one source. */
:root {
    --gradient-frost:
        radial-gradient(ellipse 55% 60% at 50% 0%,
            rgb(255 255 255 / 0.28) 0%,
            rgb(255 255 255 / 0) 100%),
        radial-gradient(ellipse 48% 70% at 0% 100%,
            rgb(from var(--ipg-cobalt) r g b / 0.48) 0%,
            rgb(from var(--ipg-cobalt) r g b / 0) 100%),
        radial-gradient(ellipse 48% 70% at 100% 100%,
            rgb(from var(--ipg-cobalt) r g b / 0.48) 0%,
            rgb(from var(--ipg-cobalt) r g b / 0) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ipg-powder) 60%, white) 0%,
            color-mix(in srgb, var(--ipg-powder) 70%, white) 30%,
            color-mix(in srgb, var(--ipg-powder) 85%, white) 65%,
            color-mix(in srgb, var(--ipg-cobalt) 10%, var(--ipg-powder)) 100%);
}
.gradient-frost {
    background: var(--gradient-frost);
}

/* ---------------------------------------------------------------
   Cursor-following hotspot (Fluent / Windows "Reveal" style)
   Composable: add .gradient-hotspot ALONGSIDE any base gradient
   (e.g. class="gradient-tile-1 gradient-hotspot") and a soft light
   follows the cursor on hover. assets/js/hotspot.js writes the cursor position into --hx / --hy.

   - isolation:isolate keeps the plus-lighter blend contained to
     the tile, so it blends with the tile's own gradient (not the
     page behind it).
   - The glow sits under the tile's content (z-index) so copy stays
     legible; direct children are lifted above it.
   - Bounded by the element box + border-radius:inherit, so it
     respects rounded tiles with no clipping needed.

   Tuning: alpha 0.30 = intensity; 260px = spotlight size.
--------------------------------------------------------------- */
.gradient-hotspot {
    position: relative;
    isolation: isolate;
}
.gradient-hotspot > * {
    position: relative;
    z-index: 1;                 /* content above the glow */
}
.gradient-hotspot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle 500px at var(--hx, 50%) var(--hy, 50%),
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0)   60%);
    mix-blend-mode: plus-lighter;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.gradient-hotspot:hover::before {
    opacity: 1;
}

/* No cursor glow for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .gradient-hotspot::before { display: none; }
}