/* JK Wrap Co. — animations. Load AFTER style.css. Delete this file + animations.js to remove all motion. */
@property --p{syntax:'<percentage>';inherits:true;initial-value:50%}
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- 1. Page-load sequence (hero) ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.js-anim .hero .note{animation:fadeUp .8s var(--ease) .1s both}
.js-anim .hero h1{animation:fadeUp .9s var(--ease) .3s both}
.js-anim .hero .sub{animation:fadeUp .9s var(--ease) .5s both}
.js-anim .hero .btns{animation:fadeUp .9s var(--ease) .7s both}
.js-anim .hero .strip{animation:fadeIn 1s ease 1s both}

/* slow drifting gold glow behind the hero text */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:520px;height:520px;right:-120px;top:-80px;border-radius:50%;
 background:radial-gradient(circle,rgba(201,162,74,.28),transparent 68%);filter:blur(10px);pointer-events:none;
 animation:drift 14s ease-in-out infinite alternate}
.hero .main,.hero .strip{position:relative;z-index:1}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-90px,70px) scale(1.2)}}

/* gold shimmer on the italic words in the hero headline */
h1 b{background:linear-gradient(100deg,var(--gold-d) 20%,#E0BC62 45%,var(--gold-d) 70%);background-size:220% 100%;
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{from{background-position:110% 0}to{background-position:-110% 0}}

/* ---------- 2. Scroll reveal ---------- */
.js-anim .rv{opacity:0;transform:translateY(30px);
 transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js-anim .rv.ph{transform:translateY(30px) scale(.97)}
.js-anim .rv.in{opacity:1;transform:none}
/* gold eyebrow lines draw outward */
.js-anim .rv.eyebrow::before,.js-anim .rv.eyebrow::after{width:0;transition:width .9s var(--ease) .35s}
.js-anim .rv.eyebrow.in::before,.js-anim .rv.eyebrow.in::after{width:40px}

/* ---------- 3. Header ---------- */
header{transition:box-shadow .3s ease,background .3s ease}
.bar,.logo img{transition:height .3s var(--ease)}
header.scrolled{box-shadow:0 6px 24px rgba(17,17,17,.08)}
header.scrolled .bar{height:62px}
header.scrolled .logo img{height:50px}
@media(min-width:901px){
 nav a:not(.btn){position:relative;padding:4px 0}
 nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
 nav a:not(.btn):hover::after{transform:scaleX(1)}
}

/* ---------- 4. Buttons ---------- */
.btn{position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s ease,background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(140,106,36,.22)}
.btn:active{transform:translateY(-1px)}
.btn.gold::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
 background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none}
.btn.gold:hover::before{animation:shine .8s ease}
@keyframes shine{to{left:130%}}

/* ---------- 5. Images, cards, lists ---------- */
.ph{overflow:hidden}
.ph img{transition:transform 1.4s var(--ease)}
.ph:hover img{transform:scale(1.06)}
.ph::after{transition:inset .5s var(--ease),border-color .5s}
.ph:hover::after{inset:20px;border-color:rgba(201,162,74,.6)}
.cell{transition:background .35s ease,box-shadow .35s ease}
.cell:hover{background:#fff;box-shadow:inset 0 3px 0 var(--gold)}
.cell h3{transition:color .3s}
.cell:hover h3{color:var(--gold-d)}
.num{transition:transform .5s var(--ease)}
.cell:hover .num{transform:translateX(6px)}
.list li::before{transition:width .35s var(--ease)}
.list li:hover::before{width:18px}
.cats span{transition:background .3s,color .3s,transform .3s var(--ease)}
.cats span:hover{background:var(--gold);color:#111;transform:translateY(-2px)}
.strip div{transition:background .3s}
.strip div:hover{background:rgba(201,162,74,.08)}

/* ---------- 6. FAQ ---------- */
summary::after{transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(180deg)}
details[open] p{animation:fadeDown .45s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 7. Before/after hint: handle sweeps once when scrolled into view ---------- */
.ba.hint{animation:sweep 2.6s ease-in-out 1}
@keyframes sweep{0%{--p:50%}30%{--p:28%}70%{--p:72%}100%{--p:50%}}

/* ---------- 8. Form fields ---------- */
input,select,textarea{transition:border-color .3s,box-shadow .3s}
input:focus,select:focus,textarea:focus{box-shadow:0 1px 0 var(--gold-d)}

/* ---------- 9. WhatsApp button ---------- */
.js-anim .wa{animation:waIn .7s var(--ease) 1.8s both,waPulse 2.8s ease-out 3s infinite;transition:transform .3s var(--ease)}
.wa:hover{transform:translateY(-3px) scale(1.04)}
@keyframes waIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes waPulse{0%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 0 rgba(201,162,74,.55)}
 70%,100%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 18px rgba(201,162,74,0)}}

/* ---------- Respect reduced-motion settings ---------- */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .js-anim .rv{opacity:1;transform:none}
}