/* Custom fix for hero title visibility */
.hero-title span {
    color: #ffffff !important;
}

/* ============================================================
   Moving border CTA — all pages
   Two colours only: white #ffffff + theme orange #fa821d.
   Double-background technique keeps border-radius intact
   (border-image would flatten the 44px pill).
   ============================================================ */

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

@keyframes cta-rotate {
    to {
        --cta-angle: 360deg;
    }
}

/* .button-icon-link.cta-spin = specificity tie-break vs theme rules */
.button-icon-link.cta-spin {
    --cta-angle: 0deg;

    /* keep 2px width/style from theme, drop solid colour */
    border-color: transparent;
    color: #fff;
    box-shadow: none;

    background:
        /* inner fill matches dark section behind button */
        linear-gradient(#0c0c0c, #0c0c0c) padding-box,
        /* rotating white/orange sweep painted in border ring only */
        conic-gradient(from var(--cta-angle),
            #ffffff 0deg,
            #fa821d 90deg,
            #ffffff 180deg,
            #fa821d 270deg,
            #ffffff 360deg) border-box;

    animation: cta-rotate 4s linear infinite;
}

/* ------------------------------------------------------------
   CRISP HOVER — fix arrow blur.
   Theme uses `transition: all` + `filter: invert()` on hover:
   filter animation rasterises glyph mid-flight = blur.
   Narrow to transform only, promote own layer, no filters.
   ------------------------------------------------------------ */

.button-icon-link.cta-spin .icon-wrap-scale {
    /* was `all` — caught filter/shadow/padding, caused blur */
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    /* own compositor layer: scale() animates without glyph repaint */
    will-change: transform;
}

/* icon dot: ALWAYS white circle + orange arrow.
   No colour swap on hover = nothing re-rasterises,
   and white never blends with orange fill or ring. */
.button-icon-link.cta-spin .button-icon,
.button-icon-link.cta-spin:hover .button-icon {
    background-color: #fff;
    color: #fa821d;
    -webkit-font-smoothing: antialiased;
}

/* theme flips text via animated invert() filter -> flicker/blur.
   Replace with instant solid colour: black on orange fill. */
.button-icon-link.cta-spin:hover .button-text span {
    filter: none;
    -webkit-filter: none;
    color: #000;
}

.button-icon-link.cta-spin:hover {
    background:
        linear-gradient(#fa821d, #fa821d) padding-box,
        conic-gradient(from var(--cta-angle),
            #ffffff 0deg,
            #fa821d 90deg,
            #ffffff 180deg,
            #fa821d 270deg,
            #ffffff 360deg) border-box;
    background-color: transparent;
    border-color: transparent;
}

/* accessibility: no spin if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .button-icon-link.cta-spin {
        animation: none;
    }
}

/* ============================================================
   Magic cursor fixes
   ============================================================ */

/* preloader div stays in DOM after load as invisible full-screen
   layer - its data-centerLine="Loading" handler kept firing into
   the cursor ball on every mouse move. Dead unless actually loading. */
body:not(.show-loader) .preloader-wrap {
    pointer-events: none;
}

/* hide magic cursor over CTA buttons - toggled by common.js */
body.cta-hover #magic-cursor {
    opacity: 0 !important;
}

/* ============================================================
   Glass chips — "How We Work" points (home page)
   Frosted pill + looping diagonal shine sweep.
   Palette: white glass on dark, orange only as faint tint.
   ============================================================ */

.glass-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.9em;
    padding: 0;
    margin: 0 0 2.2em;
}

.glass-chip {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* keep shine pseudo inside its own stack */
    padding: 0.75em 1.6em;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.04) 55%,
            rgba(250, 130, 29, 0.06));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.35);
}

/* the shine: skewed white streak sweeping left -> right */
.glass-chip::before {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -80%;
    width: 55%;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.38),
        rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    animation: chip-shine 3.8s cubic-bezier(.4, 0, .2, 1) infinite;
    pointer-events: none;
}

/* stagger so chips don't flash in unison */
.glass-chip:nth-child(2)::before { animation-delay: 0.55s; }
.glass-chip:nth-child(3)::before { animation-delay: 1.1s; }

@keyframes chip-shine {
    0%       { left: -80%; }
    45%,100% { left: 160%; }
}

@media (prefers-reduced-motion: reduce) {
    .glass-chip::before {
        animation: none;
        opacity: 0;
    }
}