/* ==========================================================================
   SITE-WIDE MOTION (classes set by tbtk-site-motion.js)

   Same language as the home page and the AI Automation page: content rises
   in as it scrolls into view, cards lift 4px with a soft blue glow, and a
   card's icon tilts and lights up on the toolkit rail's overshooting curve
   (tbtk-icon-tile-fx.css). Lifts use the `translate` property, not
   `transform`, so they never fight GSAP or a card's own transform.
   ========================================================================== */

/* ---- Scroll reveal ------------------------------------------------------ */
.tk-m-reveal.tk-m-hidden {
    opacity: 0;
    translate: 0 26px;
}

.tk-m-reveal.tk-m-hidden.is-in {
    opacity: 1;
    translate: 0 0;
    transition:
        opacity .7s cubic-bezier(.19, 1, .22, 1) var(--tk-m-delay, 0ms),
        translate .8s cubic-bezier(.19, 1, .22, 1) var(--tk-m-delay, 0ms);
}

/* ---- Cards: lift + glow -------------------------------------------------- */
/* At rest each card carries the AI Automation page's look in its own hue
   (--tk-m-hue, set per card by the script): a 2px accent line along the
   top edge, a faint coloured edge and glow, and, on cards without a
   background image of their own, a corner shade. Several page sheets set
   these cards' shadow with !important, hence the !important and the two
   :not(#id) clauses that only raise specificity; the reveal and tap glows
   animate `filter` so they still run on top. */
.tk-m-card:not(#tk-m-a):not(#tk-m-b) {
    box-shadow:
        inset 0 2px 0 rgba(var(--tk-m-hue, 0, 115, 252), .55),
        0 0 0 1px rgba(var(--tk-m-hue, 0, 115, 252), .16),
        0 14px 32px rgba(0, 0, 0, .3),
        0 8px 26px rgba(var(--tk-m-hue, 0, 115, 252), .08) !important;
    transition:
        translate .32s cubic-bezier(.34, 1.5, .64, 1),
        box-shadow .3s ease,
        filter .3s ease;
}

.tk-m-card.tk-m-tint:not(#tk-m-a):not(#tk-m-b) {
    background-image: radial-gradient(circle at 100% 0%, rgba(var(--tk-m-hue, 0, 115, 252), .12), transparent 52%) !important;
}

html[data-tk-theme="light"] .tk-m-card:not(#tk-m-a):not(#tk-m-b) {
    box-shadow:
        inset 0 2px 0 rgba(var(--tk-m-hue, 0, 115, 252), .5),
        0 0 0 1px rgba(var(--tk-m-hue, 0, 115, 252), .14),
        0 8px 22px rgba(15, 23, 42, .08),
        0 6px 20px rgba(var(--tk-m-hue, 0, 115, 252), .07) !important;
}

html[data-tk-theme="light"] .tk-m-card.tk-m-tint:not(#tk-m-a):not(#tk-m-b) {
    background-image: radial-gradient(circle at 100% 0%, rgba(var(--tk-m-hue, 0, 115, 252), .08), transparent 52%) !important;
}

.tk-m-card:not(#tk-m-a):not(#tk-m-b):hover,
.tk-m-card:not(#tk-m-a):not(#tk-m-b):focus-within {
    box-shadow:
        inset 0 2px 0 rgba(var(--tk-m-hue, 0, 115, 252), .9),
        0 0 0 1px rgba(var(--tk-m-hue, 0, 115, 252), .5),
        0 22px 48px rgba(0, 0, 0, .4),
        0 10px 32px rgba(var(--tk-m-hue, 0, 115, 252), .2) !important;
    translate: 0 -4px !important;
}

html[data-tk-theme="light"] .tk-m-card:not(#tk-m-a):not(#tk-m-b):hover,
html[data-tk-theme="light"] .tk-m-card:not(#tk-m-a):not(#tk-m-b):focus-within {
    box-shadow:
        inset 0 2px 0 rgba(var(--tk-m-hue, 0, 115, 252), .9),
        0 0 0 1px rgba(var(--tk-m-hue, 0, 115, 252), .4),
        0 16px 34px rgba(15, 23, 42, .12),
        0 8px 24px rgba(var(--tk-m-hue, 0, 115, 252), .14) !important;
}

/* ---- Card icons: glow in the card's hue, tilt on hover / tap ------------- */
.tk-m-icon {
    filter: drop-shadow(0 0 6px rgba(var(--tk-m-hue, 0, 115, 252), .45));
    transition:
        transform .32s cubic-bezier(.34, 1.5, .64, 1),
        filter .32s cubic-bezier(.19, 1, .22, 1);
}

.tk-m-card:hover .tk-m-icon,
.tk-m-card:focus-within .tk-m-icon {
    filter: drop-shadow(0 0 12px rgba(var(--tk-m-hue, 0, 115, 252), .75));
    transform: translateY(-2px) rotate(-6deg) scale(1.1);
}

/* ---- Headings: gradient fill ---------------------------------------------- */
.tk-m-heading {
    background: linear-gradient(92deg, currentColor 0%, currentColor 48%, #7FB9FF 82%, #5FF3BD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-tk-theme="light"] .tk-m-heading {
    background-image: linear-gradient(92deg, currentColor 0%, currentColor 48%, #005BC7 82%, #0B7A55 100%);
}

/* ---- Buttons: lift, glow in the button's own colour, press, shine ------ */
.tk-m-btn {
    transition:
        translate .28s cubic-bezier(.34, 1.5, .64, 1),
        scale .14s ease,
        filter .25s ease;
}

.tk-m-btn:hover,
.tk-m-btn:focus-visible {
    filter: brightness(1.08) drop-shadow(0 8px 16px var(--tk-m-glow, rgba(0, 115, 252, .4)));
    translate: 0 -2px !important;
}

.tk-m-btn:active {
    scale: .96;
    translate: 0 0 !important;
}

.tk-m-shine {
    overflow: hidden;
    position: relative;
}

.tk-m-shine::after {
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    translate: -120% 0;
}

.tk-m-shine:hover::after,
.tk-m-shine:focus-visible::after {
    transition: translate .7s cubic-bezier(.19, 1, .22, 1);
    translate: 120% 0;
}

/* ---- Numbered steps: pop in, then one ring pulse ------------------------- */
.tk-m-step.tk-m-pop {
    opacity: 0;
    scale: .4;
}

.tk-m-step.tk-m-pop.is-in {
    animation: tk-m-ring 1.2s ease-out calc(var(--tk-m-pop-delay, 120ms) + .25s) 1;
    opacity: 1;
    scale: 1;
    transition:
        opacity .4s ease var(--tk-m-pop-delay, 120ms),
        scale .6s cubic-bezier(.34, 1.7, .64, 1) var(--tk-m-pop-delay, 120ms);
}

.tk-m-step {
    transition: scale .3s cubic-bezier(.34, 1.7, .64, 1);
}

*:hover > .tk-m-step,
.tk-m-card:hover .tk-m-step {
    scale: 1.1;
}

@keyframes tk-m-ring {
    0% { box-shadow: 0 0 0 0 rgba(0, 115, 252, .55); }
    100% { box-shadow: 0 0 0 16px rgba(0, 115, 252, 0); }
}

/* ---- Tabs and toggles --------------------------------------------------- */
.tk-m-tab {
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        scale .15s ease,
        translate .25s cubic-bezier(.34, 1.5, .64, 1);
}

.tk-m-tab:hover {
    translate: 0 -1px;
}

.tk-m-tab:active {
    scale: .95;
}

/* the panel a tab just revealed slides up into place */
.tk-m-panel-in {
    animation: tk-m-panel-in .55s cubic-bezier(.19, 1, .22, 1) both;
}

@keyframes tk-m-panel-in {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}

/* ---- Tap: press plus a ring of colour spreading out ----------------------- */
.tk-m-card:active {
    scale: .985;
}

.tk-m-tap {
    animation: tk-m-spread .65s ease-out 1;
}

.tk-m-card.tk-m-tap {
    animation: tk-m-spread-glow .65s ease-out 1;
}

@keyframes tk-m-spread-glow {
    0% { filter: drop-shadow(0 0 0 rgba(var(--tk-m-hue, 0, 115, 252), .7)); }
    40% { filter: drop-shadow(0 0 14px rgba(var(--tk-m-hue, 0, 115, 252), .6)); }
    100% { filter: drop-shadow(0 0 0 rgba(var(--tk-m-hue, 0, 115, 252), 0)); }
}

@keyframes tk-m-spread {
    0% { box-shadow: 0 0 0 0 var(--tk-m-glow, rgba(0, 115, 252, .5)); }
    100% { box-shadow: 0 0 0 18px rgba(0, 115, 252, 0); }
}

/* ---- Touch screens: each card / button plays its hover once in view ----- */
@media (hover: none) {
    .tk-m-card.tk-m-glint {
        animation: tk-m-glint 1.1s ease-out 1;
    }

    .tk-m-glint .tk-m-icon {
        animation: tk-m-icon-pop .9s cubic-bezier(.34, 1.5, .64, 1) .15s 1;
    }

    .tk-m-btn.tk-m-glint.tk-m-shine::after {
        animation: tk-m-shine 1.1s cubic-bezier(.19, 1, .22, 1) .2s 1;
    }

    .tk-m-btn.tk-m-glint:not(.tk-m-shine) {
        animation: tk-m-spread 1s ease-out .2s 1;
    }

    html .tk-m-card:active,
    html .tk-m-card.tk-m-tap {
        filter: drop-shadow(0 10px 18px rgba(var(--tk-m-hue, 0, 115, 252), .28));
    }

    .tk-m-card.tk-m-tap .tk-m-icon {
        filter: drop-shadow(0 0 12px rgba(var(--tk-m-hue, 0, 115, 252), .75));
        transform: translateY(-2px) rotate(-6deg) scale(1.1);
    }

    .tk-m-btn:active {
        filter: brightness(1.1) drop-shadow(0 6px 14px var(--tk-m-glow, rgba(0, 115, 252, .4)));
    }
}

@keyframes tk-m-glint {
    40% { filter: drop-shadow(0 0 1px rgba(var(--tk-m-hue, 0, 115, 252), .9)) drop-shadow(0 12px 26px rgba(var(--tk-m-hue, 0, 115, 252), .45)); }
}

@keyframes tk-m-icon-pop {
    0% { transform: none; }
    45% { transform: translateY(-3px) rotate(-8deg) scale(1.15); filter: drop-shadow(0 0 14px rgba(var(--tk-m-hue, 0, 115, 252), .8)); }
    100% { transform: none; }
}

@keyframes tk-m-shine {
    from { translate: -120% 0; }
    to { translate: 120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-m-panel-in,
    .tk-m-tap,
    .tk-m-glint,
    .tk-m-glint .tk-m-icon,
    .tk-m-glint::after {
        animation: none !important;
    }

    .tk-m-tab {
        transition: none;
    }

    .tk-m-btn,
    .tk-m-step {
        transition: none;
    }

    .tk-m-btn:hover,
    .tk-m-btn:focus-visible,
    .tk-m-btn:active {
        scale: none;
        translate: none !important;
    }

    .tk-m-shine::after {
        display: none;
    }

    .tk-m-reveal.tk-m-hidden {
        opacity: 1;
        translate: none;
    }

    .tk-m-card,
    .tk-m-icon {
        transition: none;
    }

    .tk-m-card:hover,
    .tk-m-card:focus-within {
        translate: none !important;
    }

    .tk-m-card:hover .tk-m-icon,
    .tk-m-card:focus-within .tk-m-icon {
        transform: none;
    }
}

/* Touch screens: no hover, so no lift that sticks after a tap. */
@media (hover: none) {
    .tk-m-card:hover,
    .tk-m-card:focus-within {
        filter: none;
        translate: none !important;
    }

    .tk-m-btn:hover:not(:active) {
        filter: none;
        translate: none !important;
    }
}

/* ---- Icon tiles (lead icons of step / feature blocks) ---------------------
   The AI Automation page's icon tile, in the block's hue: a rounded square
   with a soft gradient, a coloured edge and glow. Font icons take the hue;
   image icons keep their own colours inside the tile. It pops in once as it
   scrolls into view and tilts with a stronger glow when its block is
   hovered or tapped. */
.tk-m-tile:not(#tk-m-a) {
    align-items: center;
    background: linear-gradient(145deg, rgba(var(--tk-m-hue, 0, 115, 252), .26), rgba(var(--tk-m-hue, 0, 115, 252), .06));
    border: 1px solid rgba(var(--tk-m-hue, 0, 115, 252), .42);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 18px rgba(var(--tk-m-hue, 0, 115, 252), .28);
    box-sizing: border-box;
    color: rgb(var(--tk-m-hue, 0, 115, 252)) !important;
    display: inline-flex;
    font-size: 20px !important;
    height: 50px !important;
    justify-content: center;
    line-height: 1 !important;
    object-fit: contain;
    padding: 12px !important;
    transition:
        transform .32s cubic-bezier(.34, 1.5, .64, 1),
        box-shadow .32s cubic-bezier(.19, 1, .22, 1);
    width: 50px !important;
}

i.tk-m-tile:not(#tk-m-a) {
    padding: 0 !important;
}

html[data-tk-theme="light"] .tk-m-tile:not(#tk-m-a) {
    background: linear-gradient(145deg, rgba(var(--tk-m-hue, 0, 115, 252), .16), rgba(var(--tk-m-hue, 0, 115, 252), .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 14px rgba(var(--tk-m-hue, 0, 115, 252), .18);
    filter: saturate(1.15) brightness(.85);
}

.tk-m-block:hover .tk-m-tile,
.tk-m-card:hover .tk-m-tile,
.tk-m-block.tk-m-tap .tk-m-tile,
.tk-m-card.tk-m-tap .tk-m-tile {
    box-shadow: inset 0 0 0 2px rgba(var(--tk-m-hue, 0, 115, 252), .9), 0 0 22px rgba(var(--tk-m-hue, 0, 115, 252), .5), 0 8px 22px rgba(var(--tk-m-hue, 0, 115, 252), .3);
    transform: translateY(-3px) rotate(-6deg) scale(1.08);
}

.tk-m-tile.tk-m-glint {
    animation: tk-m-tile-pop .9s cubic-bezier(.34, 1.5, .64, 1) 1;
}

@keyframes tk-m-tile-pop {
    0% { opacity: .3; transform: scale(.6) rotate(-12deg); }
    55% { opacity: 1; transform: scale(1.12) rotate(4deg); box-shadow: 0 0 26px rgba(var(--tk-m-hue, 0, 115, 252), .6); }
    100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-m-tile:not(#tk-m-a) {
        transition: none;
    }

    .tk-m-tile.tk-m-glint {
        animation: none;
    }
}

/* an icon that sat on its own line above its title stays there */
.tk-m-tile.tk-m-tile-block:not(#tk-m-a),
.tk-m-tile.tk-m-tile-center:not(#tk-m-a) {
    display: flex;
    margin-bottom: 14px;
}

.tk-m-tile.tk-m-tile-center:not(#tk-m-a) {
    margin-left: auto;
    margin-right: auto;
}

/* an icon wrapper the page already designed as a tile keeps its look and
   gains the hue edge, glow and the same motion */
.tk-m-tile-soft:not(#tk-m-a) {
    border-color: rgba(var(--tk-m-hue, 0, 115, 252), .45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 18px rgba(var(--tk-m-hue, 0, 115, 252), .3) !important;
    transition:
        transform .32s cubic-bezier(.34, 1.5, .64, 1),
        box-shadow .32s cubic-bezier(.19, 1, .22, 1);
}

.tk-m-block:hover .tk-m-tile-soft,
.tk-m-card:hover .tk-m-tile-soft,
.tk-m-block.tk-m-tap .tk-m-tile-soft,
.tk-m-card.tk-m-tap .tk-m-tile-soft {
    box-shadow: inset 0 0 0 2px rgba(var(--tk-m-hue, 0, 115, 252), .9), 0 0 22px rgba(var(--tk-m-hue, 0, 115, 252), .5) !important;
    transform: translateY(-3px) rotate(-6deg) scale(1.08);
}

.tk-m-tile-soft.tk-m-glint {
    animation: tk-m-tile-pop .9s cubic-bezier(.34, 1.5, .64, 1) 1;
}