/* MOE motion layer (2026-10-04).
   One motion language for the whole site: 3 curves, 4 durations, one pointer spring (motion.js).
   Loaded last so it can retune earlier layers without editing them. */
:root{
 --ease-out:cubic-bezier(.22,1,.36,1);   /* arrive: everything that enters or responds */
 --ease-io:cubic-bezier(.76,0,.2,1);     /* move: things that travel from A to B */
 --ease-back:cubic-bezier(.34,1.56,.64,1); /* settle: small overshoot, used sparingly */
 --dur-1:160ms; --dur-2:280ms; --dur-3:520ms; --dur-4:900ms;
 /* older names now point at the tokens */
 --ease:var(--ease-out); --motion-fast:var(--dur-1); --motion-state:var(--dur-2); --motion-reveal:var(--dur-3);
}

/* Pointer-driven values are smoothed by the shared spring in motion.js, so CSS must not add a second lag. */
.magnetic{transition-property:border-color,background-color,color,box-shadow!important}
.robot-gaze{transition:none!important}

/* Logos pause while you look at them or tab into them (the shorthand above used !important). */
.client-marquee:hover .client-track,.client-marquee:focus-within .client-track{animation-play-state:paused!important}

/* Keyframe cursor (desktop with a fine pointer only) */
.has-kcursor,.has-kcursor *{cursor:none!important}
.has-kcursor input[type=email],.has-kcursor input[type=text],.has-kcursor textarea{cursor:text!important}
.kcursor{position:fixed;inset:0 auto auto 0;z-index:10000;pointer-events:none;opacity:1;transition:opacity var(--dur-2) var(--ease-out)}
.kcursor.is-out{opacity:0}
.kcursor-dot,.kcursor-ring{position:fixed;left:0;top:0;display:grid;place-items:center}
.kcursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;transform:translate(var(--dx,-99px),var(--dy,-99px)) rotate(45deg)}
.kcursor-ring{width:22px;height:22px;margin:-11px 0 0 -11px;border:1.5px solid var(--amber,#ffb829);border-radius:2px;transform:translate(var(--rx,-99px),var(--ry,-99px)) rotate(45deg) scale(var(--press,1));transition:width var(--dur-2) var(--ease-out),height var(--dur-2) var(--ease-out),margin var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),border-radius var(--dur-2) var(--ease-out)}
.kcursor-ring b{transform:rotate(-45deg);font:600 12px/1 Inter,Alexandria,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#120c1d;opacity:0;white-space:nowrap;transition:opacity var(--dur-1) var(--ease-out)}
html[lang=ar] .kcursor-ring b{font-family:Alexandria,sans-serif;letter-spacing:0;font-size:13px}
.kcursor.is-link .kcursor-ring{width:30px;height:30px;margin:-15px 0 0 -15px;border-color:#a98bff}
/* Over the reel and the work the ring turns into a small amber tag beside the pointer, led by a keyframe diamond. */
.kcursor.is-label .kcursor-ring{width:auto;height:30px;margin:-15px 0 0 12px;padding:0 13px 0 25px;gap:0;background:var(--amber,#ffb829);border-color:var(--amber,#ffb829);border-radius:999px;transform:translate(var(--rx,-99px),var(--ry,-99px)) scale(var(--press,1));transform-origin:0 50%}
.kcursor.is-label .kcursor-ring::before{content:'';position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:#120c1d;transform:rotate(45deg)}
.kcursor.is-label .kcursor-ring b{transform:none;font-size:11px}
html[lang=ar] .kcursor.is-label .kcursor-ring b{font-size:12px}
.kcursor.is-label .kcursor-ring b{opacity:1}
.kcursor.is-label .kcursor-dot,.kcursor.is-link .kcursor-dot{opacity:0}

/* Headline mask reveal: each word rises from behind its own mask, so wrapped lines stay masked too. */
.mw{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.06em .14em;margin-block:-.06em -.14em}
.mw-i{display:inline-block}

/* Work cards: tilt toward the pointer with a soft light sweep. */
.project figure{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;will-change:transform}
.project .card-glare{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),#ffffff30,transparent 46%);mix-blend-mode:overlay;opacity:var(--glare,0);transition:opacity var(--dur-2) var(--ease-out)}
.project figure{position:relative}
.project .card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.project.is-previewing .card-preview{opacity:1}

/* Touch screens: no sticky hover. The card in the middle of the screen is the active one instead. */
@media (hover:none){
 .project:hover img,.work-card:hover img,.work-bento-selected .project:hover img,.reel-cover:hover img{transform:none!important;filter:none!important}
 .work-card:hover figure:after,.work-bento-selected .project:hover figure:after{opacity:0!important}
 .pill:hover,.contact-socials a:hover{transform:none}
 .project.is-active img{transform:scale(1.045)!important;filter:saturate(1.08) contrast(1.03)!important}
 .project.is-active figure:after{opacity:.2!important}
}

/* Keyboard users get the same feedback as mouse users (generated from every :hover rule). */
.work-card:is(:focus-visible,:has(:focus-visible)) img,.work-bento-selected .project:is(:focus-visible,:has(:focus-visible)) img{transform:scale(1.045);filter:saturate(1.08) contrast(1.03)}
header nav a:is(:focus-visible,:has(:focus-visible)){color:#fff}
.pill:is(:focus-visible,:has(:focus-visible)){background:#9069ff;transform:translateY(-2px)}
.newsletter-input button:is(:focus-visible,:has(:focus-visible)){background:#9069ff;transform:rotate(8deg)}
.contact-socials a:is(:focus-visible,:has(:focus-visible)) span{transform:translate(2px,-2px);color:var(--amber)}
.contact-email:is(:focus-visible,:has(:focus-visible)),.contact-phone:is(:focus-visible,:has(:focus-visible)){color:var(--amber)}
.work-card:is(:focus-visible,:has(:focus-visible)):after{opacity:1;transform:none}
.work-card:is(:focus-visible,:has(:focus-visible)) figure:after,.work-bento-selected .project:is(:focus-visible,:has(:focus-visible)) figure:after{opacity:.2}
.text-link:is(:focus-visible,:has(:focus-visible)) span{transform:translate(3px,-3px)}
.contact-socials a:is(:focus-visible,:has(:focus-visible)){border-color:#555;background:#191919;transform:translateY(-2px)}
.contact-socials a:is(:focus-visible,:has(:focus-visible)) svg,.contact-socials a:is(:focus-visible,:has(:focus-visible)) i{color:var(--amber)}
.language-toggle:is(:focus-visible,:has(:focus-visible)){border-color:var(--amber);background:#17120a;color:#fff}
.hero-copy>.pill:is(:focus-visible,:has(:focus-visible)){background:linear-gradient(110deg,#201735 0%,#30205f 100%);border-color:#c3afff;box-shadow:0 14px 36px #0008,0 0 26px #8052ff35;transform:translateY(-2px)}
.hero-copy>.pill:is(:focus-visible,:has(:focus-visible)) span{background:#936cff;transform:translate(2px,2px)}
html[dir="rtl"] .hero-copy>.pill:is(:focus-visible,:has(:focus-visible)) span{transform:translate(-2px,2px)}
header nav a:is(:focus-visible,:has(:focus-visible)) .nav-label,header nav a:is(:focus-visible,:has(:focus-visible)) .nav-echo{transform:translateY(-100%)}
.header-cta:is(:focus-visible,:has(:focus-visible)){background:#171020;border-color:#a485e8}
.header-cta:is(:focus-visible,:has(:focus-visible)) .cta-arrow{transform:rotate(45deg)}
.reel-cover:is(:focus-visible,:has(:focus-visible)) img{transform:scale(1.025);filter:brightness(.95)}
.reel-cover:is(:focus-visible,:has(:focus-visible)) .reel-play-disc{background:#6b40cce8;scale:1.06}
.timeline-controls button:is(:focus-visible,:has(:focus-visible)){border-color:#8b6dc3;color:#fff}

@media (prefers-reduced-motion:reduce){
 .project figure{transform:none!important}
 .kcursor{display:none}
}
.ambient-paused .project figure{transform:none!important}

/* Phone: spread each identity chapter over the full screen instead of stacking it in the top half. */
@media (max-width:640px){
 .identity-scene .identity-symbol{top:33%!important;width:52vw!important}
 .identity-scene .chapters article{top:58%!important}
 .identity-scene .chapters .chapter-ai{top:56%!important}
 .ai-hero-visual{top:calc(33% + var(--hero-travel)*2%)!important}
}

/* Signature: the glass M (signature.js) takes over from the flat contact mark once its first frame is drawn. */
.signature-stage{position:absolute;top:-14%;right:-4%;width:min(48%,700px);aspect-ratio:1;-webkit-mask-image:radial-gradient(closest-side,#000 48%,transparent);mask-image:radial-gradient(closest-side,#000 48%,transparent);z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity var(--dur-4) var(--ease-out)}
.signature-stage canvas{display:block;width:100%;height:100%}
.has-glass .signature-stage{opacity:1}
.contact-mark{transition:opacity var(--dur-3) var(--ease-out)}
.has-glass .contact-mark{opacity:0}
html[dir="rtl"] .signature-stage{right:auto;left:-4%}
@media (max-width:640px){
 /* Phones: the glass M gets its own space above the heading instead of sitting over the text. */
 .contact-heading{display:flex;flex-direction:column}
 .contact-heading .signature-stage,html[dir="rtl"] .contact-heading .signature-stage{position:relative;order:-1;inset:auto;align-self:center;width:min(86vw,360px);margin:-36px 0 -44px}
}

/* Link from the Motion lab section to lab.html */
.lab-more{margin-top:48px}
/* «اكتب فكرتك» (signature.js v3): the visitor types an idea and it pours into the glass M. Appears only when the glass runs. */
.idea-form{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:460px}
.idea-form input{flex:1;min-width:0;min-height:48px;padding:0 20px;background:#ffffff0d;border:1px solid #ffffff2e;border-radius:999px;color:#fff;font:inherit;font-size:16px;font-weight:300}
.idea-form input::placeholder{color:#8d879b}
.idea-form input:focus-visible{outline:none;border-color:var(--violet);background:#8052ff1a}
.idea-form button{min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--violet);color:#fff;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:transform var(--dur-1) var(--ease-out)}
.idea-form button:hover{transform:translateY(-1px)}
.idea-form button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.idea-msg{flex-basis:100%;min-height:1.6em;margin:0 6px!important;color:var(--amber)!important;font-size:14px!important;opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.idea-msg.on{opacity:1}