/* Build-step effects for the product-tour deck. An element with data-step="n" is hidden
   until the deck reaches step n of its slide, then gains .is-shown (deck-core.js).
   data-fx picks HOW it arrives; --i staggers siblings (set inline, 0-based).
   Directional effects read --dir-sign so Arabic mirrors them automatically. */

:root { --dir-sign: 1; }
[dir="rtl"] { --dir-sign: -1; }

[data-step] {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity .6s ease calc(var(--i, 0) * 110ms),
    transform .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 110ms),
    clip-path 1s cubic-bezier(.6, 0, .2, 1) calc(var(--i, 0) * 110ms),
    filter .7s ease calc(var(--i, 0) * 110ms);
}
/* clip-path: none, never inset(0): a zero inset still clips to the element's own box, so
   anything that moves past it afterwards — the floating phone on slide 1 — was cut off. */
[data-step].is-shown { opacity: 1; transform: none; clip-path: none; filter: none; }

[data-fx="fade"] { transform: none; }
[data-fx="scale"] { transform: scale(.86); }
[data-fx="blur"] { transform: scale(1.04); filter: blur(14px); }
[data-fx="pop"] {
  transform: scale(.3) rotate(calc(var(--rot, 0deg)));
  transition-timing-function: ease, cubic-bezier(.3, 1.6, .5, 1), ease, ease;
}
[data-fx="start"] { transform: translateX(calc(var(--dir-sign) * -90px)); }
[data-fx="end"] { transform: translateX(calc(var(--dir-sign) * 90px)); }
[data-fx="tilt"] {
  transform: perspective(1600px) rotateY(calc(var(--dir-sign) * -24deg)) translateX(calc(var(--dir-sign) * 120px));
  transform-origin: center;
}
[data-fx="rise-tilt"] { transform: perspective(1600px) rotateX(24deg) translateY(120px); }
/* A reading-direction wipe: the text is uncovered from where a reader starts. */
/* The vertical insets are generous (-60%) so descenders and Arabic marks are never cut:
   the clip box only needs to move along the line, not hug it. */
[data-fx="wipe"], [data-fx="type"] { transform: none; clip-path: inset(-60% 100% -60% -2%); }
[dir="rtl"] [data-fx="wipe"], [dir="rtl"] [data-fx="type"] { clip-path: inset(-60% -2% -60% 100%); }
[data-fx="wipe"].is-shown, [data-fx="type"].is-shown { clip-path: inset(-60% -2% -60% -2%); }
[data-fx="type"] { transition-duration: .3s, .3s, 1.6s, .3s; transition-timing-function: ease, ease, steps(28, end), ease; }
/* A marker: no visual of its own, only a class later rules key off. */
[data-fx="flag"] { display: none; }

/* ---- Slide 2: the scattered paperwork collapses into one question ------------------ */
.chaos { position: relative; flex: 1; }
.chaos-tile {
  position: absolute; left: var(--x); top: var(--y); width: 30%; --rot: var(--r);
  transition-duration: .6s, .9s, 1s, .7s;
}
.chaos-tile.is-shown { transform: rotate(var(--r)); }
.chaos-flag.is-shown ~ .chaos .chaos-tile.is-shown {
  left: 35%; top: 30%; transform: rotate(0) scale(.5); opacity: 0;
  transition: left 1s cubic-bezier(.7, 0, .3, 1) calc(var(--i, 0) * 60ms),
              top 1s cubic-bezier(.7, 0, .3, 1) calc(var(--i, 0) * 60ms),
              transform 1s ease calc(var(--i, 0) * 60ms), opacity .8s ease calc(.3s + var(--i, 0) * 60ms);
}
.chaos-question { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
[data-fx="question"] { transform: scale(.6); transition-delay: .9s; }

/* ---- Continuous accents ---------------------------------------------------------- */
.fx-float { animation: deck-float 6s ease-in-out infinite; }
.fx-pulse { animation: deck-pulse 2.2s ease-in-out infinite; }
.fx-draw path, .fx-draw line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.6, 0, .2, 1) .2s; }
.fx-draw.is-shown path, .fx-draw.is-shown line { stroke-dashoffset: 0; }
.fx-scan { position: relative; overflow: hidden; }
.fx-scan::after {
  content: ''; position: absolute; inset-inline: 0; top: -30%; height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(var(--bs-success-rgb), .35), transparent);
  animation: deck-scan 2.4s ease-in-out infinite;
}
.fx-sparkle { position: relative; }
.fx-sparkle::before, .fx-sparkle::after {
  content: '\2726'; position: absolute; color: var(--bs-warning); font-size: .6em;
  animation: deck-twinkle 1.8s ease-in-out infinite;
}
.fx-sparkle::before { inset-inline-start: -1.1em; top: -.2em; }
.fx-sparkle::after { inset-inline-end: -1.1em; bottom: -.1em; animation-delay: .9s; }
.fx-fan > * { transition-property: opacity, transform; transform-origin: bottom center; }
.fx-fan > .is-shown { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }
/* The EN/AR divider sweeping across two screenshots of the same page. */
.fx-split { position: relative; }
.fx-split > .fx-split-top { position: absolute; inset: 0; animation: deck-split 6s ease-in-out infinite; }

@keyframes deck-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes deck-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), .5); } 50% { box-shadow: 0 0 0 26px rgba(var(--bs-success-rgb), 0); } }
@keyframes deck-scan { from { top: -30%; } to { top: 100%; } }
@keyframes deck-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes deck-split { 0%, 12% { clip-path: inset(0 100% 0 0); } 45%, 60% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 100% 0 0); } }

/* Reduced motion: steps still build, but by a plain cross-fade, and nothing loops. */
@media (prefers-reduced-motion: reduce) {
  [data-step] { transform: none !important; clip-path: none !important; filter: none !important; transition: opacity .3s ease !important; }
  .slide { transform: none !important; }
  .fx-float, .fx-pulse, .fx-scan::after, .fx-sparkle::before, .fx-sparkle::after, .fx-split > .fx-split-top { animation: none !important; }
}
.deck-print [data-step] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; }
/* Print shows each slide's FINAL build; slide 2's tiles have collapsed into its question. */
.deck-print .chaos-tile { display: none; }
.deck-print .fx-draw path, .deck-print .fx-draw line { stroke-dashoffset: 0; }