/* Intro (#intro). Prefix: hi-
   The home hero. One promise (a two-line H1, the second line in Zimam blue), two doors (Book a demo,
   See how it works), then the product itself: the real Zimam overview, still, in our own quiet frame.
   - The light: a thin line of Zimam blue runs round the frame's edge, one slow lap every 8 s, with a
     faint halo following it. Each is a conic gradient turned by transform (compositor only); the opaque
     screenshot hides all of it except a 1.5px band at the edge (the ring) and a soft band outside (the halo).
     JS switches it on once the frame has landed and pauses it while the hero is off screen.
   - Scroll: the frame starts leaning back and settles flat as you scroll (js/h-intro.js, scrubbed).
   - Reduced motion: flat, a static hairline, no light. */

.hi {
  overflow-x: clip;
  padding-block-start: calc(var(--nav-h) + clamp(28px, 3.3vw, 50px));
  padding-block-end: clamp(40px, 4.6vw, 72px);
}

/* ---------- Head ---------- */
.hi__head { display: grid; justify-items: center; text-align: center; }
.hi-chip { gap: 8px; padding-block: 5px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.hi-chip__ico {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--z-blue); color: #fff;
}
.hi-chip__ico .ico { width: 13px; height: 13px; vertical-align: 0; }
.hi-title { margin-block-start: clamp(18px, 2vw, 24px); }
.hi-title__accent { color: var(--z-blue-text); }
.hi-sub { margin-block-start: clamp(16px, 1.7vw, 22px); max-width: 42rem; text-wrap: balance; }
.hi-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: clamp(24px, 2.5vw, 34px); }
.hi-cta { min-height: 52px; padding-inline: 26px; font-size: 1.0625rem; }
.hi-cta__ico { width: 1em; height: 1em; transition: transform var(--t-base) var(--ease-out); }
.hi-cta:hover .hi-cta__ico { transform: translateX(3px); }
[dir="rtl"] .hi-cta:hover .hi-cta__ico { transform: scaleX(-1) translateX(3px); }
:lang(ar) .hi-sub { max-width: 44rem; }

/* ---------- Stage: perspective for the scroll tilt (js/h-intro.js turns .hi-stage) ---------- */
.hi__stagewrap { margin-block-start: clamp(40px, 4vw, 56px); perspective: 1800px; perspective-origin: 50% 0%; }
.hi-stage { max-width: 1200px; margin-inline: auto; transform-origin: 50% 100%; }

/* ---------- The frame ---------- */
.hi-frame {
  --hi-r: clamp(12px, 1.4vw, 20px);   /* corner radius */
  --hi-bw: 1.5px;                     /* ring width */
  --hi-reach: 22px;                   /* how far the halo spreads */
  --hi-line: rgba(10, 10, 30, .1);    /* the hairline the light runs along */
  --hi-sh: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 48px -12px rgba(30, 44, 80, .14), 0 60px 120px -40px rgba(51, 92, 255, .12);
  /* The light, clockwise from the top: a long light-blue tail, a Zimam-blue head, a short soft lead. */
  --hi-light: conic-gradient(rgba(157, 180, 255, 0) 0 74%, rgba(157, 180, 255, .75) 88%, #335CFF 96%, rgba(51, 92, 255, 0) 99.2%);
  --hi-glow: conic-gradient(rgba(120, 150, 255, 0) 0 76%, rgba(120, 150, 255, .2) 88%, rgba(51, 92, 255, .5) 96%, rgba(51, 92, 255, 0) 99.2%);
  position: relative;
  border-radius: var(--hi-r);
  box-shadow: var(--hi-sh);
}
[data-theme="dark"] .hi-frame {
  --hi-line: rgba(255, 255, 255, .12);
  --hi-sh: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 60px 120px -40px rgba(51, 92, 255, .18);
  --hi-light: conic-gradient(rgba(157, 176, 255, 0) 0 74%, rgba(157, 176, 255, .7) 88%, #6F8BFF 96%, rgba(111, 139, 255, 0) 99.2%);
  --hi-glow: conic-gradient(rgba(123, 147, 255, 0) 0 76%, rgba(123, 147, 255, .2) 88%, rgba(91, 123, 255, .55) 96%, rgba(91, 123, 255, 0) 99.2%);
}

/* The screenshot (a light UI in both themes; the placeholder is its own paper colour while it loads) */
.hi-shot { position: relative; z-index: 2; display: block; border-radius: var(--hi-r); overflow: hidden; background: #F4F5F7; }
.hi-shot__img { display: block; width: 100%; height: auto; }

/* Ring and halo: rounded boxes just outside the screenshot, each holding the turning gradient */
.hi-ring, .hi-halo { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.hi-ring {
  inset: calc(var(--hi-bw) * -1);
  border-radius: calc(var(--hi-r) + var(--hi-bw));
  background: var(--hi-line);
}
.hi-halo {
  z-index: 0;
  inset: calc(var(--hi-reach) * -1);
  border-radius: calc(var(--hi-r) + var(--hi-reach));
  /* full at the frame's edge, gone at the outer edge (an eased fade on all four sides) */
  --hi-edge: transparent 0, rgba(0, 0, 0, .25) calc(var(--hi-reach) * .4), rgba(0, 0, 0, .7) calc(var(--hi-reach) * .75), #000 var(--hi-reach),
             #000 calc(100% - var(--hi-reach)), rgba(0, 0, 0, .7) calc(100% - var(--hi-reach) * .75), rgba(0, 0, 0, .25) calc(100% - var(--hi-reach) * .4), transparent 100%;
  -webkit-mask-image: linear-gradient(to right, var(--hi-edge)), linear-gradient(to bottom, var(--hi-edge));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, var(--hi-edge)), linear-gradient(to bottom, var(--hi-edge));
  mask-composite: intersect;
}

/* The turning gradient: a square that covers its box at every angle, centred on the frame */
.hi-spin {
  position: absolute;
  left: 50%; top: 50%;
  width: 130%; aspect-ratio: 1;
  margin: -65% 0 0 -65%;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
  animation: hi-lap 8s linear infinite paused;
}
.hi-ring .hi-spin { background: var(--hi-light); }
.hi-halo .hi-spin { background: var(--hi-glow); }
[dir="rtl"] .hi-spin { scale: -1 1; } /* the mirror image: the light runs anticlockwise */
@keyframes hi-lap { to { transform: rotate(1turn); } }

.hi-frame.is-glow .hi-spin { opacity: 1; animation-play-state: running; }
.hi-frame.is-glow.is-off .hi-spin { animation-play-state: paused; }

/* Hidden until the load motion runs (core removes js-motion if boot stalls). */
html.js-motion .hi-rise { visibility: hidden; }

/* ---------- Short laptop screens (1366 x 768, 1280 x 800): a tighter rhythm, so the dashboard still peeks in ---------- */
@media (min-width: 1024px) and (max-height: 860px) {
  .hi { padding-block-start: calc(var(--nav-h) + 20px); }
  .hi-title { margin-block-start: 16px; font-size: min(var(--fs-hero), 11.4vh); }
  .hi-sub { margin-block-start: 14px; }
  .hi-ctas { margin-block-start: 22px; }
  .hi__stagewrap { margin-block-start: 34px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .hi { padding-block-start: calc(var(--nav-h) + 30px); }
  .hi-chip { font-size: .78rem; }
  .hi-ctas { width: 100%; max-width: 420px; }
  .hi-cta { flex: 1 1 100%; min-height: 50px; }
  .hi__stagewrap { margin-block-start: 40px; perspective: 1000px; }
  .hi-frame { --hi-reach: 12px; }
}

/* ---------- Reduced motion: a still frame with a static hairline ---------- */
@media (prefers-reduced-motion: reduce) {
  .hi-spin { display: none; }
}