/* Shared scroll + UI enhancements across all Huddy Digital pages.
   Uses the site palette vars with safe fallbacks so it works on every page. */

:root{
  --ui-accent: var(--accent, #1470af);
  --ui-text: var(--text, #161b22);
  --ui-dim: var(--text-dim, #5b6572);
  --ui-border: var(--border, #e4e7eb);
  --ui-shadow: 0 10px 30px rgba(22,27,34,.10);
  --ui-shadow-sm: 0 4px 14px rgba(22,27,34,.08);
}

/* Smooth scrolling + anchor offset so the sticky header never covers a target */
html{scroll-behavior:smooth;}
section[id], [id]{scroll-margin-top:92px;}

/* Consistent keyboard focus ring on every page */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--ui-accent);outline-offset:2px;border-radius:4px;
}

/* ---- Scroll progress bar (injected by ui.js) ---- */
.ui-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:400;
  background:linear-gradient(90deg, var(--ui-accent), #3aa0e0);
  transition:width .08s linear;will-change:width;
}

/* ---- Sticky, scroll-aware header ---- */
header{
  position:sticky;top:0;z-index:150;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  transition:box-shadow .25s ease, background .25s ease, padding .25s ease;
}
header.ui-scrolled{box-shadow:0 1px 0 var(--ui-border), 0 6px 22px rgba(22,27,34,.07);}
.header-inner{transition:padding .25s ease;}
header.ui-scrolled .header-inner{padding-top:12px;padding-bottom:12px;}
header nav a:not(.btn){position:relative;}
header nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--ui-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;border-radius:2px;
}
header nav a:not(.btn):hover::after{transform:scaleX(1);}

/* ---- Reveal on scroll (robust: only hides when JS is on) ---- */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
html.js .reveal.is-in{opacity:1;transform:none;}
/* staggered children */
html.js .reveal.is-in .stagger > *{animation:ui-rise .6s cubic-bezier(.2,.7,.2,1) both;}
html.js .reveal.is-in .stagger > *:nth-child(2){animation-delay:.07s;}
html.js .reveal.is-in .stagger > *:nth-child(3){animation-delay:.14s;}
html.js .reveal.is-in .stagger > *:nth-child(4){animation-delay:.21s;}
html.js .reveal.is-in .stagger > *:nth-child(5){animation-delay:.28s;}
html.js .reveal.is-in .stagger > *:nth-child(6){animation-delay:.35s;}
@keyframes ui-rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

/* ---- Card / tile hover polish ---- */
.services .service, .card, .testimonial{
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .2s ease;
  will-change:transform;
}
@media (min-width:800px){
  .services .service:hover, .card:hover, .testimonial:hover{
    transform:translateY(-5px);
    box-shadow:var(--ui-shadow);
    border-color:var(--ui-accent);
  }
}
#results .service{border-radius:10px;transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
@media (min-width:800px){ #results .service:hover{transform:translateY(-4px);box-shadow:var(--ui-shadow-sm);} }

/* ---- Portfolio images: zoom + lift ---- */
.portfolio-grid img{transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;will-change:transform;}
.portfolio-grid img:hover{transform:scale(1.025);box-shadow:var(--ui-shadow);}

/* ---- Buttons: lift + shadow ---- */
.btn{transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,112,175,.32);}
.btn:active{transform:translateY(0);}

/* ---- Stat pop when revealed ---- */
html.js .reveal .stats .stat{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);}
html.js .reveal.is-in .stats .stat{opacity:1;transform:none;}
html.js .reveal.is-in .stats .stat:nth-child(2){transition-delay:.08s;}
html.js .reveal.is-in .stats .stat:nth-child(3){transition-delay:.16s;}

/* ---- Back-to-top (injected by ui.js) ---- */
.ui-top{
  position:fixed;right:20px;bottom:88px;z-index:190;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--ui-border);
  background:#fff;color:var(--ui-accent);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--ui-shadow-sm);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.ui-top.show{opacity:1;visibility:visible;transform:none;}
.ui-top:hover{color:#fff;background:var(--ui-accent);border-color:var(--ui-accent);}
.ui-top svg{width:20px;height:20px;}
/* sit above the chat launcher when present */
body:has(#chatToggle) .ui-top{bottom:150px;}
@media (max-width:560px){ .ui-top{right:16px;} }

/* ---- How it works ---- */
.steps{display:grid;grid-template-columns:1fr;gap:20px;counter-reset:step;}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);gap:28px;} }
.step{position:relative;padding:28px 24px;border:1px solid var(--ui-border);border-radius:12px;background:#fff;transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
@media (min-width:800px){ .step:hover{transform:translateY(-4px);box-shadow:var(--ui-shadow-sm);} }
.step .step-n{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--ui-accent);color:#fff;font-weight:700;font-size:1.05rem;margin-bottom:16px;
}
.step h3{font-size:1.15rem;margin-bottom:8px;}
.step p{color:var(--ui-dim);font-size:.96rem;}

/* ---- FAQ accordion ---- */
.faq{max-width:760px;display:flex;flex-direction:column;gap:12px;}
.faq details{border:1px solid var(--ui-border);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .2s ease, box-shadow .2s ease;}
.faq details[open]{border-color:var(--ui-accent);box-shadow:var(--ui-shadow-sm);}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:1.02rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ui-text);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--ui-accent);transition:transform .25s ease;flex:none;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .faq-a{padding:0 20px 20px;color:var(--ui-dim);line-height:1.6;}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  html.js .reveal,
  html.js .reveal .stats .stat{opacity:1 !important;transform:none !important;transition:none !important;}
  .btn:hover, .services .service:hover, .card:hover, .testimonial:hover, .portfolio-grid img:hover, #results .service:hover, .step:hover{transform:none !important;}
  .ui-progress{display:none;}
  html.js .reveal.is-in .stagger > *{animation:none;}
}