/* KD Studio — scroll animations (layered on top of the built site)
   Reveals use CSS *animations* (not transitions) so they replay every time an element
   re-enters the viewport, and never interfere with the site's own hover transitions. */
:root{--ease:cubic-bezier(.2,.75,.2,1)}

/* progress bar */
#kd-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:100;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#8a0010,#ff0a1e);box-shadow:0 0 14px rgba(255,10,30,.7);pointer-events:none}
html:has(main[dir=rtl]) #kd-progress{transform-origin:right}

/* ---------- reveals ---------- */
.kd-js [data-anim]{opacity:0}
.kd-js [data-anim=chars],.kd-js [data-anim=fade]{opacity:1}
.kd-js [data-anim=up][data-in]{animation:kdUp .95s var(--ease) both;animation-delay:var(--d,0ms)}
.kd-js [data-anim=zoom][data-in]{animation:kdZoom 1s var(--ease) both;animation-delay:var(--d,0ms)}
.kd-js [data-anim=fade][data-in]{animation:kdFade 1s ease both;animation-delay:var(--d,0ms)}
@keyframes kdUp{from{opacity:0;translate:0 56px}to{opacity:1;translate:0 0}}
@keyframes kdZoom{from{opacity:0;translate:0 34px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
@keyframes kdFade{from{opacity:0}to{opacity:1}}

/* ---------- letter-by-letter text ---------- */
.kd-orig{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kd-w{display:inline-block;white-space:nowrap}
.kd-c{display:inline-block;opacity:0;will-change:transform,opacity}
[data-in] .kd-c{animation:kdChar .75s var(--ease) both;animation-delay:calc(var(--base,0ms) + var(--i) * var(--step,34ms))}
@keyframes kdChar{
  0%{opacity:0;translate:0 .7em;rotate:6deg;filter:blur(8px)}
  60%{filter:blur(0)}
  100%{opacity:1;translate:0 0;rotate:0deg;filter:blur(0)}
}

/* ---------- hero entrance (plays on load) ---------- */
.kd-js .kd-hero-in{animation:kdUp 1.1s var(--ease) both;animation-delay:var(--d,0ms)}
.kd-js .hero-beam{animation:kdBeam 1.6s var(--ease) both .1s}
@keyframes kdBeam{from{opacity:0;translate:-8% 0}to{opacity:1;translate:0 0}}

/* dots twinkle */
#top span.size-1{animation:kdTw 3.2s ease-in-out infinite;animation-delay:var(--td,0s)}
@keyframes kdTw{50%{opacity:.25;scale:.6}}

/* mouse spotlight in hero */
#top{--mx:50%;--my:40%}
#top::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,10,30,.16),transparent 60%)}

/* ---------- service cards: keep the site's own hover (tint + lift), add polish ---------- */
.service-item{position:relative;overflow:hidden}
.service-item::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,10,30,.22),transparent 65%)}
.service-item:hover::before{opacity:1}
.service-item::after{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:#ff0a1e;box-shadow:0 0 14px #ff0a1e;scale:0 1;transform-origin:left;transition:scale .55s var(--ease)}
main[dir=rtl] .service-item::after{transform-origin:right}
.service-item:hover::after{scale:1 1}
.service-item svg{transition:filter .35s,scale .35s var(--ease)}
.service-item:hover svg{filter:drop-shadow(0 0 8px rgba(255,10,30,.9));scale:1.15}

/* project cards: tilt */
.project{transition:transform .25s ease-out;transform-style:preserve-3d}
.project img{will-change:scale}

/* CTA pulse */
#contact a[href^=mailto],#contact a.group{animation:kdPulse 2.6s ease-in-out infinite}
@keyframes kdPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,10,30,.45)}50%{box-shadow:0 0 0 14px rgba(255,10,30,0)}}

[data-count]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .kd-js [data-anim],.kd-js .kd-hero-in,.kd-js .hero-beam,.kd-c{opacity:1!important;animation:none!important;translate:none!important;filter:none!important}
  #top span.size-1,#contact a{animation:none!important}
}
@media (hover:none){.project{transform:none!important}}

/* ---------- readability + bigger logo ---------- */
.section-index,
#top .font-mono,
[class*="text-[10px]"],
[class*="text-[9px]"],
[class*="text-[11px]"]{font-size:clamp(.82rem,.78rem + .2vw,.98rem)!important;letter-spacing:.14em!important;line-height:1.5}
footer [class*="text-[9px]"]{font-size:.85rem!important;letter-spacing:.06em!important}
.service-item small,.service-item .font-mono{font-size:.8rem!important}
/* Hebrew / Arabic: the mono font has no such glyphs and wide tracking breaks letter joining */
main[dir=rtl] .section-index,
main[dir=rtl] .font-mono,
main[dir=rtl] [class*="text-[10px]"],
main[dir=rtl] [class*="text-[9px]"],
main[dir=rtl] [class*="text-[11px]"]{font-family:inherit!important;letter-spacing:0!important;font-weight:700!important;font-size:clamp(.95rem,.9rem + .25vw,1.1rem)!important}
main[dir=rtl] footer [class*="text-[9px]"]{font-size:.95rem!important;font-weight:400!important}
/* logo */
nav img.size-11{width:64px!important;height:64px!important}
footer img.size-9{width:52px!important;height:52px!important}
nav .font-black.uppercase{font-size:1.35rem!important}
footer .font-black.uppercase{font-size:1rem!important}
@media (max-width:640px){nav img.size-11{width:52px!important;height:52px!important}}

/* nav links bigger */
nav .nav-link{font-size:1.05rem!important;letter-spacing:.02em!important;font-weight:700}
nav .nav-link:after{bottom:-.6rem}
main[dir=rtl] nav .nav-link{font-size:1.15rem!important;letter-spacing:0!important}