/* Site-wide motion and the frozen header (hero.py loads this on every page; motion.js sets the classes).
   Animations are off for anyone whose system asks for less motion. */

/* ---- Frozen header ------------------------------------------------------------------------------------ */
/* The page body scrolls sideways-clipped (Hillz's overflow-x:hidden), which stops position:sticky, so the bar is
   fixed and the page is pushed down by its height instead. On the homepage the hero carries its own header, and
   this bar slides in once that one has scrolled away. */
#bc-header{position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(11,11,12,.97);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s,box-shadow .25s}
#bc-header .bc-head{height:80px;padding-top:0;padding-bottom:0;transition:height .25s ease}
#bc-header .bc-head img{transition:height .25s ease}
html:not(.bc-home) body{padding-top:81px}
html{scroll-padding-top:96px}
html.bc-scrolled #bc-header{background:rgba(11,11,12,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 12px 32px rgba(0,0,0,.28)}
html.bc-scrolled #bc-header .bc-head{height:64px}
html.bc-scrolled #bc-header .bc-head img{height:34px}
html.bc-home #bc-header{display:block;transform:translateY(-101%);visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s,background-color .25s,box-shadow .25s}
html.bc-home.bc-scrolled #bc-header{transform:none;visibility:visible;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s,background-color .25s,box-shadow .25s}
/* Things that stick while you scroll sit below the bar */
body .inv-side,body .inv-detail__side{top:84px}
@media (max-width:900px){
  /* phones and tablets: the bar tucks away while you scroll down and comes back as soon as you scroll up */
  html.bc-scrolled.bc-head-away #bc-header{transform:translateY(-101%)}
}
@media (max-width:720px){
  #bc-header .bc-head{height:62px}
  html:not(.bc-home) body{padding-top:63px}
  html{scroll-padding-top:76px}
  html.bc-scrolled #bc-header .bc-head{height:56px}
  html.bc-scrolled #bc-header .bc-head img{height:28px}
}

/* Seven header links: each stays on one line, a little closer together on mid-size screens */
.bc-head nav a{white-space:nowrap}
@media (min-width:1101px) and (max-width:1280px){.bc-head nav{gap:20px}.bc-call{padding:12px 14px}}

/* ---- Small touches (hover) ---------------------------------------------------------------------------- */
.bc-head nav a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:#ff8c00;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.bc-head nav a:hover:after,.bc-head nav a[aria-current]:after{transform:scaleX(1)}
#bc-hero .bc-primary svg,#bc-footer .bc-primary svg{transition:transform .2s ease}
#bc-hero .bc-primary:hover svg{transform:translateX(4px)}
.bc-why__photo{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.bc-why__photo:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(16,16,20,.2)}
#bc-insta .bc-ig{transition:transform .3s ease,box-shadow .3s ease}
#bc-insta .bc-ig:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(16,16,20,.12)}
/* Hillz's own slide-in leaves the four homepage department cards 40px low; put them where they belong */
.departments-row > .department-card{transform:none!important}
#bc-reviews blockquote{transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
#bc-reviews blockquote:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(16,16,20,.08);border-color:#ffd7a8}

@media (prefers-reduced-motion:no-preference){
  /* ---- Homepage hero: the photo settles in, the words rise one after another ---------------------------- */
  @keyframes bc-up{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
  @keyframes bc-fade{from{opacity:0}to{opacity:1}}
  @keyframes bc-settle{from{transform:scale(1.08)}to{transform:none}}
  @keyframes bc-ping{0%{box-shadow:0 0 0 0 rgba(255,140,0,.65)}70%,100%{box-shadow:0 0 0 9px rgba(255,140,0,0)}}
  @keyframes bc-shine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
  #bc-hero{overflow:hidden;isolation:isolate}
  #bc-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:inherit;transform-origin:72% 35%;
    animation:bc-settle 2.8s cubic-bezier(.2,.7,.2,1) backwards}
  #bc-hero .bc-head{animation:bc-fade .8s ease backwards}
  #bc-hero main > *,#bc-hero form{animation:bc-up .9s cubic-bezier(.2,.7,.2,1) backwards}
  #bc-hero main > :nth-child(1){animation-delay:.15s}
  #bc-hero main > :nth-child(2){animation-delay:.27s}
  #bc-hero main > :nth-child(3){animation-delay:.39s}
  #bc-hero main > :nth-child(4){animation-delay:.51s}
  #bc-hero main > :nth-child(5){animation-delay:.63s}
  #bc-hero form{animation-delay:.75s}
  #bc-hero .bc-stats{animation:bc-fade 1s .95s ease backwards}
  /* a soft "live" pulse on the orange dots, and a light sweep across the main button now and then */
  #bc-hero .bc-eyebrow span,#bc-wiz .sl-eyebrow:before,#bc-sell .sl-eyebrow:before{animation:bc-ping 2.2s ease-out infinite}
  #bc-hero .bc-ctas .bc-primary{position:relative;overflow:hidden}
  #bc-hero .bc-ctas .bc-primary:after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);
    animation:bc-shine 6s 2.4s ease-in-out infinite}

  /* ---- Financing, service, test drive, trade-in and contact pages: the page rises in ---------------------- */
  #bc-wiz .wz-intro > *{animation:bc-up .8s cubic-bezier(.2,.7,.2,1) backwards}
  #bc-wiz .wz-intro > :nth-child(2){animation-delay:.1s}
  #bc-wiz .wz-intro > :nth-child(3){animation-delay:.2s}
  #bc-wiz .wz-intro > :nth-child(4){animation-delay:.3s}
  #bc-wiz .wz-intro > :nth-child(n+5){animation-delay:.4s}
  #bc-wiz .sw{animation:bc-up .9s .25s cubic-bezier(.2,.7,.2,1) backwards}

  /* ---- Scroll reveals (motion.js marks what's below the fold and lets it in as it arrives) --------------- */
  html.bc-motion .bcr{opacity:0;transform:translate3d(0,28px,0);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--bcr-d,0s),transform .9s cubic-bezier(.16,.84,.24,1) var(--bcr-d,0s)}
  html.bc-motion .bcr.bc-why__photo,html.bc-motion .bcr.bc-ig,html.bc-motion .bcr.bc-about__photo{transform:translate3d(0,28px,0) scale(.96)}
  html.bc-motion .bcr.bcr-in{opacity:1;transform:none}
  html.bc-motion .bcr.department-card{opacity:0!important;transform:translate3d(0,28px,0)!important}
  html.bc-motion .bcr.bcr-in.department-card{opacity:1!important;transform:none!important}
  /* the Google stars pop in one by one when the rating card arrives */
  @keyframes bc-pop{0%{opacity:0;transform:scale(.3)}70%{transform:scale(1.18)}100%{opacity:1;transform:none}}
  #bc-reviews .bc-rating.bcr-seen .bc-stars svg{animation:bc-pop .45s cubic-bezier(.2,.7,.2,1) backwards}
  #bc-reviews .bc-rating.bcr-seen .bc-stars svg:nth-child(1){animation-delay:.35s}
  #bc-reviews .bc-rating.bcr-seen .bc-stars svg:nth-child(2){animation-delay:.45s}
  #bc-reviews .bc-rating.bcr-seen .bc-stars svg:nth-child(3){animation-delay:.55s}
  #bc-reviews .bc-rating.bcr-seen .bc-stars svg:nth-child(4){animation-delay:.65s}
  #bc-reviews .bc-rating.bcr-seen .bc-stars svg:nth-child(5){animation-delay:.75s}
}
@media print{.bcr{opacity:1!important;transform:none!important}}