/* ==========================================================================
   KayBeeVending — motion layer
   Loaded after every other stylesheet. Everything here is opt-in through
   html.kb-motion, which a tiny inline script in <head> sets only when the
   visitor has NOT asked their device for reduced motion. Without that class
   (or without JavaScript) the page looks exactly as it did before.
   Only opacity / translate / scale / rotate / clip-path are animated, so the
   existing transform rules (many marked !important) are never fought with.
   ========================================================================== */

:root{
  --kb-ease-out:cubic-bezier(.16,1,.3,1);
  --kb-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --kb-teal:#1177a4;
  --kb-teal-2:#0c8abb;
  --kb-ink:#071b45;
}

/* ---------- Keyframes ---------- */
@keyframes kbNavIn{from{opacity:0;translate:0 -100%}}
@keyframes kbFadeDown{from{opacity:0;translate:0 -10px}}
@keyframes kbRollIn{
  0%{opacity:0;translate:-34px 0;rotate:-10deg}
  60%{opacity:1;rotate:4deg}
  100%{translate:0 0;rotate:0deg}
}
@keyframes kbHeroSettle{from{opacity:0;scale:1.08}}
@keyframes kbRiseSpring{from{opacity:0;translate:0 30px}}
@keyframes kbRise{from{opacity:0;translate:0 32px}}
@keyframes kbFromLeft{from{opacity:0;translate:-36px 0}}
@keyframes kbFromRight{from{opacity:0;translate:36px 0}}
@keyframes kbZoomIn{from{opacity:0;scale:.94}}
@keyframes kbCardIn{from{opacity:0;translate:0 40px;scale:.96}}
@keyframes kbPop{from{opacity:0;scale:.4;translate:0 10px}}
@keyframes kbEyebrow{from{opacity:0;letter-spacing:.42em}}
@keyframes kbWord{from{opacity:0;translate:0 .5em;filter:blur(6px)}}
@keyframes kbBeat{
  0%{opacity:0;translate:0 -.6em;scale:1.25}
  55%{opacity:1;translate:0 .06em;scale:.96}
  100%{translate:0 0;scale:1}
}
@keyframes kbBadgePop{
  0%{scale:0;rotate:-120deg}
  70%{scale:1.15;rotate:8deg}
  100%{scale:1;rotate:0deg}
}
@keyframes kbRipple{
  from{opacity:.75;scale:1}
  to{opacity:0;scale:2.4}
}
@keyframes kbUnveil{
  from{opacity:0;clip-path:inset(9% 7% 9% 7% round 28px);scale:1.05}
  to{opacity:1;clip-path:inset(0 0 0 0 round 0);scale:1}
}
@keyframes kbSwap{from{opacity:.15;scale:1.045}}
@keyframes kbThumbProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kbFaqOpen{from{opacity:0;translate:0 -8px}}
@keyframes kbMenuIn{from{opacity:0;translate:0 -10px}}
@keyframes kbShine{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes kbShineLoop{
  0%{transform:translateX(-130%)}
  16%,100%{transform:translateX(130%)}
}
@keyframes kbPowerOn{
  0%,42%{opacity:.82}
  47%{opacity:.2}
  52%{opacity:.7}
  57%{opacity:.08}
  62%{opacity:.48}
  72%,100%{opacity:0}
}
@keyframes kbGlassGlow{
  0%,55%{box-shadow:0 0 0 0 rgba(190,236,255,0)}
  72%{box-shadow:0 0 70px 18px rgba(190,236,255,.55)}
  100%{box-shadow:0 0 0 0 rgba(190,236,255,0)}
}
@keyframes kbGlint{
  0%{transform:translateX(-160%) skewX(-14deg)}
  24%,100%{transform:translateX(420%) skewX(-14deg)}
}
@keyframes kbSunDrift{
  0%{opacity:.35;translate:-4% 0;scale:1}
  50%{opacity:.75;translate:3% 2%;scale:1.08}
  100%{opacity:.4;translate:6% -1%;scale:1.02}
}

/* ---------- Scroll progress + nav shade (elements added by motion.js) ---------- */
.kb-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:6000;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--kb-teal),var(--kb-teal-2) 65%,#46c3dc);
  box-shadow:0 0 10px rgba(12,138,187,.45);
}
.kb-navshade{
  position:fixed;left:0;right:0;height:18px;z-index:4999;pointer-events:none;
  background:linear-gradient(rgba(7,27,69,.09),rgba(7,27,69,0));
  opacity:0;transition:opacity .35s ease;
}
html.kb-scrolled .kb-navshade{opacity:1}

/* ---------- Navigation ---------- */
html.kb-motion .nav{animation:kbNavIn .8s var(--kb-ease-out) backwards}
html.kb-motion .nav .brand-logo{animation:kbRollIn 1.1s var(--kb-ease-out) .2s backwards}
html.kb-motion .nav .brand > span{animation:kbFromLeft .8s var(--kb-ease-out) .3s backwards}
html.kb-motion .nav nav a{
  position:relative;
  animation:kbFadeDown .6s var(--kb-ease-out) backwards;
  animation-delay:calc(.35s + var(--kb-i,0) * .07s);
}
html.kb-motion .nav nav a:nth-child(1){--kb-i:0}
html.kb-motion .nav nav a:nth-child(2){--kb-i:1}
html.kb-motion .nav nav a:nth-child(3){--kb-i:2}
html.kb-motion .nav nav a:nth-child(4){--kb-i:3}
html.kb-motion .nav nav a:nth-child(5){--kb-i:4}
html.kb-motion .nav nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--kb-teal),var(--kb-teal-2));
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .4s var(--kb-ease-out);
}
html.kb-motion .nav nav a:hover::after,
html.kb-motion .nav nav a:focus-visible::after{transform:scaleX(1)}
html.kb-motion .nav .desktop-cta{animation:kbFadeDown .6s var(--kb-ease-out) .65s backwards}
html.kb-motion body .nav .desktop-cta:hover{
  box-shadow:0 12px 28px rgba(17,119,164,.32)!important;
}
@media (max-width:1023px){
  html.kb-motion .nav nav a{animation-delay:calc(var(--kb-i,0) * .05s)}
  html.kb-motion .nav nav a::after{right:auto;width:42px}
  html.kb-motion .nav nav.open{animation:kbMenuIn .35s var(--kb-ease-out)}
}

/* ---------- Shine (buttons) ---------- */
html.kb-motion .kb-shine{position:relative;overflow:hidden;isolation:isolate}
html.kb-motion .kb-shine::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.5) 48%,transparent 66%);
  transform:translateX(-130%);
}
html.kb-motion .kb-shine:hover::after{animation:kbShine .9s var(--kb-ease-out)}
html.kb-motion .kb-shine.kb-shine--loop::after{animation:kbShineLoop 6s ease-in-out 2.6s infinite}

/* ---------- Hero ---------- */
html.kb-motion:not(.kb-hero-in) .hero-image-only img,
html.kb-motion:not(.kb-hero-in) .kb-hero-fx,
html.kb-motion:not(.kb-hero-in) .hero-image-buttons{opacity:0}
html.kb-motion.kb-hero-in .hero-image-only img,
html.kb-motion.kb-hero-in .kb-hero-fx{animation:kbHeroSettle 1.9s var(--kb-ease-out) backwards}
html.kb-motion.kb-hero-in .hero-image-buttons > a{animation:kbRiseSpring .95s var(--kb-ease-spring) backwards}
html.kb-motion.kb-hero-in .hero-image-buttons > a:nth-child(1){animation-delay:.75s}
html.kb-motion.kb-hero-in .hero-image-buttons > a:nth-child(2){animation-delay:.9s}

.kb-hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.kb-sun{
  position:absolute;width:62%;height:70%;left:24%;top:-22%;
  background:radial-gradient(closest-side,rgba(255,246,222,.85),rgba(255,246,222,.3) 45%,rgba(255,246,222,0) 72%);
  mix-blend-mode:soft-light;
  animation:kbSunDrift 16s ease-in-out 2s infinite alternate;
  opacity:.35;
}
.kb-glass{position:absolute;overflow:hidden;border-radius:3px}
html.kb-motion.kb-hero-in .kb-glass{animation:kbGlassGlow 2.2s ease-out .3s backwards}
.kb-glass-dim{position:absolute;inset:0;background:#06101e;opacity:0}
html.kb-motion.kb-hero-in .kb-glass-dim{animation:kbPowerOn 2s linear .3s backwards}
.kb-glass-glint{
  position:absolute;top:-25%;bottom:-25%;left:0;width:34%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0));
  mix-blend-mode:screen;
  transform:translateX(-160%) skewX(-14deg);
  animation:kbGlint 7.5s ease-in-out 2.6s infinite;
}
@media (max-width:700px){
  .kb-sun{width:90%;left:30%;top:-28%}
}

html.kb-motion body .hero-overlay-btn{transition:translate .35s var(--kb-ease-out),box-shadow .35s ease,opacity .18s ease}
html.kb-motion body .hero-overlay-btn > span{display:inline-block;transition:translate .35s var(--kb-ease-spring)}
html.kb-motion body .hero-overlay-btn:hover > span{translate:5px 0}
html.kb-motion body .hero-overlay-btn.primary:hover{box-shadow:0 14px 34px rgba(17,119,164,.38)}
html.kb-motion body .hero-overlay-btn.secondary:hover{box-shadow:0 12px 28px rgba(7,27,69,.16)}

/* ---------- Scroll reveals (classes added by motion.js) ---------- */
html.kb-motion .kb-reveal:not(.is-in){opacity:0}
html.kb-motion .kb-reveal.is-in{animation:kbRise .95s var(--kb-ease-out) var(--kb-d,0s) backwards}
html.kb-motion .kb-reveal.is-in[data-kb="left"]{animation-name:kbFromLeft}
html.kb-motion .kb-reveal.is-in[data-kb="right"]{animation-name:kbFromRight}
html.kb-motion .kb-reveal.is-in[data-kb="zoom"]{animation-name:kbZoomIn;animation-duration:1.1s}
html.kb-motion .kb-reveal.is-in[data-kb="pop"]{animation-name:kbPop;animation-timing-function:var(--kb-ease-spring);animation-duration:.8s}
html.kb-motion .kb-reveal.is-in[data-kb="card"]{animation-name:kbCardIn;animation-duration:1s}
html.kb-motion .kb-reveal.is-in[data-kb="eyebrow"]{animation-name:kbEyebrow;animation-duration:1.1s}
html.kb-motion .kb-reveal.is-in[data-kb="unveil"]{animation-name:kbUnveil;animation-duration:1.5s}
html.kb-motion .kb-reveal.kb-instant{animation:none!important}

/* Word-by-word headings */
html.kb-motion .kb-split .kb-w{display:inline-block}
html.kb-motion .kb-split:not(.is-in) .kb-w{opacity:0}
html.kb-motion .kb-split.is-in .kb-w{
  animation:kbWord .85s var(--kb-ease-out) backwards;
  animation-delay:calc(var(--kb-d,0s) + var(--wi,0) * 60ms);
}
html.kb-motion .kb-split.kb-beat.is-in .kb-w{
  animation-name:kbBeat;animation-duration:.7s;animation-timing-function:var(--kb-ease-out);
  animation-delay:calc(var(--kb-d,0s) + var(--wi,0) * 240ms);
}
html.kb-motion .kb-split.kb-instant .kb-w{animation:none!important;opacity:1}

/* ---------- Cards (benefits, placement, Tap/Grab/Go, why) ---------- */
html.kb-motion body .kb-card-badge{position:relative}
html.kb-motion .kb-card.is-in .kb-card-badge{
  animation:kbBadgePop .8s var(--kb-ease-out) calc(var(--kb-d,0s) + .3s) backwards;
}
html.kb-motion .kb-card.is-in .kb-card-badge::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid var(--kb-teal-2);opacity:0;
  animation:kbRipple 1.2s ease-out calc(var(--kb-d,0s) + .6s);
}
html.kb-motion body .kb-card,
html.kb-motion body .why-grid article,
html.kb-motion body .faq details{
  transition:translate .5s var(--kb-ease-out),box-shadow .5s var(--kb-ease-out),border-color .3s ease;
}
html.kb-motion body .kb-card-badge{
  transition:background-color .35s ease,color .35s ease,scale .45s var(--kb-ease-spring);
}
html.kb-motion body .kb-card:hover,
html.kb-motion body .why-grid article:hover,
html.kb-motion body .how .steps .kb-card.kb-active{
  translate:0 -6px;
  border-color:rgba(17,119,164,.38)!important;
  box-shadow:0 22px 46px rgba(17,60,96,.14)!important;
}
html.kb-motion body .kb-card:hover .kb-card-badge,
html.kb-motion body .how .steps .kb-card.kb-active .kb-card-badge{
  background:var(--kb-teal)!important;
  color:#fff!important;
  scale:1.14;
}
html.kb-motion body .faq details:hover{
  translate:0 -2px;
  border-color:rgba(17,119,164,.3)!important;
}

/* ---------- Product spotlight + payment logos ---------- */
html.kb-motion .machine-integrated{overflow:hidden}
html.kb-motion body .payment-methods-polished img{transition:translate .4s var(--kb-ease-spring),filter .3s ease}
html.kb-motion body .payment-methods-polished img:hover{translate:0 -4px;filter:drop-shadow(0 8px 14px rgba(7,27,69,.16))}

/* ---------- Equipment gallery ---------- */
html.kb-motion #kbEquipmentMain.kb-swap{animation:kbSwap .7s var(--kb-ease-out)}
html.kb-motion #kbEquipmentCarousel.kb-autoplay .gallery-thumb.active{position:relative}
html.kb-motion #kbEquipmentCarousel.kb-autoplay .gallery-thumb.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--kb-teal),var(--kb-teal-2));
  transform-origin:0 50%;
  animation:kbThumbProgress var(--kb-autoplay,5.5s) linear forwards;
}
html.kb-motion #kbEquipmentCarousel.kb-autoplay.kb-paused .gallery-thumb.active::after{animation-play-state:paused}
html.kb-motion body #kbEquipmentCarousel .gallery-arrow{transition:scale .3s var(--kb-ease-spring),box-shadow .3s ease}
html.kb-motion body #kbEquipmentCarousel .gallery-arrow:hover{scale:1.1}

/* ---------- FAQ ---------- */
html.kb-motion .faq details[open] > p{animation:kbFaqOpen .5s var(--kb-ease-out)}
html.kb-motion body .faq summary::after{
  transition:background-color .18s ease,border-color .18s ease,rotate .5s var(--kb-ease-spring)!important;
}
html.kb-motion body .faq details[open] summary::after{rotate:180deg}
@supports (interpolate-size:allow-keywords){
  html.kb-motion .faq details{interpolate-size:allow-keywords}
  html.kb-motion .faq details::details-content{
    height:0;overflow:clip;
    transition:height .45s var(--kb-ease-out),content-visibility .45s allow-discrete;
  }
  html.kb-motion .faq details[open]::details-content{height:auto}
}

/* ---------- Contact form ---------- */
html.kb-motion body #leadForm input,
html.kb-motion body #leadForm select,
html.kb-motion body #leadForm textarea{transition:border-color .25s ease,box-shadow .3s ease}
html.kb-motion body #leadForm input:focus,
html.kb-motion body #leadForm select:focus,
html.kb-motion body #leadForm textarea:focus{
  outline:none;
  border-color:var(--kb-teal)!important;
  box-shadow:0 0 0 4px rgba(17,119,164,.15)!important;
}
html.kb-motion body #leadForm .btn:hover{box-shadow:0 14px 30px rgba(47,93,124,.3)!important}
html.kb-motion body .contact-links a .contact-icon,
html.kb-motion body .footer-contact a .contact-icon{transition:rotate .45s var(--kb-ease-spring),scale .45s var(--kb-ease-spring)}
html.kb-motion body .contact-links a:hover .contact-icon,
html.kb-motion body .footer-contact a:hover .contact-icon{rotate:-12deg;scale:1.15}

/* ---------- Never hide anything when printing ---------- */
@media print{
  html.kb-motion *{animation:none!important}
  html.kb-motion .kb-reveal,html.kb-motion .kb-split .kb-w,
  html.kb-motion .hero-image-only img,html.kb-motion .hero-image-buttons{opacity:1!important}
  .kb-progress,.kb-navshade,.kb-hero-fx{display:none!important}
}