/* KJA Farhani K.N. — motion & diagram layer (shared by all pages) */
:root{--ease:cubic-bezier(.2,.7,.2,1);--accent-soft:rgba(29,78,137,.10);--glow:rgba(29,78,137,.28)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent-soft:rgba(127,176,232,.12);--glow:rgba(127,176,232,.35)}}

/* header: shadow + reading progress */
.top{transition:box-shadow .3s var(--ease),background .3s}
.top.scrolled{box-shadow:0 6px 24px rgba(10,20,35,.10)}
.top nav a:not(.nav-cta){position:relative}
.top nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.top nav a:not(.nav-cta):hover::after{transform:scaleX(1)}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);z-index:30;pointer-events:none}

/* buttons */
.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,20,35,.16);opacity:1}
.btn-primary::after,.btn-wa::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-primary:hover::after,.btn-wa:hover::after{left:130%}

/* section eyebrow with growing rule */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";display:block;height:2px;width:36px;background:var(--accent);transition:width .9s var(--ease)}
.js .eyebrow:not(.in)::before{width:0}

/* generic reveal */
.js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js [data-rv].in{opacity:1;transform:none}

/* hero entrance */
@keyframes kjaUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes kjaIn{from{opacity:0;transform:translateX(28px) scale(.98)}to{opacity:1;transform:none}}
.js .hero .wrap > div > *{animation:kjaUp .9s var(--ease) both}
.js .hero .wrap > div > *:nth-child(2){animation-delay:.12s}
.js .hero .wrap > div > *:nth-child(3){animation-delay:.24s}
.js .hero .wrap > div > *:nth-child(4){animation-delay:.36s}
.js .hero .letterhead{animation:kjaIn 1s .2s var(--ease) both}
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 80% at 85% 30%,#000 10%,transparent 70%);
  animation:ledger 40s linear infinite}
@keyframes ledger{to{background-position:0 320px}}
.hero .wrap{position:relative}
.letterhead{position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.letterhead:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,20,35,.14)}

/* list-like items: hover accent */
.svc div,.rel > div,.dl-list div{position:relative}
.svc div::before,.dl-list div::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.svc div:hover::before,.dl-list div:hover::before{transform:scaleX(1)}
.person{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.person:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,20,35,.12);border-color:var(--accent)}
.list-art{transition:padding .3s var(--ease)}
.list-art:hover{padding-left:10px}

/* faq */
summary::after{transition:transform .3s var(--ease)}
details[open] summary::after{content:"+";transform:rotate(45deg)}
details[open] > p{animation:kjaUp .45s var(--ease) both}

/* floating WA pulse */
.float-wa button{position:relative}
.float-wa button::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);animation:waPulse 2.6s var(--ease) infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.35);opacity:0}}
.float-wa.open .menu a{animation:kjaUp .3s var(--ease) both}
.float-wa.open .menu a:nth-child(2){animation-delay:.06s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-rv]{opacity:1;transform:none}
  .js .eyebrow:not(.in)::before{width:36px}
}