/* ============================================================
   KUYSEN MOTION SYSTEM — kuysen-motion.css
   Target: /wp-content/themes/impreza-child/assets/css/kuysen-motion.css

   PRINCIPLE: this file never hides content. All hidden start
   states are applied by JS, so if the script fails the page
   still renders normally.
   ============================================================ */

:root{
  --km-brass:#a8894f;
  --km-bone:#f7f5f1;
}

/* ------------------------------------------------------------
   PHASE 0 — kill-switch for leftover native animations
   ------------------------------------------------------------ */
.wpb_animate_when_almost_visible{
  opacity:1 !important;
  animation:none !important;
}
[class*="us_animate_"]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* ------------------------------------------------------------
   .km-reveal — headline mask uses Impreza's own wrapper
   padding + negative margin gives descenders room inside the
   clipping box without changing layout spacing
   ------------------------------------------------------------ */
.km-reveal-headline .w-text-h,
.km-reveal-headline .mask{
  display:block;
  overflow:hidden;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
.km-reveal-headline .w-text-value,
.km-reveal-headline .mask > span{
  display:block;
}

/* ------------------------------------------------------------
   .km-parallax — us_image renders .w-image > .w-image-h > img
   ------------------------------------------------------------ */
.km-parallax,
.km-parallax .w-image-h{
  overflow:hidden;
}
.km-parallax img{
  display:block;
  width:100%;
  transform:scale(1.15);
  will-change:transform;
}

/* ------------------------------------------------------------
   Card hover treatment (pure CSS)
   ------------------------------------------------------------ */
.km-hover-grid .w-grid-item img,
.km-showroom-carousel .w-grid-item img{
  transition:transform .85s cubic-bezier(.25,.8,.25,1);
}
.km-hover-grid .w-grid-item:hover img,
.km-showroom-carousel .w-grid-item:hover img{
  transform:scale(1.05);
}
.km-hover-grid .w-grid-item .post-title,
.km-showroom-carousel .w-grid-item .post-title{
  transition:transform .5s cubic-bezier(.25,.8,.25,1);
}
.km-hover-grid .w-grid-item:hover .post-title{
  transform:translateY(-4px);
}

/* Assist blocks */
.assist-block{
  transition:background-color .45s ease,border-color .45s ease;
}
.assist-block .aarrow{
  transition:transform .45s cubic-bezier(.25,.8,.25,1);
}
.assist-block:hover .aarrow{
  transform:translate(4px,-4px);
}

/* ------------------------------------------------------------
   Flipbook trigger button (3D FlipBook Lite shortcode)
   ------------------------------------------------------------ */
.km-flipbook-btn a{
  position:relative;
  display:inline-block;
  padding:16px 40px;
  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--km-brass);
  border:1px solid var(--km-brass);
  background:transparent;
  overflow:hidden;
  z-index:1;
  transition:color .4s ease;
}
.km-flipbook-btn a::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--km-brass);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s cubic-bezier(.25,.8,.25,1);
  z-index:-1;
}
.km-flipbook-btn a:hover{color:var(--km-bone);}
.km-flipbook-btn a:hover::before{transform:scaleX(1);}
.km-flipbook-btn a span{
  display:inline-block;
  transition:transform .4s ease;
}
.km-flipbook-btn a:hover span{transform:translateX(5px);}

/* ------------------------------------------------------------
   Custom cursor
   ------------------------------------------------------------ */
.km-cursor,
.km-cursor-ring{
  position:fixed;
  top:0;
  left:0;
  pointer-events:none;
  z-index:9999;
  opacity:0;
}
.km-cursor{
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--km-brass);
}
.km-cursor-ring{
  width:42px;
  height:42px;
  margin:-21px 0 0 -21px;
  border:1px solid rgba(168,137,79,.28);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:width .35s ease,height .35s ease,margin .35s ease,
             background .35s ease,border-color .35s ease;
}
.km-cursor-ring b{
  font-family:'Jost',sans-serif;
  font-size:9px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--km-bone);
  opacity:0;
  transition:opacity .3s ease;
}
.km-cursor-ring.is-active{
  width:76px;
  height:76px;
  margin:-38px 0 0 -38px;
  background:var(--km-brass);
  border-color:var(--km-brass);
}
.km-cursor-ring.is-active b{opacity:1;}

/* Hide the native cursor only once JS confirms the custom one is running.
   Impreza sets cursor:pointer on many elements, so name them explicitly. */
html.cursor-on,
html.cursor-on a,
html.cursor-on button,
html.cursor-on [class*="w-btn"],
html.cursor-on .w-image,
html.cursor-on .w-grid-item,
html.cursor-on .assist-block{
  cursor:none;
}
/* Always keep a native cursor on anything typed into */
html.cursor-on input,
html.cursor-on textarea,
html.cursor-on select,
html.cursor-on [contenteditable]{
  cursor:auto;
}
@media (hover:none),(pointer:coarse){
  .km-cursor,.km-cursor-ring{display:none !important;}
}

/* ------------------------------------------------------------
   Page transition overlay
   ------------------------------------------------------------ */
.km-transition-overlay{
  position:fixed;
  inset:0;
  background:var(--km-bone);
  z-index:9990;
  transform:scaleY(0);
  transform-origin:top;
  pointer-events:none;
}
.km-transition-overlay::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--km-brass);
}

/* ------------------------------------------------------------
   Header polish — refines Impreza's sticky header
   ------------------------------------------------------------ */
.l-header{
  transition:transform .45s cubic-bezier(.25,.8,.25,1),
             background-color .45s ease,
             backdrop-filter .45s ease;
}
.km-header-scrolled{
  background-color:rgba(247,245,241,.93);
  backdrop-filter:blur(10px);
}
.km-header-hide{
  transform:translateY(-100%);
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .km-parallax img{transform:scale(1) !important;}
  .km-cursor,.km-cursor-ring{display:none !important;}
  .km-transition-overlay{display:none !important;}
}

/* Hero Section CSS */
.km-hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#1c1a17;
}
@media (max-width:900px){ .km-hero{min-height:80vh;} }
 
.km-hero-stage{position:absolute;inset:0;z-index:0;}
.km-hero-slide{position:absolute;inset:0;opacity:0;}
.km-hero-slide.is-active{opacity:1;}
.km-hero-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  will-change:transform;
}
.km-hero-img{background-size:cover;background-position:center;}
.km-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,.25) 55%,rgba(0,0,0,.45));
}
 
.km-hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1300px;
  margin:0 auto;
  padding:0 40px 80px;
  color:#f7f5f1;
}
@media (max-width:900px){ .km-hero-content{padding:0 22px 64px;} }
 
.km-hero-copy{display:none;}
.km-hero-copy.is-active{display:block;}
 
.km-hero-eyebrow{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--km-brass);margin-bottom:14px;
}
.km-hero-title{
  font-family:var(--font-h1);
  font-weight:var(--h1-font-weight,300);
  font-size:var(--h2-font-size);
  color: #f7f5f1;
  line-height:1.12;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}
.km-hero,
.km-hero-eyebrow,
.km-hero-sub,
.km-hero-play,
.km-hero-count{
  font-family:var(--font-body);
}
.km-h-mask{
  display:block;overflow:hidden;
  padding-bottom:.16em;margin-bottom:-.16em;
}
.km-h-line{display:block;}
.km-hero-sub{
  margin-top:20px;
  font-size:15px;line-height:1.8;
  color:rgba(247,245,241,.78);
  max-width:52ch;
}
 
.km-hero-actions{margin-top:32px;}
.km-hero-play{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 34px;
  background:transparent;
  border:1px solid rgba(247,245,241,.55);
  color:#f7f5f1;
  font-family:inherit;font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  position:relative;overflow:hidden;z-index:1;
  transition:color .4s ease,border-color .4s ease;
}
.km-hero-play::before{
  content:'';position:absolute;inset:0;
  background:var(--km-brass);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.25,.8,.25,1);
  z-index:-1;
}
.km-hero-play:hover{border-color:var(--km-brass);}
.km-hero-play:hover::before{transform:scaleX(1);}
.km-hero-play-icon{
  width:0;height:0;
  border-style:solid;
  border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent currentColor;
}
 
.km-hero-ui{
  margin-top:38px;
  display:flex;align-items:center;gap:20px;
}
.km-hero-dots{display:flex;gap:9px;}
.km-hero-dot{
  width:34px;height:2px;padding:0;border:none;
  background:rgba(247,245,241,.3);
  position:relative;overflow:hidden;cursor:pointer;
}
.km-hero-dot span{
  position:absolute;inset:0;
  background:var(--km-brass);
  transform:scaleX(0);transform-origin:left center;
}
.km-hero-count{font-size:11px;letter-spacing:.2em;color:rgba(247,245,241,.65);}
.km-hero-count em{font-style:normal;color:#f7f5f1;}
 
.km-hero-cue{
  position:absolute;left:50%;bottom:0;z-index:2;
  transform:translateX(-50%);
}
.km-hero-cue-rail{
  display:block;width:1px;height:56px;
  background:rgba(247,245,241,.22);
  position:relative;overflow:hidden;
}
.km-hero-cue-rail i{
  position:absolute;top:-56px;left:0;
  width:1px;height:56px;background:var(--km-brass);
}
@media (max-width:900px){ .km-hero-cue{display:none;} }
 
@media (prefers-reduced-motion:reduce){
  .km-hero-slide{opacity:0;}
  .km-hero-slide:first-child{opacity:1;}
  .km-hero-cue{display:none;}
}