/* ─────────────────────────────────────────────────────────────────────────
   Shared motion / animation layer for every Solutions/* marketing page.
   Mirrors the "alive" feel of RiskManagement.cshtml: hover lifts on cards,
   gentle float on icons, pulse on the primary CTA, and a soft fade-up on
   section reveals — keyed off the class names the converted pages already
   use (feature-card, analytics-card, int-item, wf-stage, section-header,
   module-hero …).  No JS required.
   ───────────────────────────────────────────────────────────────────────── */

/* Hover lift on cards & feature tiles ─────────────────────────────────── */
.feature-card,
.analytics-card,
.int-item,
.wf-stage,
.hero-svg-card,
.stat-card {
    transition: transform .28s cubic-bezier(.2,.7,.2,1),
                box-shadow .28s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.feature-card:hover,
.analytics-card:hover,
.int-item:hover,
.wf-stage:hover,
.hero-svg-card:hover,
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -14px rgba(15, 23, 42, .18),
                0 6px 12px -4px rgba(15, 23, 42, .08);
}

/* Gentle float on iconography — staggered so they don't pulse in lockstep */
.feature-icon,
.int-dot,
.svg-card-header .dot {
    animation: modFloat 4.2s ease-in-out infinite;
    transform-origin: center;
}
.features-grid .feature-card:nth-child(2n) .feature-icon { animation-delay: .6s; }
.features-grid .feature-card:nth-child(3n) .feature-icon { animation-delay: 1.2s; }
.features-grid .feature-card:nth-child(4n) .feature-icon { animation-delay: 1.8s; }
.features-grid .feature-card:nth-child(5n) .feature-icon { animation-delay: 2.4s; }
.integration-list .int-item:nth-child(2n) .int-dot       { animation-delay: .5s; }
.integration-list .int-item:nth-child(3n) .int-dot       { animation-delay: 1s; }
.integration-list .int-item:nth-child(4n) .int-dot       { animation-delay: 1.5s; }
.integration-list .int-item:nth-child(5n) .int-dot       { animation-delay: 2s; }

@keyframes modFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Pulse ring around primary CTAs so they read as the "do this" target.
   Lives outside the button bounds via box-shadow spread, so it never
   shifts page layout. */
.mod-cta .erm-btn.erm-white,
.cta-actions .btn-primary,
.cta-actions .btn-white,
.hero-actions .btn-primary {
    animation: modPulse 2.6s ease-in-out infinite;
}
@keyframes modPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .35),
                           0 4px 10px -3px rgba(15, 23, 42, .25); }
    50%      { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0),
                           0 4px 10px -3px rgba(15, 23, 42, .25); }
}

/* Soft fade-up entrance on key reveal anchors. Triggers immediately when
   the element renders (no IntersectionObserver), so the *feel* is alive
   on first paint without scroll bookkeeping. */
.module-hero h1,
.module-hero .lead,
.module-hero .hero-actions,
.section-header h2,
.section-header p,
.stats-row,
.key-stats {
    animation: modFadeUp .9s cubic-bezier(.2,.7,.2,1) both;
}
.module-hero .lead         { animation-delay: .12s; }
.module-hero .hero-actions { animation-delay: .25s; }
.section-header p          { animation-delay: .15s; }
@keyframes modFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Gradient text — animate a slow shimmer on the gradient header words. */
.text-gradient,
.text-gradient-amber {
    background-size: 200% 100%;
    animation: modGradientShift 8s ease-in-out infinite;
}
@keyframes modGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Slim "ticker" travelling along workflow connector arrows where the page
   has them. Style is permissive — pages without these elements simply
   skip the rule. */
.wf-arrow::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .65;
    animation: modArrowFlow 2.6s ease-in-out infinite;
}
@keyframes modArrowFlow {
    0%   { left: 0;    opacity: 0; }
    20%  {             opacity: 1; }
    80%  {             opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SVG image animations — match the alive feel of RiskManagement's
   <animate>/<animateMotion> baked SVGs without per-page surgery. Targets
   the integration-hub diagram (.int-svg-wrap) and the hero illustration
   card (.hero-svg-card) that every module page renders.
   transform-box: fill-box pins the transform origin to each circle's own
   bounding box so .nth-of-type pulses individual nodes, not the whole
   SVG origin.
   ───────────────────────────────────────────────────────────────────── */

.int-svg-wrap svg circle,
.hero-svg-card svg circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: hubCirclePulse 3.2s ease-in-out infinite;
}
.int-svg-wrap svg circle:nth-of-type(2n),
.hero-svg-card svg circle:nth-of-type(2n) { animation-delay: .35s; }
.int-svg-wrap svg circle:nth-of-type(3n),
.hero-svg-card svg circle:nth-of-type(3n) { animation-delay: .7s;  }
.int-svg-wrap svg circle:nth-of-type(4n),
.hero-svg-card svg circle:nth-of-type(4n) { animation-delay: 1.05s;}
.int-svg-wrap svg circle:nth-of-type(5n),
.hero-svg-card svg circle:nth-of-type(5n) { animation-delay: 1.4s; }

@keyframes hubCirclePulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.05); opacity: .92; }
}

/* Connector lines: marching dashes give the impression of data flowing
   from satellite modules toward the central hub. Forces a stroke-dasharray
   so even SVGs that shipped without one animate too. */
.int-svg-wrap svg line,
.hero-svg-card svg line {
    stroke-dasharray: 4 3;
    animation: hubLineFlow 2.2s linear infinite;
}
@keyframes hubLineFlow {
    to { stroke-dashoffset: -14; }
}

/* Soft glow on the central hub label — picks the first <text> inside the
   integration SVG (which in every page is the centered "<MODULE NAME>"
   label of the hub). */
.int-svg-wrap svg text:first-of-type {
    animation: hubLabelGlow 4s ease-in-out infinite;
}
@keyframes hubLabelGlow {
    0%, 100% { opacity: 1;   filter: drop-shadow(0 0 0 currentColor); }
    50%      { opacity: .85; filter: drop-shadow(0 0 2px currentColor); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Hero background — mirrors RiskManagement.cshtml's .hero-wrap pattern.
   When a page wraps its <section class="module-hero"> in <div class="hero-wrap">
   with .bg-single (full-bleed image) + .bg-overlay-dark (purple/teal radial
   tint + vertical darken), the hero becomes dark with white text — which
   also makes the white-on-transparent nl-navbar readable (it was previously
   invisible against the converted pages' light gradient heroes).
   ───────────────────────────────────────────────────────────────────── */

.hero-wrap {
    position: relative;
    overflow: hidden;
}
.hero-wrap .bg-single {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.hero-wrap .bg-overlay-dark {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(139, 92, 246, .35), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(29, 210, 162, .25), transparent 48%),
        linear-gradient(180deg, rgba(12, 1, 34, .72) 0%, rgba(24, 4, 49, .84) 65%, rgba(12, 1, 34, .92) 100%);
    z-index: 1;
}
.hero-wrap > section,
.hero-wrap > .container { position: relative; z-index: 2; }

/* When a module-hero is inside a hero-wrap, kill its own light gradient and
   flip text colours to read on dark. Higher specificity than each page's
   inline ".module-hero { background: linear-gradient(...) }" because we add
   the .hero-wrap ancestor. */
.hero-wrap .module-hero {
    background: transparent;
}
.hero-wrap .module-hero::before { display: none; }     /* page-side radial blob */
.hero-wrap .module-hero h1 { color: #ffffff; }
.hero-wrap .module-hero .lead,
.hero-wrap .module-hero p { color: rgba(255, 255, 255, .82); }
.hero-wrap .module-hero .breadcrumb,
.hero-wrap .module-hero .breadcrumb a { color: rgba(255, 255, 255, .72); }
.hero-wrap .module-hero .breadcrumb a:hover { color: #fff; }
.hero-wrap .module-hero .badge,
.hero-wrap .module-hero .badge-mod {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}
.hero-wrap .module-hero .hero-svg-card {
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .55);
}

/* ─────────────────────────────────────────────────────────────────────────
   LEGO-block ecosystem diagram — replaces the radial circle hub on every
   non-Risk Solutions page. Each brick gently floats (staggered by row), the
   "studs" pulse, and the whole stack lifts on hover.
   ───────────────────────────────────────────────────────────────────── */

.module-lego { display: block; width: 100%; height: auto; }
.module-lego .lego-brick {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    cursor: default;
}
.module-lego .lego-brick rect { transition: filter .3s ease; }
.module-lego .lego-brick:hover { transform: translateY(-6px); }
.module-lego .lego-brick:hover rect { filter: brightness(1.08) drop-shadow(0 6px 10px rgba(0,0,0,.18)); }

.module-lego .lego-top    { animation: legoFloat 4.2s ease-in-out infinite; }
.module-lego .lego-r1-l   { animation: legoFloat 4.6s ease-in-out infinite .25s; }
.module-lego .lego-r1-r   { animation: legoFloat 4.6s ease-in-out infinite .55s; }
.module-lego .lego-r2-l   { animation: legoFloat 5.0s ease-in-out infinite .85s; }
.module-lego .lego-r2-c   { animation: legoFloat 5.0s ease-in-out infinite 1.1s; }
.module-lego .lego-r2-r   { animation: legoFloat 5.0s ease-in-out infinite 1.35s; }
.module-lego .lego-r3     { animation: legoFloat 5.4s ease-in-out infinite 1.6s; }

@keyframes legoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.module-lego .lego-stud {
    transform-box: fill-box;
    transform-origin: center;
    animation: legoStud 2.4s ease-in-out infinite;
}
.module-lego .lego-stud:nth-of-type(2n) { animation-delay: .3s; }
.module-lego .lego-stud:nth-of-type(3n) { animation-delay: .6s; }
.module-lego .lego-stud:nth-of-type(4n) { animation-delay: .9s; }
@keyframes legoStud {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .75; transform: scale(.92); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Universal subtle SVG motion — every icon-sized SVG inside cards, badges,
   buttons, breadcrumbs gets a small life on hover or while at rest. Tuned
   to "subtle" so the page never feels chaotic.
   ───────────────────────────────────────────────────────────────────── */

.feature-card svg,
.analytics-card svg,
.int-item svg,
.wf-stage svg,
.badge svg,
.badge-mod svg,
.btn svg,
.erm-btn svg,
.cta-actions svg,
.hero-actions svg,
.svg-card-header svg {
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.feature-card:hover svg,
.analytics-card:hover svg,
.int-item:hover svg,
.wf-stage:hover svg {
    transform: scale(1.08) rotate(2deg);
}
.btn:hover svg,
.erm-btn:hover svg,
.cta-actions a:hover svg,
.hero-actions a:hover svg {
    transform: translateX(3px);
}

/* Breadcrumb chevrons: gentle left/right nudge so the page feels alive */
.breadcrumb svg {
    animation: bcNudge 2.2s ease-in-out infinite;
}
@keyframes bcNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}

/* Hero-card SVG sub-elements (heat maps, charts) get a soft draw-in:
   any <rect> with a fill-opacity acts like a "candle" and pulses. */
.hero-svg-card svg rect[fill-opacity],
.hero-svg-card svg rect[opacity] {
    transform-box: fill-box;
    transform-origin: center;
    animation: heroRectPulse 3s ease-in-out infinite;
}
@keyframes heroRectPulse {
    0%, 100% { transform: scale(1);    opacity: 1;  }
    50%      { transform: scale(1.03); opacity: .9; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CSS 3D LEGO — per-page ecosystem visualisation. Six bricks arranged in
   a 1 + 2 + 3 pyramid: crown (the page's own module) on top, then the page's
   left-side ".integration-list" modules below, each tinted with the same
   colour they show in the list. Pure HTML/CSS — no three.js, no JS.

   Markup convention:
     <div class="module-lego-3d">
       <div class="lego-scene">
         <div class="lego-brick lego-crown" style="--c:#341E97; left:..; top:.."> ...
   ───────────────────────────────────────────────────────────────────── */

.module-lego-3d {
    position: absolute;
    inset: 0;
    perspective: 1600px;
    perspective-origin: 50% 35%;
    transform-style: preserve-3d;
    background: linear-gradient(180deg, rgba(15,23,42,.04) 0%, transparent 60%);
}
.module-lego-3d .lego-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(16deg) rotateY(-12deg);
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.module-lego-3d:hover .lego-scene {
    transform: rotateX(12deg) rotateY(-18deg);
}
.module-lego-3d .lego-brick {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

/* Side face — sits "behind" the top face on the Z axis, darkened to fake
   the bulk of the brick. */
.module-lego-3d .lego-brick .face-side {
    position: absolute;
    inset: 0;
    background: var(--c);
    filter: brightness(.6);
    border-radius: 10px;
}

/* Top face — the visible LEGO surface carrying the label. translateZ pushes
   it forward of the side face. */
.module-lego-3d .lego-brick .face-top {
    position: absolute;
    inset: 0;
    background: var(--c);
    border-radius: 10px;
    transform: translateZ(22px);
    box-shadow:
        inset 0 -6px 0 rgba(0,0,0,.22),
        inset 0 2px 0 rgba(255,255,255,.28),
        0 10px 20px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(11px, 1.05vw, 14px);
    text-align: center;
    line-height: 1.15;
    padding: 0 12px;
}

/* Studs — small circles on top of the brick, just above the top face. */
.module-lego-3d .lego-brick .stud {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c);
    filter: brightness(1.18);
    top: -8px;
    transform: translateZ(34px);
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,.22),
        inset 0 2px 0 rgba(255,255,255,.35),
        0 1px 2px rgba(0,0,0,.18);
}

/* Crown brick = bigger, slightly more prominent. */
.module-lego-3d .lego-brick.lego-crown .face-top {
    font-size: clamp(13px, 1.4vw, 18px);
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.module-lego-3d .lego-brick.lego-crown .stud {
    width: 22px;
    height: 22px;
    top: -11px;
    transform: translateZ(40px);
}

/* Hover: each brick lifts independently. */
.module-lego-3d .lego-brick:hover {
    transform: translateY(-6px) translateZ(8px);
}

/* Gentle resting float, staggered. */
@keyframes lego3dFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.module-lego-3d .lego-brick { animation: lego3dFloat 4.5s ease-in-out infinite; }
.module-lego-3d .lego-brick.lego-crown { animation-duration: 4.2s; animation-delay: 0s;  }
.module-lego-3d .lego-brick.lego-m1    { animation-duration: 4.6s; animation-delay: .3s; }
.module-lego-3d .lego-brick.lego-m2    { animation-duration: 4.6s; animation-delay: .6s; }
.module-lego-3d .lego-brick.lego-b1    { animation-duration: 5.0s; animation-delay: .9s; }
.module-lego-3d .lego-brick.lego-b2    { animation-duration: 5.0s; animation-delay: 1.2s;}
.module-lego-3d .lego-brick.lego-b3    { animation-duration: 5.0s; animation-delay: 1.5s;}

/* Respect the user's OS-level "reduce motion" preference — disables every
   animation we just declared. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
}