/* ═══════════════════════════════════════════════════════════════════════════
   home-kinetics.css — a7 homepage motion layer (kinetics port, consolidated)
   ⛔ LOAD ORDER: this file MUST be linked AFTER home.css (equal-specificity
      overrides win by source order). No render.py HTML changes required.
   ⛔ Tokens only: --ease/--spring/--pri/--tint-bd/--sh2 + hsl(var(--…)) + color-mix.
      All effects live INSIDE .a7h, so scoped tokens inherit. Never touches
      .a7h-navsearch (owner-locked). #fff is used ONLY where the base already does
      (primary-bg button gleam) — it is a mask/gleam alpha, not a brand color.
   ⛔ Every effect: RTL+LTR safe, light+dark safe, prefers-reduced-motion fallback,
      content visible-by-default (motion only enhances, never gates).
   9 effects total: greeting entrance · chip press · portrait tilt · link underline ·
   divider draw · action chevron nudge · rank stamp · focus sheen · CTA magnetic.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO GREETING — one-shot entrance (kinetics: Stagger Entrance, adapted to
   a single display headline). Whole-headline reveal → connected Arabic «مرحبا» is
   never split; the nested .t-ar/.t-en spans ride along untouched (no JS). The
   from-state lives ONLY in the keyframe (fill:both) and the base rule stays fully
   visible, so it can NEVER ship blank. Leads the existing .a7h-sub(--i:1)→
   .a7h-chips(--i:2) reveal cascade by timing. */
.a7h-greet{animation:a7hGreetIn .6s var(--ease) .05s both}
@keyframes a7hGreetIn{
  from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}

/* ── 2. HERO CHIPS — tactile press (kinetics: Squish Button, low-amplitude).
   Composes with the existing hover-lift (translateY(-1px), home.css:139): the lift
   is kept while squishing. Redeclares only the transition (transform → spring) and
   adds :active. Scoped to `a` so the non-link «جرّب/Try» label li gets nothing. */
.a7h-chips a{transition:color .18s var(--ease),border-color .18s var(--ease),transform .3s var(--spring)}
.a7h-chips a:active{transform:translateY(-1px) scale(.94);transition:transform .09s ease-out}

/* ── 3. ABOUT PORTRAIT — gentle parallax tilt (kinetics: Parallax Tilt, ±5–6°).
   JS sets the transform (perspective baked in, like initTilt); the melt-mask +
   drop-shadow (home.css:147-149) ride along as one floating plane. Shadow deepens
   on hover for real depth. Not an initTilt target → no double-transform. */
/* portrait hover = the slow prompt-style zoom owned by home.css (1.6s, no
   shadow, no tilt) — kinetics deliberately adds NOTHING here (owner spec). */
.a7h-about__portrait img{transform-origin:center;backface-visibility:hidden}

/* ── 4. ABOUT LINK — underline draws from the reading start (text span only, never
   under the arrow) + spring the existing 4px→7px gap nudge (kinetics: Underline
   Draw). Per-script origin: .t-ar draws right→left, .t-en left→right. Only one span
   is visible per language so exactly one underline animates. :focus-visible = a11y. */
.a7h-about__link{transition:gap .3s var(--spring)}
.a7h-about__link .t-ar,.a7h-about__link .t-en{position:relative}
.a7h-about__link .t-ar::after,.a7h-about__link .t-en::after{
  content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transition:transform .4s cubic-bezier(.65,0,.35,1)}
.a7h-about__link .t-ar::after{transform-origin:right}
.a7h-about__link .t-en::after{transform-origin:left}
.a7h-about__link:hover .t-ar::after,.a7h-about__link:focus-visible .t-ar::after,
.a7h-about__link:hover .t-en::after,.a7h-about__link:focus-visible .t-en::after{transform:scaleX(1)}

/* ── 5. SECTION DIVIDER — draws in from centre on reveal (kinetics: Clip-Wipe).
   Replaces the generic upward fade-slide with a proper center-out draw. Opacity +
   .5s timing + delay all inherited from base `.a7h .reveal`; we override only the
   transform axis. --i:1 → draws ~90ms after the pill header settles.
   transform-origin:center → identical in RTL and LTR. */
/* gated like every other from-state — an ungated one survives a dead home.js */
.a7h.js-reveal .a7h-band__rule.reveal{--i:1;transform:scaleX(0);transform-origin:center}
.a7h.js-reveal .a7h-band__rule.reveal.is-in{transform:scaleX(1)}

/* ── 6. BAND ACTION — chevron nudges toward the destination on hover (directional).
   Adds a transition to the existing svg (home.css:178, w/h preserved). RTL: left-
   chevron drifts left. LTR: composes with the base scaleX(-1) flip (home.css:35) so
   the mirrored right-chevron drifts right. Independent of the anchor's translateY lift. */
.a7h-band__action svg{transition:transform .2s var(--ease)}
.a7h-band__action:hover svg{transform:translateX(-3px)}
.font-english .a7h-band__action:hover svg{transform:scaleX(-1) translateX(-3px)}

/* ── 7. RANK BADGE — spring "medal stamp" as each Most-Loved card reveals
   (kinetics: Number Counter spring, adapted to a reveal-triggered stamp). Ordinal
   rank → NO count-up. Visible-by-default: natural state has no animation; the pop
   only runs once .is-in is present (each rail <li> is its own .reveal). Badge is
   aria-hidden → no a11y noise. Only on the most_used rail (the sole rail with ranks). */
.a7h-card.is-in .a7h-rank{animation:a7hStamp .55s var(--spring) both}
@keyframes a7hStamp{
  0%{transform:scale(.2);opacity:0}
  55%{opacity:1}
  100%{transform:scale(1);opacity:1}
}
.a7h-rail .a7h-card:nth-child(2).is-in .a7h-rank{animation-delay:.05s}
.a7h-rail .a7h-card:nth-child(3).is-in .a7h-rank{animation-delay:.10s}
.a7h-rail .a7h-card:nth-child(4).is-in .a7h-rank{animation-delay:.15s}
.a7h-rail .a7h-card:nth-child(5).is-in .a7h-rank{animation-delay:.20s}
.a7h-rail .a7h-card:nth-child(n+6).is-in .a7h-rank{animation-delay:.25s}

/* ── 8. FEATURED FOCUS — single specular sheen on the ONE featured hero image
   (kinetics: Sheen Sweep). Scoped to .a7h-focus media only (NOT the shared
   .a7h-card__media — rail/fan/arc/coverflow already carry signature motion). Lives
   on ::after so it never touches the media transform. --primary tint = tokenized +
   visible on light AND dark. overflow:hidden (home.css:187) clips the streak. */
.a7h-focus__m .a7h-card__media{position:relative}
.a7h-focus__m .a7h-card__media::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;z-index:1;pointer-events:none;
  transform:translateX(-180%) skewX(-18deg);
  background:linear-gradient(100deg,transparent,
    color-mix(in oklch, hsl(var(--primary)) 26%, transparent),transparent);
  transition:transform .7s var(--ease)}
.a7h-focus:hover .a7h-card__media::after{transform:translateX(320%) skewX(-18deg)}

/* ── 9. CLOSING CTA — magnetic pull (JS) + shine sweep + primary glow-lift
   (kinetics: Magnetic Button + Shine; Neon-pulse loop rejected). Overrides the base
   CTA transition (home.css:272) and layers a glow onto the base :hover lift
   (home.css:273). Shine on ::before uses logical inset-inline-start (RTL-aware).
   Nav is untouched (stays an <a>, no preventDefault). overflow:hidden clips the
   shine but NOT the box-shadow glow / focus ring (both paint outside the box). */
.a7h-cta{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s ease-out,box-shadow .25s var(--ease),filter .2s var(--ease)}
.a7h-cta>*{position:relative;z-index:2}
.a7h-cta::before{content:"";position:absolute;inset-block:0;inset-inline-start:-130%;width:60%;height:100%;
  z-index:1;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in oklch,#fff 38%,transparent),transparent)}
.a7h-cta:hover::before,.a7h-cta:focus-visible::before{inset-inline-start:130%;transition:inset-inline-start .9s var(--ease)}
.a7h-cta:hover,.a7h-cta:focus-visible{transform:translateY(-2px);will-change:transform;filter:saturate(1.06);
  box-shadow:var(--sh2),0 12px 30px -8px color-mix(in oklch,hsl(var(--primary)) 55%,transparent)}
.a7h-cta:active{transform:translateY(0) scale(.98);transition-duration:.08s}

/* ═══ MANDATORY reduced-motion fallbacks ═══
   The global block (home.css:280) already forces animation/transition:none!important
   on `.a7h *` and resets `.a7h .reveal` to visible — but it CANNOT reach ::before/
   ::after pseudo-elements, and it does not neutralise applied hover-transform states.
   These explicit rules collapse every effect to its instant/visible resting state. */
@media (prefers-reduced-motion:reduce){
  .a7h-greet{animation:none}                                   /* resting = fully visible */
  .a7h-chips a:active{transform:none}
  .a7h-about__portrait img{transition:none;transform:none}
  .a7h-about__link .t-ar::after,.a7h-about__link .t-en::after{transition:none}
  .a7h .a7h-band__rule.reveal,.a7h .a7h-band__rule.reveal.is-in{transform:none}
  .a7h-band__action:hover svg{transform:none}
  .font-english .a7h-band__action svg,
  .font-english .a7h-band__action:hover svg{transform:scaleX(-1)}   /* keep the flip, drop the nudge */
  .a7h-card.is-in .a7h-rank{animation:none}
  .a7h-focus__m .a7h-card__media::after{display:none}
  .a7h-cta::before{display:none}
  .a7h-cta:hover,.a7h-cta:focus-visible,.a7h-cta:active{transform:none}
}
/* ═══════════════════════════════════════════════════════════════════════════
   PERCEPTIBILITY BOOST (2026-07-26 — owner: "ما حسيت بتغيير")
   Strengthen the 3 most-felt moments so the motion reads on a passive glance,
   without tipping into over-animation. Tokenized · RTL/LTR · light/dark ·
   reduced-motion collapses to instant/visible.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 1. APPLE-STYLE scroll reveal — as each block enters the viewport it GROWS in
   (subtle scale-up) + rises + fades, with a long very-smooth --ease settle. This is
   the apple.com/iphone "content loads as you scroll" feel, done one-shot on enter via
   the existing IntersectionObserver (initReveal). transform-origin center = grows in place. */
.a7h .reveal{transition:opacity .8s cubic-bezier(0,0,.5,1),transform .9s cubic-bezier(0,0,.5,1)}
/* from-state applies ONLY while NOT revealed — so it vanishes the instant .is-in
   lands (bulletproof; no reliance on an is-in override winning the cascade).
   :not(.a7h-band__rule) so the divider keeps its own scaleX center-out draw. */
/* .js-reveal gate — see the note in home.css: without it a failed home.js hides
   every band permanently, because this from-state does not depend on the JS. */
.a7h.js-reveal .reveal:not(.is-in):not(.a7h-band__rule){opacity:0;transform:translateY(22px) scale(.93)}
/* 2. stronger, slower hero greeting entrance (later @keyframes wins) */
.a7h-greet{animation-duration:.72s}
@keyframes a7hGreetIn{
  from{opacity:0;transform:translateY(32px) scale(.95);filter:blur(9px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
/* 3. APPLE-STYLE HOVER — content GROWS smoothly on hover, shrinks smoothly on leave.
   Scale on the card CONTAINER (media keeps its own parallax tilt from initTilt — different
   element, composes cleanly). Same --ease glide both directions; z-index lifts the grown
   card above its neighbours. Transition covers reveal AND hover on rail cards. */
.a7h-rail .a7h-card{position:relative}
.a7h-rail .a7h-card:hover{z-index:2}
/* hover = the whole IMAGE element grows bigger (scale the media box itself, not the img
   inside, not the card). The title is a sibling → it does NOT grow. NO shadow, NO lift.
   Apple curve. z-index lifts the grown image above its neighbours. */
.a7h-rail .a7h-card__media{transition:transform .5s cubic-bezier(0,0,.5,1);transform-origin:center}
.a7h-rail .a7h-card:hover .a7h-card__media{transform:scale(1.06);box-shadow:none;border-color:var(--card-bd)}

@media (prefers-reduced-motion:reduce){
  .a7h-greet{animation:none}
  .a7h-rail .a7h-card:hover .a7h-card__media{transform:none}
}