/* ==========================================================================
   KIN VITAL GROUP — Enhancement layer (advanced / cinematic polish)
   Additive only. Hooks into builder classes: .ed-*, .banner, .realEstate--box
   Everything is gated on html.js-enhanced so content is never hidden w/o JS.
   ========================================================================== */

:root{
  --kvg-gold:#a89055;
  --kvg-gold-light:#c2a46d;
  --kvg-gold-bright:#ceb04e;
  --kvg-ink:#242424;
  --kvg-ease:cubic-bezier(.16,1,.3,1);
}

/* smoother anchor scrolling + nicer text selection ----------------------- */
html{scroll-behavior:smooth;}
::selection{background:var(--kvg-gold);color:#fff;}
::-moz-selection{background:var(--kvg-gold);color:#fff;}

/* refined scrollbar ------------------------------------------------------ */
html.js-enhanced::-webkit-scrollbar{width:11px;}
html.js-enhanced::-webkit-scrollbar-track{background:#1c1c1c;}
html.js-enhanced::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--kvg-gold-light),var(--kvg-gold));
  border-radius:10px;border:2px solid #1c1c1c;}
html.js-enhanced::-webkit-scrollbar-thumb:hover{background:var(--kvg-gold-bright);}

/* ===== 1. Scroll progress bar =========================================== */
#kvg-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:linear-gradient(90deg,var(--kvg-gold),var(--kvg-gold-bright),#f0dca0);
  box-shadow:0 0 12px rgba(206,176,78,.7);transition:width .1s linear;pointer-events:none;}

/* ===== 2. Back-to-top button =========================================== */
#kvg-top{
  position:fixed;left:26px;bottom:26px;width:52px;height:52px;z-index:9998;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:50%;border:1px solid var(--kvg-gold-light);
  background:rgba(28,28,28,.72);backdrop-filter:blur(8px);color:var(--kvg-gold-light);
  opacity:0;transform:translateY(20px) scale(.85);pointer-events:none;
  transition:all .5s var(--kvg-ease),background .3s,color .3s;}
#kvg-top.show{opacity:1;transform:none;pointer-events:auto;}
#kvg-top:hover{background:var(--kvg-gold);color:#fff;border-color:var(--kvg-gold);
  box-shadow:0 10px 30px rgba(168,144,85,.5);transform:translateY(-3px);}
#kvg-top svg{width:20px;height:20px;}

/* ===== 3. Cinematic preloader ========================================== */
#kvg-loader{
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,#2c2c2c 0%,#161616 70%,#0d0d0d 100%);
  transition:opacity .8s ease,visibility .8s ease;}
#kvg-loader.done{opacity:0;visibility:hidden;}
#kvg-loader .kvg-mono{
  font-family:'Aboreto',serif;font-size:clamp(46px,8vw,88px);letter-spacing:.12em;
  color:transparent;background:linear-gradient(100deg,var(--kvg-gold) 20%,#f4e6b8 50%,var(--kvg-gold) 80%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  animation:kvgShine 2.4s linear infinite;}
#kvg-loader .kvg-line{
  position:absolute;bottom:calc(50% - 62px);left:50%;height:1px;width:0;
  background:linear-gradient(90deg,transparent,var(--kvg-gold-light),transparent);
  transform:translateX(-50%);animation:kvgLineGrow 1.6s var(--kvg-ease) forwards;}
@keyframes kvgShine{to{background-position:200% center;}}
@keyframes kvgLineGrow{to{width:210px;}}

/* ===== 4. Smart header ================================================= */
html.js-enhanced nav.ed-menu,
html.js-enhanced .menu-wrapper{
  transition:transform .5s var(--kvg-ease),box-shadow .4s ease,backdrop-filter .4s ease,background-color .4s ease;
  will-change:transform;}
html.js-enhanced .menu-wrapper.kvg-scrolled{
  box-shadow:0 8px 30px rgba(0,0,0,.28);}
html.js-enhanced nav.ed-menu.kvg-nav-up{transform:translateY(-115%);}
html.js-enhanced .menu-wrapper.kvg-nav-up{transform:translateY(-115%);}

/* ===== 5. Reveal on scroll ============================================= */
html.js-enhanced [data-kvg-reveal]{opacity:0;transition:opacity 1s var(--kvg-ease),transform 1s var(--kvg-ease);will-change:opacity,transform;}
html.js-enhanced [data-kvg-reveal="up"]{transform:translateY(46px);}
html.js-enhanced [data-kvg-reveal="zoom"]{transform:scale(.94);}
html.js-enhanced [data-kvg-reveal="left"]{transform:translateX(-46px);}
html.js-enhanced [data-kvg-reveal="right"]{transform:translateX(46px);}
html.js-enhanced [data-kvg-reveal].is-visible{opacity:1;transform:none;}

/* ===== 6. Property cards ============================================== */
html.js-enhanced .realEstate--box,
html.js-enhanced .real-estate-box{
  transition:transform .55s var(--kvg-ease),box-shadow .55s var(--kvg-ease);
  will-change:transform;position:relative;}
html.js-enhanced .realEstate--box:hover,
html.js-enhanced .real-estate-box:hover{
  transform:translateY(-12px);
  box-shadow:0 26px 55px -18px rgba(0,0,0,.5),0 0 0 1px rgba(194,164,109,.6);}
/* zoom the card image */
html.js-enhanced .realEstate--box .ed-image,
html.js-enhanced .real-estate-box .ed-image,
html.js-enhanced .ed-collection-item .ed-image{overflow:hidden;}
html.js-enhanced .realEstate--box .ed-image img,
html.js-enhanced .real-estate-box .ed-image img,
html.js-enhanced .ed-collection-item .ed-image img{
  transition:transform 1.1s var(--kvg-ease),filter .55s ease;}
html.js-enhanced .realEstate--box:hover .ed-image img,
html.js-enhanced .real-estate-box:hover .ed-image img,
html.js-enhanced .ed-collection-item:hover .ed-image img{transform:scale(1.09);filter:saturate(1.08);}
/* gold sweep line under the property name on hover */
html.js-enhanced .realEstate--name{position:relative;transition:color .4s ease;}
html.js-enhanced .realEstate--box:hover .realEstate--name{color:var(--kvg-gold-light);}

/* ===== 7. Generic image links zoom (galleries, feature images) ========= */
html.js-enhanced a > .ed-image,
html.js-enhanced .ed-image > a{overflow:hidden;display:block;}
html.js-enhanced .ed-image{overflow:hidden;}
html.js-enhanced .ed-image img{transition:transform 1.1s var(--kvg-ease);}
html.js-enhanced .ed-image:hover img{transform:scale(1.06);}

/* ===== 8. Buttons & links ============================================= */
/* primary / bordered buttons: shine sweep + lift */
html.js-enhanced .border-color-secondary,
html.js-enhanced .ed-button a,
html.js-enhanced .ed-button button{
  position:relative;overflow:hidden;
  transition:transform .4s var(--kvg-ease),box-shadow .4s ease,background-color .4s ease,color .4s ease;}
html.js-enhanced .border-color-secondary::after,
html.js-enhanced .ed-button a::after{
  content:"";position:absolute;top:0;left:-130%;width:70%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:none;pointer-events:none;}
html.js-enhanced .border-color-secondary:hover,
html.js-enhanced .ed-button a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(168,144,85,.35);}
html.js-enhanced .border-color-secondary:hover::after,
html.js-enhanced .ed-button a:hover::after{animation:kvgSweep .9s ease;}
@keyframes kvgSweep{0%{left:-130%;}100%{left:140%;}}

/* nav links: center-out gold underline */
html.js-enhanced nav.ed-menu a{position:relative;}
html.js-enhanced nav.ed-menu a::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:0;height:1.5px;
  background:var(--kvg-gold-bright);transition:width .35s var(--kvg-ease),left .35s var(--kvg-ease);}
html.js-enhanced nav.ed-menu a:hover::after{left:0;width:100%;}

/* ===== 9. Hero: Ken Burns + entrance ================================== */
html.js-enhanced .banner .background-image-holder{
  animation:kvgKenBurns 26s ease-in-out infinite alternate;will-change:transform;}
@keyframes kvgKenBurns{0%{transform:scale(1);}100%{transform:scale(1.13);}}
/* dramatic vignette for depth + legibility */
html.js-enhanced .banner{position:relative;}
html.js-enhanced .banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(0,0,0,.28) 100%),
             linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,rgba(0,0,0,.35));}
html.js-enhanced .banner .inner,
html.js-enhanced .banner > *:not(.background-image-holder){position:relative;z-index:2;}
/* hero content entrance after load */
html.js-enhanced.kvg-loaded .banner .ed-headline,
html.js-enhanced.kvg-loaded .banner .ed-text,
html.js-enhanced.kvg-loaded .banner .ed-button,
html.js-enhanced.kvg-loaded .banner .ed-image{
  animation:kvgHeroIn 1.1s var(--kvg-ease) both;}
html.js-enhanced.kvg-loaded .banner .ed-text{animation-delay:.15s;}
html.js-enhanced.kvg-loaded .banner .ed-button{animation-delay:.3s;}
@keyframes kvgHeroIn{from{opacity:0;transform:translateY(34px);}to{opacity:1;transform:none;}}

/* ===== 10. Section separators shimmer ================================= */
html.js-enhanced .ed-separator .inner,
html.js-enhanced hr{position:relative;overflow:hidden;}

/* ===== reduced motion ================================================= */
@media (prefers-reduced-motion:reduce){
  html.js-enhanced *,html.js-enhanced *::before,html.js-enhanced *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  html.js-enhanced [data-kvg-reveal]{opacity:1!important;transform:none!important;}
  #kvg-loader{display:none!important;}
}