/* ir-kit.css — shared base for the .ir portfolio (RTL, Vazirmatn, motion kit, conversion furniture)
   Sites import this FIRST, then their own brand stylesheet. Keep brand colors OUT of this file.
   Fonts: copy _shared_ir/fonts/*.woff2 to site/assets/fonts/. */

@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-Black.woff2") format("woff2");font-weight:900;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Vazirmatn",system-ui,"Segoe UI",Tahoma,sans-serif;line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.35;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em}
bdi,.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}
.container{inline-size:min(100% - 2rem,1180px);margin-inline:auto}
@media (min-width:768px){.container{inline-size:min(100% - 3rem,1180px)}}

/* Accessibility — direction-agnostic visually-hidden. NEVER use negative offsets (RTL site-killer, see CLAUDE.md). */
.visually-hidden,.hp,.sr-only{position:absolute!important;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:1000;padding:.6rem 1rem;border-radius:8px;background:#000;color:#fff;transform:translateY(-200%);opacity:0;transition:transform .2s,opacity .2s}
.skip-link:focus{transform:none;opacity:1;outline:3px solid #fff}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* Mobile rules */
@media (max-width:680px){input,select,textarea{font-size:16px}}
.tap{min-block-size:44px;min-inline-size:44px}

/* Motion kit (agency-website-builder standard kit) */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-stagger>*{animation:rise .7s ease both}
.hero-stagger>*:nth-child(1){animation-delay:.05s}
.hero-stagger>*:nth-child(2){animation-delay:.15s}
.hero-stagger>*:nth-child(3){animation-delay:.28s}
.hero-stagger>*:nth-child(4){animation-delay:.4s}
.hero-stagger>*:nth-child(5){animation-delay:.52s}
.hero-stagger>*:nth-child(6){animation-delay:.64s}
html.js-anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
html.js-anim .reveal.visible{opacity:1;transform:none}
.kicker{position:relative;display:inline-block}
.kicker::after{content:"";display:block;block-size:2px;inline-size:0;margin-block-start:.35rem;background:currentColor;transition:inline-size .5s ease .25s}
.reveal.visible .kicker::after,.hero .kicker::after{inline-size:38px}
.progress{position:fixed;inset-block-start:0;inset-inline-start:0;block-size:3px;inline-size:0;z-index:1200;pointer-events:none}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(4%,6%)}}
.blob{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.blob.b2{animation-duration:22s;animation-direction:alternate-reverse}
@media (prefers-reduced-motion:reduce){
  .hero-stagger>*{animation:none}
  html.js-anim .reveal{opacity:1;transform:none;transition:none}
  .blob{animation:none}.progress{display:none}
  .wa-float::after{animation:none}
  .spot{display:none}
}

/* Conversion furniture */
.wa-float{position:fixed;inset-inline-end:22px;inset-block-end:22px;z-index:90;inline-size:58px;block-size:58px;border-radius:50%;background:#1FAF64;display:grid;place-items:center;box-shadow:0 10px 26px rgba(31,175,100,.45);transition:transform .2s ease,box-shadow .25s ease}
.wa-float svg{inline-size:30px;block-size:30px;fill:#fff}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1FAF64;animation:wa-pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@media (max-width:640px){.wa-float{inline-size:54px;block-size:54px;inset-inline-end:16px;inset-block-end:16px}}

/* Pointer-reactive layer: spotlight follower (desktop only) */
.spot{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:360px;block-size:360px;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.15);transition:opacity .4s ease,transform .65s cubic-bezier(.19,1,.22,1);will-change:transform}
[data-spot]{position:relative;overflow:hidden;isolation:isolate}
@media (hover:none),(pointer:coarse){.spot,[data-tilt]{transform:none!important}.spot{display:none}}

/* Forms */
.form-status{min-block-size:1.5em;font-size:.95rem}
.form-status.ok{color:#1a7f4b}.form-status.err{color:#b3261e}