/* =========================================================
   Dokan Zaman — base styles
   The design is built with Tailwind CSS (js/tailwind.config.js holds the colours, screens and the
   shared components; each page styles its sections with utility classes).
   This file keeps only what sits under Tailwind: the design tokens, the base reset,
   keyframes + animated decorations, and the scroll-reveal.
   Performance: animate transform/opacity only, looping animations pause off-screen.
   ========================================================= */

:root {
  --pad: 32px;                              /* inner padding of every card */
  --gap: 16px;                              /* space between cards in a grid */
  --sec-y: clamp(56px, 7vw, 88px);          /* top and bottom of every section */
  interpolate-size: allow-keywords;
  color-scheme: light;
}
@media (max-width: 600px) {
  :root { --pad: 20px; }
}

/* ---------- Base (Tailwind's own reset is off) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif; font-size: 1.05rem; line-height: 1.8;
  color: #1C1C1E; background: #F2F1EE; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.4; color: #0F0F10; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: #F37221; color: #fff; }
:focus-visible { outline: 3px solid #F37221; outline-offset: 3px; border-radius: 8px; }
@media (max-width: 600px) {
  body { font-size: 1rem; }
}

/* ---------- Keyframes ---------- */
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes whoosh { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-30%) scaleX(1); opacity: 0; } }
@keyframes marquee { to { transform: translateX(50%); } }          /* homepage ticker + clients logos */
@keyframes reveal { from { opacity: 0; translate: 0 26px; } }
@keyframes wa-ping { from { transform: scale(1); opacity: .55; } to { transform: scale(1.55); opacity: 0; } }

/* ---------- Animated logo (homepage brand tile, about page) ---------- */
.brand-art { position: relative; flex: 1; display: grid; place-items: center; }
.brand-art img { width: min(58%, 250px); position: relative; animation: bob 6s ease-in-out infinite; will-change: transform; }
.brand-art__lines { position: absolute; left: 4%; top: 50%; width: 36%; height: 44px; margin-top: -22px; display: flex; flex-direction: column; justify-content: space-between; }
.brand-art__lines i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, transparent, #F37221); transform-origin: right; animation: whoosh 2.4s cubic-bezier(.22, .8, .24, 1) infinite; will-change: transform, opacity; }
.brand-art__lines i:nth-child(2) { animation-delay: .4s; background: linear-gradient(90deg, transparent, #fff); }
.brand-art__lines i:nth-child(3) { animation-delay: .8s; width: 70%; }
@media (max-width: 600px) {
  .brand-art img { width: min(34%, 120px); }
}
/* homepage brand tile: logo only, centred, in its original colours */
.tile--brand .brand-art { width: 100%; height: 100%; }
.tile--brand .brand-art img { width: auto; height: min(78%, 210px); max-width: 62%; }
.tile--brand .brand-art__lines { left: 6%; width: 30%; }
.tile--brand .brand-art__lines i:nth-child(2) { background: linear-gradient(90deg, transparent, #1A3659); }
@media (max-width: 600px) {
  .tile--brand .brand-art img { height: min(72%, 130px); }
}

/* WhatsApp button: soft attention ring, three pulses after load */
.wa-float::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #25D366; animation: wa-ping 2.4s ease-out 1s 3;
}

/* ---------- نموذج «اطلب عرض سعر»: رسالة الخطأ تحت الحقل نفسه (js/main.js) ----------
   الرسالة خارج مقاس الحقل (absolute) حتى لا يتحرك عنوانه العائم، والحقل ياخد مسافة تحته طول ما فيه خطأ */
.f.has-err { margin-bottom: 22px; }
.f .f-err { position: absolute; top: calc(100% + 5px); right: 6px; left: 6px; font-size: .85rem; line-height: 1.4; font-weight: 500; color: #E04848; }

/* ---------- «كيف نعمل» (blocks/process): عدد الخطوات من المحرر على الشاشات الكبيرة (على الموبايل عمود واحد) ---------- */
@media (min-width: 761px) {
  .dz-steps[style*="--steps"] { grid-template-columns: repeat(var(--steps), 1fr); }
}

/* ---------- Scroll reveal (main.js adds .js to <html> and .is-in to each block) ---------- */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal].is-in { animation: reveal .75s cubic-bezier(.22, .8, .24, 1) var(--d, 0s) backwards; }
[data-anim].is-paused *, [data-anim].is-paused *::before, [data-anim].is-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal]:not(.is-in) { opacity: 1; }
  .wa-float::before { animation: none; }
}