/* Motion for the home page and the studio (js/motion.js adds .moving or .still on <html>).
   With reduced motion (.still) nothing moves: no reveals, no tilt, no transitions. */

/* staggered reveals */
.moving .rv { opacity: 0; translate: 0 16px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.moving .rv-box.in > .rv { opacity: 1; translate: none; }

/* buttons and chips: a small lift on hover, a small press on click */
.moving button, .moving .btn, .moving .chip { transition: translate .16s ease, scale .12s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; }
@media (hover: hover) {
  .moving button:not(:disabled):hover, .moving .btn:hover { translate: 0 -1px; }
  .moving .chips button:hover, .moving .h2-picks button:hover, .moving .h3-choices button:hover { translate: 0 -2px; box-shadow: var(--shadow); }
}
.moving button:not(:disabled):active, .moving .btn:active { scale: .97; translate: none; }

/* cards that lean toward the pointer and lift */
.moving [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease, translate .3s ease, box-shadow .3s ease; will-change: transform; }
@media (hover: hover) { .moving [data-tilt]:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 40px rgba(0, 0, 0, .14); } }

/* the hero's soft background moves a little slower than the page */
.h2-hero { isolation: isolate; }
.h2-hero-glow { position: absolute; inset: -10% -8% auto; height: 120%; z-index: -1; pointer-events: none; translate: 0 var(--py, 0px);
  background: radial-gradient(40% 45% at 78% 30%, var(--acc-soft), transparent 70%), radial-gradient(30% 35% at 12% 70%, color-mix(in srgb, var(--mustard) 22%, transparent), transparent 70%); opacity: .9; }

/* studio: views fade in, and the settings panel opens and closes smoothly on wide screens */
@keyframes ay-view-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
.moving .view.entering { animation: ay-view-in .32s ease both; }
@media (min-width: 901px) {
  .moving .create3 { transition: grid-template-columns .3s ease, gap .3s ease; }
  .moving .create3 .cpanel { transition: opacity .22s ease, translate .3s ease, visibility 0s linear 0s; }
  .moving .create3.collapsed { grid-template-columns: minmax(0, 1fr) 0px; gap: 0; }
  .moving .create3.collapsed .cpanel { display: block; opacity: 0; translate: 16px 0; visibility: hidden; overflow: hidden; transition: opacity .18s ease, translate .3s ease, visibility 0s linear .3s; }
  .moving [dir="rtl"] .create3.collapsed .cpanel, .moving:lang(ar) .create3.collapsed .cpanel { translate: -16px 0; }
}

/* the film strip frames lift on hover */
@media (hover: hover) { .moving .h2-reel figure { transition: translate .25s ease; } .moving .h2-reel figure:hover { translate: 0 -6px; } }

.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; translate: none !important; } }

/* ---- Creative home motion (transforms and opacity only) ---- */
/* kinetic headings: words rise in one by one; the hero's key line then sways now and then */
.moving .kin .kw { display: inline-block; opacity: 0; translate: 0 .55em; transition: opacity .55s ease, translate .65s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--w, 0) * 65ms + 80ms); }
.moving .kin.kin-in .kw { opacity: 1; translate: none; }
@keyframes ay-sway { 0%, 82%, 100% { translate: 0 0; } 88% { translate: 0 -5px; } 94% { translate: 0 1px; } }
.moving [data-kinetic="wave"].kin-in .kw { animation: ay-sway 7s ease-in-out infinite; animation-delay: calc(1.6s + var(--w, 0) * 110ms); }

/* buttons: a light sweep on hover (the hero button sweeps by itself now and then), and a magnetic pull */
.moving .btn { position: relative; overflow: hidden; isolation: isolate; }
.moving .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); translate: -120% 0; }
@media (hover: hover) { .moving .btn:hover::after { translate: 120% 0; transition: translate .7s ease; } }
@keyframes ay-shine { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }
.moving .btn.shine::after { animation: ay-shine 4.5s ease-in-out infinite 1.5s; }
[dir="rtl"] .moving .btn::after, .moving[dir="rtl"] .btn::after { scale: -1 1; }
@media (hover: hover) { .moving .btn:hover, .moving #go:not(:disabled):hover { translate: var(--mx, 0px) calc(var(--my, 0px) - 1px); } }

/* chips float a little, each on its own beat */
@keyframes ay-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.moving .h2-picks button, .moving .chips button { animation: ay-float 4.8s ease-in-out infinite; }
.moving .h2-picks button:nth-child(2n), .moving .chips button:nth-child(2n) { animation-delay: -1.6s; }
.moving .h2-picks button:nth-child(3n), .moving .chips button:nth-child(3n) { animation-delay: -3.1s; animation-duration: 5.6s; }
@media (hover: hover) { .moving .h2-picks button:hover, .moving .chips button:hover { animation-play-state: paused; } }

/* small looping accents near the hero */
.h3-accents { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.h3-accents .ac { position: absolute; display: block; width: 14px; height: 14px; color: var(--mustard); opacity: .75; }
.h3-accents .ac svg { width: 100%; height: 100%; fill: currentColor; }
.h3-accents .ac2, .h3-accents .ac4 { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--acc); opacity: .45; }
.h3-accents .ac1 { inset-inline-start: 4%; top: 14%; } .h3-accents .ac2 { inset-inline-start: 46%; top: 8%; }
.h3-accents .ac3 { inset-inline-end: 3%; top: 4%; width: 18px; height: 18px; color: var(--acc); opacity: .5; }
.h3-accents .ac4 { inset-inline-start: 40%; bottom: 10%; } .h3-accents .ac5 { inset-inline-end: 46%; bottom: 4%; width: 11px; height: 11px; }
@keyframes ay-twinkle { 0%, 100% { scale: .7; rotate: 0deg; opacity: .25; } 50% { scale: 1.15; rotate: 45deg; opacity: .85; } }
@keyframes ay-drift { 0%, 100% { translate: 0 0; } 50% { translate: 6px -8px; } }
.moving .h3-accents .ac1, .moving .h3-accents .ac3, .moving .h3-accents .ac5 { animation: ay-twinkle 5.5s ease-in-out infinite; }
.moving .h3-accents .ac3 { animation-delay: -2s; } .moving .h3-accents .ac5 { animation-delay: -3.8s; animation-duration: 6.5s; }
.moving .h3-accents .ac2, .moving .h3-accents .ac4 { animation: ay-drift 8s ease-in-out infinite; }
.moving .h3-accents .ac4 { animation-delay: -4s; }
@media (max-width: 700px) { .h3-accents .ac2, .h3-accents .ac4 { display: none; } }

/* gallery: a slow endless row that stops under the pointer (mirrored in Arabic) */
@keyframes ay-marquee { from { translate: 0 0; } to { translate: calc(-50% * var(--dir, 1)) 0; } }
.moving .h3-gal-track { animation: ay-marquee 80s linear infinite; }
.moving [dir="rtl"] .h3-gal-track, .moving:lang(ar) .h3-gal-track { --dir: -1; }
.moving .h3-gal:hover .h3-gal-track, .moving .h3-gal:focus-within .h3-gal-track { animation-play-state: paused; }