/* Solutions IT — PREVIEW motion layer (Apple-style clean + transitions)
   Layers on top of styles.css. Only loaded by the preview build.
   Principles: opacity/transform only (GPU-cheap), one calm easing curve,
   generous air, soft shadows. Everything is disabled for
   prefers-reduced-motion, and nothing is hidden unless motion.js
   confirms it can reveal it (html.motion-on). */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.21,1);
}

/* ---------- cleaner type + air ---------- */
h1,h2{letter-spacing:-.022em}
h3{letter-spacing:-.01em}
.section{padding:84px 0}
.section-head{margin-bottom:40px}
.section-head p{font-size:1.05rem}
@media (max-width:640px){.section{padding:60px 0}}

/* ---------- sticky glass header ---------- */
.site-header{
  transition:box-shadow .45s var(--ease-soft),background-color .45s var(--ease-soft);
}
.site-header.scrolled{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 10px 34px rgba(10,10,10,.09);
  border-bottom-color:rgba(222,222,222,.6);
}
.main-nav a{transition:color .25s var(--ease-soft)}
.brand-mark{transition:transform .45s var(--ease-out)}
.brand:hover .brand-mark{transform:scale(1.04)}

/* ---------- buttons: calm lift + press ---------- */
.btn{
  transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),
             border-color .3s var(--ease-soft),transform .3s var(--ease-out),
             box-shadow .3s var(--ease-soft);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-accent:hover{box-shadow:0 10px 22px rgba(26,106,203,.28)}
.btn-dark:hover{box-shadow:0 10px 22px rgba(10,10,10,.22)}

/* ---------- scroll reveal (JS-gated) ---------- */
html.motion-on [data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
html.motion-on [data-reveal="zoom"]{transform:translateY(18px) scale(.975)}
html.motion-on [data-reveal].revealed{
  opacity:1;
  transform:none;
}

/* ---------- cards & blocks: soft hover lift ---------- */
.card,.service-block,.channel-card,.listing-card,.sales-category-nav a{
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-soft),
             border-color .4s var(--ease-soft);
}
.card:hover,.service-block:hover,.channel-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(10,10,10,.09);
  border-color:#CBD9E6;
}
.section.dark .card:hover{border-color:#4A6B8A;box-shadow:0 18px 38px rgba(0,0,0,.35)}
.listing-card:hover,.sales-category-nav a:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(10,10,10,.10);
}
.chip,.badge{transition:transform .35s var(--ease-out),background-color .3s var(--ease-soft)}
.badge:hover{transform:translateY(-1px)}

/* ---------- hero entrance (pure CSS, on load) ---------- */
@keyframes heroRise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@keyframes heroZoom{
  from{transform:scale(1.07)}
  to{transform:scale(1)}
}
.hero-bg .hero-photo{animation:heroZoom 2.2s var(--ease-out) both}
.hero-bg .wrap > *{animation:heroRise 1s var(--ease-out) both}
.hero-bg .wrap > *:nth-child(2){animation-delay:.08s}
.hero-bg .wrap > *:nth-child(3){animation-delay:.16s}
.hero-bg .wrap > *:nth-child(4){animation-delay:.24s}
.hero-bg .wrap > *:nth-child(5){animation-delay:.34s}

/* hero photo drift layer — motion.js sets --hero-shift while scrolling */
.hero-bg .hero-photo{translate:0 var(--hero-shift,0px)}

/* ---------- get-help panel: fade + rise instead of snap ---------- */
.gh-panel{
  display:flex;visibility:hidden;opacity:0;
  transform:translateY(14px) scale(.985);pointer-events:none;
  transition:opacity .38s var(--ease-out),transform .38s var(--ease-out),visibility 0s linear .38s;
}
.gh-panel.open{
  visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity .38s var(--ease-out),transform .38s var(--ease-out),visibility 0s;
}
.gh-fab{transition:background-color .3s var(--ease-soft),transform .3s var(--ease-out),box-shadow .3s var(--ease-soft)}
.gh-fab:hover{transform:translateY(-2px)}
.gh-channel,.gh-chip{transition:border-color .25s var(--ease-soft),background-color .25s var(--ease-soft),color .25s var(--ease-soft),transform .25s var(--ease-out)}
.gh-channel:hover{transform:translateY(-1px)}

/* mobile nav: smooth drop */
@media (max-width:640px){
  .main-nav{transition:opacity .3s var(--ease-out)}
}

/* ---------- form fields: softer focus ---------- */
.field input,.field select,.field textarea{
  transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-soft);
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 4px rgba(26,106,203,.14);
}

/* ---------- reduced motion: everything calm & visible ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.motion-on [data-reveal]{opacity:1;transform:none}
  .card:hover,.service-block:hover,.channel-card:hover,.btn:hover,.gh-fab:hover{
    transform:none;
  }
}