/* Styles for the React islands (see islands/). Loaded only on the pages that mount them. */

/* Title (BlurText) and "+100" (CountUp): the static text is never hidden. As soon as the page paints, a
   short CSS blur-in plays on the whole element. If the script arrives during the first instants of that
   animation, React replaces it with the word-by-word version; if it arrives later, the CSS animation simply
   finishes and the text stays as it is (see main.tsx). Without JavaScript nothing happens at all. */
.js [data-island="blur-text"]:not(.is-mounted),.js [data-island="count-up"]:not(.is-mounted){animation:island-in .7s cubic-bezier(.22,1,.36,1) both}
@keyframes island-in{from{opacity:0;filter:blur(6px);transform:translateY(-6px)}to{opacity:1;filter:blur(0);transform:none}}
@media(prefers-reduced-motion:reduce){.js [data-island="blur-text"]:not(.is-mounted),.js [data-island="count-up"]:not(.is-mounted){animation:none}}
[data-island="blur-text"].is-mounted{overflow:visible}

/* Expertise cards (SpotlightCard): keep the existing card layout, add the light halo layer. */
.card-spotlight{position:relative;overflow:hidden;--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(173,190,211,.22)}
.card-spotlight::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 280px at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 100%);opacity:0;transition:opacity .5s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){.card-spotlight:hover::before,.card-spotlight:focus-within::before{opacity:.7}}
.card-spotlight>*{position:relative}

/* Call to action label (ShinyText) */
.shiny-text{display:inline-block}

/* Threads background behind the navy expertise section: desktop only, very low opacity. */
.expertise-open{position:relative}
.expertise-open>.wrap{position:relative;z-index:1}
.expertise-threads{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.expertise-threads.is-mounted{opacity:.38}
.expertise-threads canvas{display:block;width:100%;height:100%}
.threads-container{position:absolute;inset:0;width:100%;height:100%}