/* Oqoodi home (/ar, /en) motion layer. Scoped to html[data-home], so it never touches
   the dashboard, admin or signing screens. No brand color is defined or changed here:
   effects reuse the colors already on the page (gold via color-mix, currentColor). */
html{--hm-ease:cubic-bezier(.2,.8,.1,1);--ox:100%}
html[dir=ltr]{--ox:0%}

/* ---------- Typography: headings only ---------- */
html[data-home] main :is(h1,h2,h3){font-family:"Readex Pro",Tajawal,Cairo,Inter,system-ui,sans-serif;text-wrap:balance}
html[data-home] main h1{font-weight:700;letter-spacing:0;line-height:1.25;font-size:clamp(1.9rem,4vw,3.25rem)}
html[data-home][dir=ltr] main h1{letter-spacing:-.025em;line-height:1.1}
html[data-home] main h2{font-weight:700;letter-spacing:0}
html[data-home] main :is(p,li){text-wrap:pretty}

/* ---------- Always-on refinements ---------- */
html[data-home] header.sticky{transition:box-shadow .35s ease}
html[data-home] header.sticky[data-scrolled]{box-shadow:0 14px 34px -22px rgba(0,0,0,.6)}
.hm-bar{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:90;pointer-events:none;background:linear-gradient(90deg,#fcd92d,#3b82f6);transform:scaleX(var(--p,0));transform-origin:var(--ox) 50%;display:none}
html[data-home] .hm-bar{display:block}
[data-mag]{position:relative;overflow:hidden;isolation:isolate;translate:var(--tx,0px) var(--ty,0px);transition:translate .25s var(--hm-ease)}
[data-mag]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s var(--hm-ease)}
[data-mag]:hover::after{transform:translateX(130%)}
[data-spot]{background-image:radial-gradient(240px circle at var(--mx,-400px) var(--my,-400px),color-mix(in srgb,#fcd92d 12%,transparent),transparent 72%)}
[data-tilt]{transition:transform .35s var(--hm-ease);transform:perspective(1000px) rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg))}

@media (prefers-reduced-motion:no-preference){
  /* Pointer-reactive depth in the hero (uses the independent `translate` property,
     so the existing Tailwind transforms keep working) */
  [data-mo-hero]{background-image:radial-gradient(520px circle at var(--mx,72%) var(--my,28%),color-mix(in srgb,#fcd92d 8%,transparent),transparent 70%)}
  [data-blob]{translate:calc(var(--px,0)*var(--k,20)*1px) calc(var(--py,0)*var(--k,20)*1px + var(--sy,0)*-.05px);transition:translate .7s ease-out}

  /* 1) Page-load sequence: one orchestrated moment */
  html[data-mo-on] [data-mo-hero]:not([data-go]) :is([data-hi],[data-chip],[data-tilt],[data-float]){opacity:0}
  [data-mo-hero][data-go] [data-hi]{animation:hm-in .95s var(--hm-ease) calc(var(--i,0)*95ms + 60ms) backwards}
  [data-mo-hero][data-go] [data-hi=h1]{animation-name:hm-h1;animation-duration:1.15s}
  [data-mo-hero][data-go] [data-chip]{animation:hm-pop .6s cubic-bezier(.3,1.5,.5,1) calc(var(--i,0)*70ms + .8s) backwards}
  [data-mo-hero][data-go] [data-tilt]{animation:hm-card 1.2s var(--hm-ease) .3s backwards}
  [data-mo-hero][data-go] [data-float]{animation:hm-pop .7s cubic-bezier(.3,1.5,.5,1) calc(1.1s + var(--i,0)*.15s) backwards,hm-float 6s ease-in-out calc(1.9s + var(--i,0)*.15s) infinite}
  @keyframes hm-in{from{opacity:0;translate:0 24px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
  @keyframes hm-h1{from{opacity:0;translate:0 34px;clip-path:inset(0 0 100% 0);filter:blur(8px)}60%{filter:blur(0)}to{opacity:1;translate:0 0;clip-path:inset(0 0 -25% 0)}}
  @keyframes hm-pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
  @keyframes hm-card{from{opacity:0;transform:perspective(1000px) translateY(46px) rotateX(16deg) scale(.94)}to{opacity:1;transform:perspective(1000px)}}
  @keyframes hm-float{50%{translate:0 -9px}}

  /* The contract writes itself, then gets verified, on a loop */
  [data-ln]{transform-origin:var(--ox) 50%;animation:hm-write 9s cubic-bezier(.6,0,.2,1) calc(1.5s + var(--i,0)*.17s) infinite}
  @keyframes hm-write{0%{transform:scaleX(0)}13%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
  [data-stamp]{animation:hm-stamp 9s ease-in-out 1.5s infinite}
  @keyframes hm-stamp{
    0%,50%{transform:scale(0) rotate(-14deg);opacity:0;box-shadow:0 0 0 0 color-mix(in srgb,currentColor 40%,transparent)}
    57%{transform:scale(1.35) rotate(4deg);opacity:1}
    64%{transform:scale(1) rotate(0);box-shadow:0 0 0 14px color-mix(in srgb,currentColor 0%,transparent)}
    66%,88%{transform:none;opacity:1}
    96%,100%{transform:scale(.8);opacity:0}}

  /* 2) Scroll reveals via animations (so existing hover transitions are untouched) */
  html[data-mo-on] [data-rv]:not([data-in]){opacity:0}
  [data-rv][data-in]{animation:hm-rv .85s var(--hm-ease) calc(var(--d,0)*75ms) backwards}
  [data-rv=h][data-in]{animation-name:hm-rvh;animation-duration:1s}
  @keyframes hm-rv{from{opacity:0;translate:0 28px;scale:.965}to{opacity:1;translate:0 0;scale:1}}
  @keyframes hm-rvh{from{opacity:0;translate:0 20px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(0 0 -25% 0)}}
}