/* Hero slideshow buttons: interaction only, the layouts don't move. Used by the homepage hero (index.php), the builder's
   Homepage slideshow and Full-screen slideshow sections. Behaviour: assets/hero-buttons.js, which adds .hb to each
   button and a .hb-fx layer (spotlight + press ripples) inside it. Colours come from the button itself (currentColor)
   and the Brand style guide tokens only.
   Mobbin references: Ada careers hero (arrow chip that slides on hover), Rivian hero carousel (pill buttons, arrows,
   dot pager), YLLW hero slider (paired solid / outline buttons, arrow controls), Mistral AI customer carousel. */

/* ---- The effect layer: absolutely positioned, so it never takes space. ---- */
.hb{overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.hero-actions .hb,.pb-arrow.hb{position:relative}   /* arrows and Pause on the homepage are already positioned */
.hb-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;overflow:hidden}
/* Spotlight that follows the pointer (--hx / --hy set by the script). */
.hb-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(120px circle at var(--hx,50%) var(--hy,50%),color-mix(in srgb,currentColor 16%,transparent),transparent 70%);opacity:0;transition:opacity .25s ease}
.hb:hover .hb-fx::before,.hb:focus-visible .hb-fx::before{opacity:1}
/* One soft sheen across the main button when its slide comes in, so the eye lands on it. */
.hb-fx::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-accent-light,#f7df93) 45%,transparent),transparent);opacity:0}
.hb.hb-sheen .hb-fx::after{animation:hbSheen 1.1s cubic-bezier(.4,0,.2,1) .9s both}
@keyframes hbSheen{0%{left:-60%;opacity:0}15%{opacity:1}100%{left:130%;opacity:0}}
/* Press ripple from where the finger or pointer landed. */
.hb-ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);animation:hbRipple .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes hbRipple{to{transform:scale(var(--hr,30));opacity:0}}

/* ---- Magnetic pull (pointer devices): `translate` composes with each button's own hover / press transform. ---- */
.hb{translate:var(--mx,0px) var(--my,0px)}
.madison-home .hero-actions .button.hb{transition:background .2s,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s,translate .35s cubic-bezier(.22,1,.36,1)}
body.pb-page .pb-slideshow .hero-btn.hb{transition:background .2s,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s,translate .35s cubic-bezier(.22,1,.36,1)!important}
.hb.is-magnet{transition-duration:.2s,.2s,.25s,.08s}

/* ---- Hover / press feedback ---- */
.madison-home .hero-actions .button.hb:hover{box-shadow:0 10px 26px #00000047}
.madison-home .hero-actions .button-gold.hb:hover{border-color:color-mix(in srgb,var(--brand-accent-light,#f7df93) 70%,transparent)}
body.pb-page .pb-slideshow .hero-btn.hb:hover{box-shadow:0 10px 26px #00000047!important}
.hero-actions .hb:active{transform:scale(.96)!important}
/* The chevron leans forward a little further on hover. */
.madison-home .hero-actions .button.hb:hover .button-chevron{transform:translateX(5px)}

/* ---- Buttons arrive one after the other when their slide comes in ---- */
.hero-slide.is-active .hero-actions .hb,.pb-slide.is-active .hero-actions .hb{animation:hbIn .7s cubic-bezier(.22,1,.36,1) backwards}
.hero-slide.is-active .hero-actions .hb:nth-child(1),.pb-slide.is-active .hero-actions .hb:nth-child(1){animation-delay:.32s}
.hero-slide.is-active .hero-actions .hb:nth-child(2),.pb-slide.is-active .hero-actions .hb:nth-child(2){animation-delay:.44s}
@keyframes hbIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ---- Slider controls: arrows, pause and dots ---- */
.madison-home .hero-pause:active{transform:scale(.94)}
.madison-home .slider-arrow svg{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.madison-home .slider-arrow-left:hover svg{transform:translateX(-3px)}
.madison-home .slider-arrow-right:hover svg{transform:translateX(3px)}
.madison-home .slider-arrow:hover{box-shadow:0 10px 28px #00000059,0 0 0 4px color-mix(in srgb,var(--brand-accent,#d9b24c) 22%,transparent)}
.pb-arrow.hb:active{transform:scale(.92)!important}
.pb-arrow.hb{transition:background .2s,transform .2s cubic-bezier(.22,1,.36,1),border-color .2s,box-shadow .2s}
.pb-arrow.hb:hover{transform:scale(1.08);border-color:color-mix(in srgb,var(--brand-accent,#d9b24c) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-accent,#d9b24c) 20%,transparent)}
.hero-dot::before{transition:width .25s,background .25s,transform .2s cubic-bezier(.22,1,.36,1)}
.hero-dot:hover::before{transform:scale(1.3)}
.hero-dot:active::before{transform:scale(.85)}
.pb-dots button{transition:background .2s,transform .2s cubic-bezier(.22,1,.36,1)}
.pb-dots button:hover{background:rgba(255,255,255,.55);transform:scaleY(1.8)}

/* ---- Motion-sensitive visitors: colour and shadow feedback only. ---- */
@media (prefers-reduced-motion:reduce){
  .hb{translate:none}
  .hb-fx::after,.hb-ripple{display:none}
  .hero-slide.is-active .hero-actions .hb,.pb-slide.is-active .hero-actions .hb{animation:none}
  .madison-home .slider-arrow svg,.hero-dot::before,.pb-arrow.hb,.pb-dots button{transition:none}
  .hero-actions .hb:active,.pb-arrow.hb:active{transform:none!important}
}