/* =========================================================
   صوت يزيد — Hero FX + site polish
   (نفس الألوان والخطوط — حركة فقط)
   ========================================================= */

/* ---------- scroll progress (top bar) ---------- */
.scroll-progress{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;background:var(--accent);z-index:120;border-radius:0 3px 3px 0;transition:width .08s linear}

/* ---------- hero ambient background ---------- */
.hero{overflow:visible}
.hero-bg{position:absolute;inset:-10% -5% 0;pointer-events:none;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.blob-1{width:480px;height:480px;background:radial-gradient(circle, rgba(221,118,87,.35), transparent 65%);top:-120px;inset-inline-end:8%;animation:drift1 14s ease-in-out infinite}
.blob-2{width:380px;height:380px;background:radial-gradient(circle, rgba(247,233,214,.9), transparent 60%);bottom:-80px;inset-inline-start:-60px;animation:drift2 18s ease-in-out infinite}
.blob-3{width:260px;height:260px;background:radial-gradient(circle, rgba(221,118,87,.18), transparent 60%);top:30%;inset-inline-start:34%;animation:drift1 22s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-26px) scale(.94)}}

/* faint equalizer rising behind hero copy */
.hero-eq{position:absolute;bottom:0;inset-inline-start:0;display:flex;align-items:flex-end;gap:6px;height:120px;opacity:.1;pointer-events:none}
.hero-eq i{width:8px;border-radius:6px 6px 0 0;background:var(--accent);animation:eqRise 2.4s ease-in-out infinite}
@keyframes eqRise{0%,100%{height:14%}50%{height:var(--h,70%)}}

/* ---------- headline word-by-word reveal ---------- */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w > span{display:inline-block;transform:translateY(115%);animation:wordUp .85s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes wordUp{to{transform:translateY(0)}}

/* coral brush underline that draws itself */
.hero h1 .uline{position:relative;white-space:nowrap}
.hero h1 .uline svg{position:absolute;inset-inline:0;bottom:-.3em;width:100%;height:.3em;overflow:visible;pointer-events:none}
.hero h1 .uline svg path{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine 1s cubic-bezier(.4,0,.2,1) 1.15s forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}

/* eyebrow + lead + cta cascade */
.hero-copy .eyebrow{opacity:0;transform:translateY(14px);animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .05s forwards}
.hero-copy .hero-lead{opacity:0;transform:translateY(16px);animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .75s forwards}
.hero-copy .hero-cta{opacity:0;transform:translateY(16px);animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .95s forwards}
@keyframes riseIn{to{opacity:1;transform:none}}

/* ---------- showreel: float + tilt + orbit ring ---------- */
.showreel{perspective:900px}
.showreel .frame{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;animation:floaty 6s ease-in-out infinite}
.showreel:hover .frame{box-shadow:0 60px 110px -40px rgba(26,21,18,.55)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
.orbit{position:absolute;top:-34px;inset-inline-start:-34px;width:120px;height:120px;pointer-events:none;z-index:2}
.orbit svg{width:100%;height:100%;animation:spin 16s linear infinite}
.orbit .mic-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.orbit .mic-core span{width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px var(--accent)}
.orbit .mic-core svg{width:24px;height:24px;animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.wave-card{animation:floaty 7s ease-in-out 1.2s infinite}

/* ---------- marquee strip ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper);padding-block:.9rem;margin-top:clamp(2.5rem,5vw,4rem)}
.marquee-track{display:flex;gap:2.6rem;width:max-content;animation:marquee 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:flex;align-items:center;gap:2.6rem;font-weight:900;font-size:1.05rem;color:var(--ink);white-space:nowrap}
.marquee b{color:transparent;-webkit-text-stroke:1.2px var(--ink-faint);font-weight:900}
.marquee i{font-style:normal;color:var(--accent);font-size:.8em}
@keyframes marquee{to{transform:translateX(50%)}}

/* ---------- buttons: shine sweep + magnetic ---------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:46%;inset-inline-start:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:inset-inline-start .55s ease}
.btn-primary:hover::after{inset-inline-start:115%}

/* ---------- section titles: dot pulse ---------- */
.sec-title .hl{display:inline-block;animation:dotPulse 2.8s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ---------- cards: lift + icon wiggle ---------- */
.feat .ic{transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease}
.feat:hover .ic{transform:translateY(-4px) rotate(-6deg);background:rgba(221,118,87,.3)}
.work .thumb{overflow:hidden}
.work .thumb image-slot{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.work:hover .thumb image-slot{transform:scale(1.05)}
.work .cat{transition:transform .3s ease}
.work:hover .cat{transform:translateY(-2px)}
.clip{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.clip:hover{transform:translateY(-8px)}
.clip:nth-child(2):hover{transform:translateY(-30px)}
.contact-item .ic{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.contact-item:hover .ic{transform:translateY(-3px) rotate(-6deg)}

/* nav link underline grow */
.nav-links a::after{content:"";position:absolute;bottom:-4px;inset-inline:0;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .blob,.hero-eq i,.showreel .frame,.wave-card,.orbit svg,.marquee-track,.sec-title .hl{animation:none!important}
  .hero h1 .w > span{transform:none;animation:none}
  .hero h1 .uline svg path{stroke-dashoffset:0;animation:none}
  .hero-copy .eyebrow,.hero-copy .hero-lead,.hero-copy .hero-cta{opacity:1;transform:none;animation:none}
}
@media (max-width:760px){
  .orbit{width:88px;height:88px;top:-22px;inset-inline-start:-14px}
  .orbit .mic-core span{width:42px;height:42px}
  .hero-eq{display:none}
}