/* =========================================================
   KIATPHONTIP — PREMIUM LAYER
   Additive polish: motion, depth, micro-interactions.
   Loaded on top of style.css. Honours reduced-motion.
   ========================================================= */

/* ---- gold scroll progress bar ---- */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright),var(--gold));
  box-shadow:0 0 12px rgba(230,200,120,.6);transition:width .12s linear}

/* ---- custom scrollbar ---- */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-deep),var(--gold));
    border-radius:20px;border:2px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold)}
}

/* =========================================================
   HERO — cinematic entrance + ambience
   ========================================================= */

/* slow sacred-wheel rotation on the yantra watermark */
.hero-yant{animation:yant-spin 90s linear infinite;transform-origin:50% 50%;
  will-change:transform}
@keyframes yant-spin{to{transform:translateY(-50%) rotate(360deg)}}

/* staggered reveal of hero content on load */
.hero .wrap > *{opacity:0;animation:hero-rise 1s var(--ease) forwards}
.hero .wrap > .eyebrow{animation-delay:.15s}
.hero .wrap > h1{animation-delay:.32s}
.hero .wrap > .lead{animation-delay:.54s}
.hero .wrap > .hero-cta{animation-delay:.72s}
.hero .wrap > .hero-meta{animation-delay:.9s}
@keyframes hero-rise{
  from{opacity:0;transform:translateY(26px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* hero headline accent — soft living glow */
.hero h1 .accent{position:relative;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-bright) 28%,#fff3d4 46%,var(--gold-bright) 64%,var(--gold) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:250% 0}}

/* drifting gold embers in the hero */
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-bright),rgba(201,162,74,0) 70%);
  opacity:0;animation:ember-rise linear infinite}
@keyframes ember-rise{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.6)}
  12%{opacity:.9}
  80%{opacity:.55}
  100%{opacity:0;transform:translateY(-86vh) translateX(var(--drift,20px)) scale(1.1)}
}

/* scroll cue — gentle bob */
.scroll-cue{animation:cue-bob 2.6s var(--ease) infinite}
@keyframes cue-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* hero meta — gold hairline that draws in under each stat */
.hero-meta > div{position:relative}
.hero-meta > div::after{content:"";position:absolute;left:0;bottom:-12px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold),transparent);transition:width 1s var(--ease) 1.1s}
.hero.lit .hero-meta > div::after{width:70%}

/* =========================================================
   ENHANCED SCROLL REVEAL
   ========================================================= */
.reveal{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.reveal:not(.in){filter:blur(5px)}
.reveal.in{filter:blur(0)}

/* directional + scale variants (opt-in via class) */
.reveal.from-left{transform:translateX(-46px)}
.reveal.from-right{transform:translateX(46px)}
.reveal.from-left.in,.reveal.from-right.in{transform:none}
.reveal.zoom{transform:scale(.94)}
.reveal.zoom.in{transform:none}

/* heading underline draw on reveal */
.shead h2{position:relative;display:inline-block}
.shead h2::after{content:"";position:absolute;left:0;bottom:-.28em;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold),transparent);transition:width 1.1s var(--ease) .25s}
.shead.center h2::after{left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.shead.reveal.in h2::after{width:64%}

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */

/* button shine sweep */
.btn{overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:left .65s var(--ease)}
.btn-ghost::after{background:linear-gradient(90deg,transparent,rgba(201,162,74,.32),transparent)}
.btn:hover::after{left:130%}

/* cursor-follow spotlight — only on elements whose ::before is free
   (price/plan reserve ::before & ::after for the featured gold border) */
.card,.quote,.sess,.guide-card{--mx:50%;--my:50%}
.card::before,.quote::before,.sess::before,.guide-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;opacity:0;
  transition:opacity .4s var(--ease);pointer-events:none;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(201,162,74,.14),transparent 60%)}
.card:hover::before,.quote:hover::before,.sess:hover::before,.guide-card:hover::before{opacity:1}
.card > *,.quote > *,.sess > *,.guide-card > *{position:relative;z-index:1}

/* yant roundel — always gently breathing, faster on hover (keeps existing spin) */
.card:hover .yant .motif{animation:motif-pulse 2.4s var(--ease) infinite}
@keyframes motif-pulse{0%,100%{opacity:1}50%{opacity:.72}}

/* nav links — letter lift on hover */
.nav-links a{transition:color .25s var(--ease),letter-spacing .25s var(--ease)}
.nav-links a:hover{letter-spacing:.14em}

/* media images — clip wipe as the frame reveals (keeps corner brackets intact) */
.media.framed.reveal img{clip-path:inset(0 0 0 100%);
  transition:clip-path 1.05s var(--ease) .15s,transform 1.2s var(--ease)}
.media.framed.reveal.in img{clip-path:inset(0 0 0 0)}

/* gallery tiles — staggered float + crisp gold frame on hover */
.gallery a{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.gallery a:hover{transform:translateY(-6px) scale(1.012);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8);border-color:var(--line-2);z-index:2}

/* trainer cards — name lifts, role brightens */
.trainer .info h3{transition:transform .5s var(--ease)}
.trainer:hover .info h3{transform:translateY(-4px)}

/* featured price/plan — soft pulsing halo */
.price.featured,.plan.featured{animation:feat-halo 5s var(--ease) infinite}
@keyframes feat-halo{0%,100%{box-shadow:0 0 0 0 rgba(201,162,74,0)}
  50%{box-shadow:0 0 46px -14px rgba(201,162,74,.4)}}

/* whatsapp float — slow attention pulse */
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid #25d366;animation:wa-ring 2.6s var(--ease) infinite}
@keyframes wa-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}

/* stats numbers — settle glow when counted */
.stats b,.hero-meta b{transition:text-shadow .5s var(--ease)}
.counting{text-shadow:0 0 18px rgba(230,200,120,.5)}

/* ---- ornament divider between band sections ---- */
.section.band{position:relative}
.section.band::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(340px,70vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);opacity:.7}
.section.band::after{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:9px;height:9px;border:1px solid var(--gold);background:var(--bg)}

/* ---- sticky mobile call-to-action bar ---- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:10px;padding:10px 14px
  calc(10px + env(safe-area-inset-bottom,0));
  background:linear-gradient(0deg,rgba(11,12,31,.98),rgba(11,12,31,.92));
  border-top:1px solid var(--line-2);backdrop-filter:blur(10px);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.mcta.show{transform:none}
.mcta .btn{flex:1;justify-content:center;padding:1em 1em;font-size:.78rem}
.mcta .btn svg{width:16px;height:16px}
@media (max-width:820px){
  .mcta{display:flex}
  .wa-float{display:none}              /* avoid clutter; CTA bar carries WhatsApp */
  body{padding-bottom:70px}
}

/* =========================================================
   reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-yant,.hero h1 .accent,.embers,.scroll-cue,.price.featured,.plan.featured,.wa-float::after{animation:none!important}
  .hero .wrap > *{opacity:1!important;animation:none!important}
  .hero h1 .accent{-webkit-text-fill-color:var(--gold-bright);background:none}
  .embers{display:none}
  .reveal:not(.in){filter:none!important}
  .media.framed.reveal img{clip-path:none!important}
  .shead h2::after{display:none}
}