/* ---------- 1. Scroll reveal (drives the existing data-reveal/data-delay attributes) ---------- */
html.tkba-ready [data-reveal]{
  opacity:0;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
html.tkba-ready [data-reveal="up"]   {transform:translate3d(0,26px,0)}
html.tkba-ready [data-reveal="zoom"] {transform:scale(.94)}
html.tkba-ready [data-reveal="left"] {transform:translate3d(-32px,0,0)}
html.tkba-ready [data-reveal="right"]{transform:translate3d(32px,0,0)}
html.tkba-ready [data-reveal].tkba-in{opacity:1;transform:none}

/* ---------- 2. Hero entrance (staggered, fires on load) ---------- */
/* scoped to .tkb-hero on purpose: if the quote card is ever moved out of the
   banner, an unscoped hide rule would leave it invisible for good, because the
   matching reveal rule below only fires on .tkb-hero.tkba-armed */
html.tkba-ready .tkb-hero-copy > *,
html.tkba-ready .tkb-hero .tkb-quote-card{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-copy > *,
html.tkba-ready .tkb-hero.tkba-armed .tkb-quote-card{opacity:1;transform:none}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-copy > *:nth-child(1){transition-delay:.05s}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-copy > *:nth-child(2){transition-delay:.14s}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-copy > *:nth-child(3){transition-delay:.23s}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-copy > *:nth-child(4){transition-delay:.32s}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-copy > *:nth-child(5){transition-delay:.41s}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-copy > *:nth-child(6){transition-delay:.50s}
html.tkba-ready .tkb-hero.tkba-armed .tkb-quote-card{transition-delay:.30s}

/* ---------- 3. Headline ink sweep (the pool site's "pill" effect, restyled) ---------- */
/* Uses currentColor so it can never clash with the brand palette.
   Swap `background:currentColor` for your brand blue if you want it louder. */
html.tkba-ready .tkb-hero-h1 .tkba-ink{position:relative;display:inline-block}
html.tkba-ready .tkb-hero-h1 .tkba-ink::after{
  content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.11em;
  background:currentColor;opacity:.5;border-radius:99px;
  transform:scaleX(0);transform-origin:left center;
}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-h1 .tkba-ink::after{
  animation:tkbaInk .9s cubic-bezier(.33,1,.68,1) var(--tkba-ink-delay,.62s) both;
}
@keyframes tkbaInk{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 4. Ambient hero drift (slow ken-burns behind the copy) ---------- */
html.tkba-ready .tkb-hero-bg img,
html.tkba-ready .tkb-hero-bg video{
  animation:tkbaDrift 28s ease-in-out infinite alternate;
}
@keyframes tkbaDrift{
  from{transform:scale(1.02) translate3d(-.8%,-.6%,0)}
  to  {transform:scale(1.09) translate3d(.8%,.6%,0)}
}

/* ---------- 5. Star shimmer ---------- */
html.tkba-ready .tkb-stars,
html.tkba-ready .reviews .stars{animation:tkbaStar 3.4s ease-in-out infinite}
@keyframes tkbaStar{0%,100%{opacity:.82}50%{opacity:1;text-shadow:0 0 10px currentColor}}

/* ---------- 6. Ticker marquee ---------- */
/* Layout is NOT gated on the motion layer: the track holds two duplicate spans,
   so without flex/max-content it wraps and shows the strip twice. */
.tkb-ticker{overflow:hidden}
.tkb-ticker-track{display:flex;width:max-content}
html.tkba-ready .tkb-ticker-track{animation:tkbaTicker 34s linear infinite}
html.tkba-ready .tkb-ticker:hover .tkb-ticker-track{animation-play-state:paused}
@keyframes tkbaTicker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- 7. Count-up numbers ---------- */
html.tkba-ready .pb > b.tkba-count,
html.tkba-ready .rating.tkba-count{font-variant-numeric:tabular-nums}

/* ---------- 8. Hover life on cards, tiles and buttons ---------- */
html.tkba-ready .svc-group,
html.tkba-ready .steps li,
html.tkba-ready .rev-grid > *{transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease}
html.tkba-ready .svc-group:hover,
html.tkba-ready .steps li:hover,
html.tkba-ready .rev-grid > *:hover{transform:translateY(-5px)}

html.tkba-ready .grid-work figure{overflow:hidden}
html.tkba-ready .grid-work figure img{transition:transform .65s cubic-bezier(.22,.61,.36,1)}
html.tkba-ready .grid-work figure:hover img{transform:scale(1.06)}

html.tkba-ready .tkb-btn{transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease}
html.tkba-ready .tkb-btn:hover{transform:translateY(-2px)}
html.tkba-ready .tkb-btn:active{transform:translateY(0)}

html.tkba-ready .ar-list li{transition:transform .25s ease, color .25s ease}
html.tkba-ready .ar-list li:hover{transform:translateX(4px)}

/* ---------- 10. AMBIENT BANNER MOTION -------------------------------------
   Ref: svgator.com "6. Ambient Background Motion" - subtle gradients, particles
   and liquid flow that add depth without competing with the copy. Read across
   to this brand as water: drifting light pools, caustic ripple, rising bubbles.
   Every layer is pointer-events:none and sits UNDER the hero copy (z-index 2). */
html.tkba-ready .tkb-hero{position:relative}
html.tkba-ready .tkb-hero > .tkb-wrap{position:relative;z-index:2}

html.tkba-ready .tkba-amb{
  position:absolute;inset:0;z-index:1;
  overflow:hidden;pointer-events:none;
  contain:paint;
}

/* Drifting light pools */
html.tkba-ready .tkba-amb-blob{
  position:absolute;border-radius:50%;
  mix-blend-mode:screen;filter:blur(44px);
  will-change:transform;
}
html.tkba-ready .tkba-b1{
  width:44vw;height:44vw;max-width:620px;max-height:620px;left:-9vw;top:-13vw;
  background:radial-gradient(circle at 50% 50%, rgba(96,178,255,.55), rgba(96,178,255,0) 68%);
  animation:tkbaAmbA 34s ease-in-out infinite alternate;
}
html.tkba-ready .tkba-b2{
  width:36vw;height:36vw;max-width:520px;max-height:520px;right:-7vw;top:6vw;
  background:radial-gradient(circle at 50% 50%, rgba(128,232,255,.42), rgba(128,232,255,0) 70%);
  animation:tkbaAmbB 46s ease-in-out infinite alternate;
}
 
@keyframes tkbaAmbA{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(5%,4%,0) scale(1.14)}}
@keyframes tkbaAmbB{from{transform:translate3d(4%,3%,0) scale(1.08)}to{transform:translate3d(-4%,-3%,0) scale(.96)}}
@keyframes tkbaAmbC{from{transform:translate3d(2%,3%,0) scale(.98)}to{transform:translate3d(-5%,-4%,0) scale(1.12)}}

/* Liquid flow: two crossing wave grids drifting = caustics on water */
html.tkba-ready .tkba-amb-caustic{
  position:absolute;inset:-26% -16%;
  mix-blend-mode:screen;opacity:.11;filter:blur(17px);
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0) 0 96px, rgba(196,232,255,.50) 96px 132px, rgba(255,255,255,0) 132px 228px),
    repeating-linear-gradient(58deg,  rgba(255,255,255,0) 0 118px, rgba(162,216,255,.38) 118px 150px, rgba(255,255,255,0) 150px 272px),
    repeating-linear-gradient(8deg,   rgba(255,255,255,0) 0 164px, rgba(210,240,255,.22) 164px 196px, rgba(255,255,255,0) 196px 348px);
  animation:tkbaCaustic 38s linear infinite;
  will-change:transform;
}
@keyframes tkbaCaustic{from{transform:translate3d(0,0,0)}to{transform:translate3d(-228px,114px,0)}}

/* Particles: slow rising bubbles (size/left/duration/delay set inline by JS) */
html.tkba-ready .tkba-amb-bub{
  position:absolute;bottom:-6%;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.20) 54%, rgba(255,255,255,0) 70%);
  box-shadow:inset 0 0 0 1px rgba(214,240,255,.30);
  animation-name:tkbaBub;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform,opacity;
}
@keyframes tkbaBub{
  0%  {opacity:0;   transform:translate3d(0,0,0) scale(.5)}
  10% {opacity:.62}
  55% {opacity:.5   }
  85% {opacity:.22}
  100%{opacity:0;   transform:translate3d(26px,-118%,0) scale(1.05)}
}

/* Banner headline: words rise in, then the ink sweep runs underneath */
html.tkba-ready .tkb-hero-h1.tkba-split{opacity:1!important;transform:none!important;transition:none!important}
html.tkba-ready .tkb-hero-h1.tkba-split .tkba-w{
  display:inline-block;opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}
html.tkba-ready .tkb-hero.tkba-armed .tkb-hero-h1.tkba-split .tkba-w{opacity:1;transform:none}

/* Trim the ambient layer back on small screens and low-power devices */
@media (max-width:781px){
  html.tkba-ready .tkba-amb-blob{filter:blur(30px);opacity:.7}
  html.tkba-ready .tkba-amb-caustic{opacity:.10}
}

/* ---------- 9. Accessibility: honour reduced motion, and never trap content ---------- */
@media (prefers-reduced-motion: reduce){
  html.tkba-ready [data-reveal],
  html.tkba-ready .tkb-hero-copy > *,
  html.tkba-ready .tkb-hero .tkb-quote-card{opacity:1!important;transform:none!important;transition:none!important}
  html.tkba-ready .tkb-hero-bg img,
  html.tkba-ready .tkb-hero-bg video,
  html.tkba-ready .tkb-stars,
  html.tkba-ready .reviews .stars,
  html.tkba-ready .tkb-ticker-track,
  html.tkba-ready .tkb-hero-h1 .tkba-ink::after{animation:none!important}
  html.tkba-ready .tkb-hero-h1 .tkba-ink::after{transform:scaleX(1)}
  html.tkba-ready .tkba-amb{display:none!important}
  html.tkba-ready .tkb-hero-h1.tkba-split .tkba-w{opacity:1!important;transform:none!important;transition:none!important}
}