/* ==========================================================================
   WafiTo — homepage design pass (Apple HIG-informed)
   SCOPED to html.hd so it loads on / only. Nothing here touches other pages.

   Adaptation note: the source guidance calls for negative tracking on large
   display type. That rule is Latin-specific — Arabic is cursive and
   letter-spacing severs the joins between letters. Tracking here is applied
   ONLY to Latin runs (.en, wordmark, kickers). Arabic keeps its natural
   letterforms and the looser leading the script needs.
   ========================================================================== */

html.hd {
  /* Apple-ish critically damped curve: fast out, settles without overshoot.
     Used everywhere instead of plain `ease`, which lands too softly. */
  --hd-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --hd-fast: 100ms;   /* press feedback — must feel instantaneous */
  --hd-base: 400ms;   /* default UI transition (guidance: 0.3–0.4s) */
}

/* --------------------------------------------------------------------------
   1. RESPONSE — feedback on press, not release.
   Guidance: "when lag appears, directness falls off a cliff".
   -------------------------------------------------------------------------- */
html.hd .btn,
html.hd .wf-cta,
html.hd .card,
html.hd .wf-theme,
html.hd .wf-burger {
  transition: transform var(--hd-fast) ease-out,
              background-color 220ms var(--hd-spring),
              border-color 220ms var(--hd-spring),
              box-shadow 220ms var(--hd-spring);
  -webkit-tap-highlight-color: transparent;
}
/* :active fires on pointer-down — no wait for click */
html.hd .btn:active,
html.hd .wf-cta:active { transform: scale(0.97); }
html.hd .card:active   { transform: scale(0.995); }

/* --------------------------------------------------------------------------
   2. MATERIALS & DEPTH — translucent chrome, content flows underneath.
   Adds saturation (colour stays alive through blur) and a bright top edge so
   the surface catches light. The hard 1px hairline is replaced by a soft
   scroll-edge gradient, per the guidance against borders under sticky headers.
   -------------------------------------------------------------------------- */
html.hd .wf-nav {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: none;                       /* was a hard hairline */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);  /* light catch */
  position: relative;
}
/* soft edge where floating chrome meets content, instead of a drawn line */
html.hd .wf-nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -14px;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--sh-nav-bg), transparent);
  opacity: 0.85;
}
html[data-theme="dark"].hd .wf-nav {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — hierarchy from weight + size + leading as a set.
   Tracking is Latin-only (see header note). Arabic leading stays generous.
   -------------------------------------------------------------------------- */

/* Latin runs: optical tracking, tightening as size grows */
html.hd .en,
html.hd .wf-brand span,
html.hd .wf-foot-brand .nm {
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
/* small uppercase labels want the opposite — open them up */
html.hd .kicker,
html.hd .wf-social a,
html.hd .wf-foot-bottom span,
html.hd .wf-foot-bottom a {
  letter-spacing: 0.08em;
}

/* Arabic display: no tracking; leading tuned for ascenders + diacritics */
html.hd .hero h1 {
  line-height: 1.28;
  letter-spacing: normal;
  text-wrap: balance;
}
html.hd .sec h2,
html.hd .band h2 {
  line-height: 1.34;
  letter-spacing: normal;
  text-wrap: balance;
}
/* body: one consistent measure and leading, not three near-identical values */
html.hd .hero p,
html.hd .sec p,
html.hd .read p {
  line-height: 1.78;
  letter-spacing: normal;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. MOTION — shorter, spring-like, compositor-only.
   Guidance: default UI settles in 0.3–0.4s with no overshoot. The previous
   0.7s ease read as sluggish and arrived without authority.
   -------------------------------------------------------------------------- */
html.hd.js .reveal {
  transform: translateY(18px);
  transition: opacity var(--hd-base) var(--hd-spring),
              transform var(--hd-base) var(--hd-spring);
  will-change: opacity, transform;
}
html.hd.js .reveal.in {
  transform: none;
  will-change: auto;            /* release the layer once settled */
}
html.hd.js .reveal.in > * {
  animation: hd-rise 360ms var(--hd-spring) backwards;
}
html.hd.js .reveal.in > *:nth-child(2) { animation-delay: 50ms; }
html.hd.js .reveal.in > *:nth-child(3) { animation-delay: 100ms; }
html.hd.js .reveal.in > *:nth-child(4) { animation-delay: 150ms; }
@keyframes hd-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY — the guidance asks for three preference queries.
   Only reduced-motion existed; transparency and contrast are added here.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.hd.js .reveal { opacity: 1; transform: none; transition: none; }
  html.hd.js .reveal.in > * { animation: none; }
  html.hd .btn, html.hd .wf-cta, html.hd .card { transition: none; }
  html.hd .btn:active, html.hd .wf-cta:active, html.hd .card:active { transform: none; }
}

/* translucency off → frost becomes a solid surface, blur dropped */
@media (prefers-reduced-transparency: reduce) {
  html.hd .wf-nav {
    background: var(--sh-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--sh-hair);
  }
  html.hd .wf-nav::after { display: none; }
}

/* high contrast → near-solid surface with a defined border */
@media (prefers-contrast: more) {
  html.hd .wf-nav {
    background: var(--sh-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 2px solid var(--sh-ink);
  }
  html.hd .wf-nav::after { display: none; }
  html.hd .btn, html.hd .wf-cta { border: 1px solid var(--sh-ink); }
}