/* ============================================================
   KALYA TRADING — motion & micro-interaction layer
   Sits ON TOP of the original design. Changes no colours, no
   layout — only adds movement, depth and polish.
   All initial-hidden states are gated behind html.kt-enh so the
   site is fully visible if JS never runs. Motion is wrapped in
   prefers-reduced-motion: no-preference.
   ============================================================ */

/* ---- scroll progress bar ---- */
.kt-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,#C5A880,#e6cfa5);box-shadow:0 0 12px rgba(197,168,128,.6);
  transition:width .1s linear;pointer-events:none}

/* ============================================================
   ADVANCED BUTTONS
   .kt-btn is applied by JS to every call-to-action on every page.
   ============================================================ */
.kt-btn{position:relative;overflow:hidden;isolation:isolate;
  transition:background-color .35s ease,color .35s ease,box-shadow .4s var(--kt-ease,cubic-bezier(.16,1,.3,1));
  will-change:transform}
/* gloss sweep */
.kt-btn::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.38) 50%,transparent 80%);
  transform:translateX(-130%);transition:transform .7s var(--kt-ease,cubic-bezier(.16,1,.3,1))}
.kt-btn > *{position:relative;z-index:2}
@media (prefers-reduced-motion: no-preference){
  .kt-btn:hover::before{transform:translateX(130%)}
}
.kt-btn:hover{box-shadow:0 14px 34px -12px rgba(17,24,22,.55)}
.kt-btn:focus-visible{box-shadow:0 0 0 3px rgba(197,168,128,.55)}

/* ============================================================
   SCROLL REVEAL — upgraded feel + directional + stagger
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.kt-enh .reveal{opacity:0;transform:translateY(56px) scale(.986);filter:blur(5px);
    transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter .9s ease;
    will-change:opacity,transform}
  html.kt-enh .reveal.active{opacity:1;transform:none;filter:none}

  /* directional variants (added by JS to selected blocks) */
  html.kt-enh .kt-rev-l{transform:translateX(-60px)}
  html.kt-enh .kt-rev-r{transform:translateX(60px)}
  html.kt-enh .kt-rev-l.active,html.kt-enh .kt-rev-r.active{transform:none}

  /* staggered children inside a revealed container */
  html.kt-enh .kt-stagger > *{opacity:0;transform:translateY(28px);filter:blur(4px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .7s ease;
    transition-delay:calc(var(--i,0) * 85ms)}
  html.kt-enh .kt-stagger.active > *{opacity:1;transform:none;filter:none}
}

/* ============================================================
   PARALLAX
   ============================================================ */
.kt-par{will-change:transform}

/* Ken Burns drift on hero / lead imagery */
@media (prefers-reduced-motion: no-preference){
  .kt-kenburns{animation:ktKen 18s ease-in-out infinite alternate;transform-origin:60% 40%}
  @keyframes ktKen{from{transform:scale(1.02)}to{transform:scale(1.12)}}
}

/* ============================================================
   HERO — scroll cue
   ============================================================ */
.kt-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;color:#C5A880;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.85}
.kt-cue svg{width:1.1rem;height:1.1rem}
@media (prefers-reduced-motion: no-preference){
  .kt-cue svg{animation:ktBob 1.8s ease-in-out infinite}
  @keyframes ktBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
}
@media (max-width:640px){.kt-cue{display:none}}

/* ============================================================
   COUNTERS — subtle emphasis while ticking
   ============================================================ */
.kt-count.kt-run{color:#C5A880}

/* ============================================================
   HEADER — shrink + elevate on scroll (index/uses fixed header)
   ============================================================ */
header.kt-shrink{box-shadow:0 10px 30px -18px rgba(17,24,22,.5)}
@media (prefers-reduced-motion: no-preference){
  header.kt-shrink .max-w-7xl.h-24{transition:height .35s var(--kt-ease,cubic-bezier(.16,1,.3,1))}
}

/* ============================================================
   COMMODITY CARDS — lift, gold wipe, tilt (index #collections)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.kt-enh #collections .group{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
  html.kt-enh #collections .group{transform-style:preserve-3d}
}
html.kt-enh #collections .group{position:relative}
html.kt-enh #collections .group::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#C5A880,#e6cfa5);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:30;pointer-events:none}
html.kt-enh #collections .group:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion: no-preference){
  html.kt-enh #collections .group:hover{box-shadow:0 30px 60px -22px rgba(17,24,22,.5)}
}

/* related-line cards on commodity pages */
@media (prefers-reduced-motion: no-preference){
  html.kt-enh .kt-rel{transition:background .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
  html.kt-enh .kt-rel:hover{transform:translateY(-4px)}
}

/* ============================================================
   FORM & FIELD MICRO-INTERACTIONS
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.kt-enh input,html.kt-enh textarea,html.kt-enh select{
    transition:border-color .3s ease,box-shadow .35s ease,background-color .3s ease,transform .2s ease}
  html.kt-enh input:focus,html.kt-enh textarea:focus,html.kt-enh select:focus{
    box-shadow:0 6px 20px -10px rgba(197,168,128,.8),0 0 0 3px rgba(197,168,128,.22);
    transform:translateY(-1px)}
  /* field label lifts slightly when its control is focused */
  html.kt-enh .kt-field-focus label{color:#8A6D3B;transform:translateY(-1px)}
  html.kt-enh label{transition:color .25s ease,transform .25s ease;display:inline-block}
}

/* submit button loading spinner */
#form-submit-btn.kt-loading{position:relative;color:transparent!important}
#form-submit-btn.kt-loading::after{content:"";position:absolute;top:50%;left:50%;width:1.1rem;height:1.1rem;
  margin:-.55rem 0 0 -.55rem;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:ktSpin .7s linear infinite}
@keyframes ktSpin{to{transform:rotate(360deg)}}

/* success flash on the status box */
@media (prefers-reduced-motion: no-preference){
  .kt-flash{animation:ktFlash .6s ease}
  @keyframes ktFlash{0%{transform:scale(.98);opacity:.4}100%{transform:none;opacity:1}}
}

/* ============================================================
   MAGNETIC / TILT — only where a real pointer exists
   ============================================================ */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .kt-magnetic{transition:transform .25s cubic-bezier(.16,1,.3,1)}
  .kt-tilt{transition:transform .3s cubic-bezier(.16,1,.3,1)}
}

/* floating WhatsApp: gentle attention pulse (keeps its fixed positioning) */
@media (prefers-reduced-motion: no-preference){
  a[href*="wa.me"].fixed::after, a.kt-wa::after{content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:ktPulse 2.6s ease-out infinite;pointer-events:none;z-index:-1}
  @keyframes ktPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
}