/* =====================================================================
   Damascus Projects Global - site-wide motion
   Loaded by templates/site/base.html with static/js/dpg-motion.js.
   Content is only hidden once the script has started (html.dpm-on),
   so pages without JavaScript look exactly as before. Everything is
   switched off for visitors who ask their device to reduce motion.
   ===================================================================== */

/* ── 1. Scroll reveal (single items and staggered groups) ─────────── */
html.dpm-on .dpm { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); transition-delay: var(--dpm-d, 0s); will-change: opacity, transform; }
html.dpm-on .dpm--left  { transform: translateX(-34px); }
html.dpm-on .dpm--right { transform: translateX(34px); }
html.dpm-on .dpm--zoom  { transform: scale(.94); }
html.dpm-on .dpm.dpm-in { opacity: 1; transform: none; }

/* gold rule above section headings grows in */
html.dpm-on .dp-teaser__intro::before,
html.dpm-on .dp-live__intro::before,
html.dpm-on .dp-pr__intro::before { transform-origin: left center; transform: scaleX(0); transition: transform .9s cubic-bezier(.22,.61,.36,1) .15s; }
html.dpm-on .dpm-in.dp-teaser__intro::before,
html.dpm-on .dpm-in.dp-live__intro::before,
html.dpm-on .dpm-in.dp-pr__intro::before { transform: scaleX(1); }

/* ── 2. Inner-page heroes: content rises in on load ─────────────── */
@keyframes dpmRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes dpmFade { from { opacity: 0; } to { opacity: 1; } }
html.dpm-on .dp-hero--page .dp-hero__content > *,
html.dpm-on .dp-hero--compact .dp-hero__content > * { animation: dpmRise .8s cubic-bezier(.22,.61,.36,1) both; }
html.dpm-on .dp-hero--page .dp-hero__content > *:nth-child(2),
html.dpm-on .dp-hero--compact .dp-hero__content > *:nth-child(2) { animation-delay: .1s; }
html.dpm-on .dp-hero--page .dp-hero__content > *:nth-child(3),
html.dpm-on .dp-hero--compact .dp-hero__content > *:nth-child(3) { animation-delay: .2s; }
html.dpm-on .dp-hero--page .dp-hero__content > *:nth-child(4),
html.dpm-on .dp-hero--compact .dp-hero__content > *:nth-child(4) { animation-delay: .3s; }
html.dpm-on .dp-hero--page .dp-hero__content > *:nth-child(n+5),
html.dpm-on .dp-hero--compact .dp-hero__content > *:nth-child(n+5) { animation-delay: .4s; }
@keyframes dpmKen { from { transform: scale(1.08); } to { transform: scale(1); } }
html.dpm-on .dp-hero--page .dp-hero__bg img,
html.dpm-on .dp-hero--compact .dp-hero__bg img { animation: dpmKen 9s ease-out both; }

/* ── 3. Live collage: tiles pop in, then float gently ───────────── */
@keyframes dpmPop { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes dpmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.dpm-on .dp-live-main { animation: dpmPop .8s cubic-bezier(.22,.61,.36,1) .25s both, dpmFloat 6s ease-in-out 1.2s infinite; }
html.dpm-on .dp-tile { animation: dpmPop .6s cubic-bezier(.22,.61,.36,1) both; }
html.dpm-on .dp-tile:nth-child(1) { animation-delay: .55s; }
html.dpm-on .dp-tile:nth-child(2) { animation-delay: .65s; }
html.dpm-on .dp-tile:nth-child(3) { animation-delay: .75s; }
html.dpm-on .dp-tile:nth-child(4) { animation-delay: .85s; }

/* ── 4. Hover polish ───────────────────────────────────────────── */
/* buttons: a light sweep across */
.dp-btn { position: relative; overflow: hidden; isolation: isolate; }
.dp-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .7s ease; }
.dp-btn:hover::after { left: 120%; }
.dp-btn .fa-arrow-right { transition: transform .25s ease; }
.dp-btn:hover .fa-arrow-right { transform: translateX(4px); }

/* cards: lift, and the photo eases in a little */
.dp-stream__media, .dp-live-card__thumb, .dp-split__card { overflow: hidden; }
.dp-stream__media img, .dp-live-card__thumb img, .dp-split__img img { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.dp-stream:hover .dp-stream__media img, .dp-live-card:hover .dp-live-card__thumb img, .dp-split__card:hover .dp-split__img img { transform: scale(1.06); }
.dp-live-card, .dp-feature, .dp-pr__feature, .dp-compare__card, .dp-pr__steps li { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease, background .35s ease; }
.dp-live-card:hover, .dp-feature:hover, .dp-compare__card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(11,36,97,.16); }
.dp-pr__feature:hover { transform: translateY(-5px); background: rgba(255,255,255,.09); border-color: rgba(253,194,16,.45); }
.dp-pr__steps li:hover { transform: translateX(6px); border-color: rgba(253,194,16,.4); }
.dp-feature__icon, .dp-pr__icon { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.dp-feature:hover .dp-feature__icon, .dp-pr__feature:hover .dp-pr__icon { transform: translateY(-3px) rotate(-8deg) scale(1.08); }

/* ── 5. Little signs of life ───────────────────────────────────── */
/* Private Room labels on the picture float */
html.dpm-on .dp-pr__float--queue { animation: dpmFloat 5s ease-in-out infinite; }
html.dpm-on .dp-pr__float--lock  { animation: dpmFloat 5.6s ease-in-out .8s infinite; }
/* step numbers ripple, one after another */
@keyframes dpmRing { 0% { box-shadow: 0 0 0 0 rgba(253,194,16,.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(253,194,16,0); } }
html.dpm-on .dp-pr__num { animation: dpmRing 3s ease-out infinite; }
html.dpm-on .dp-pr__steps li:nth-child(2) .dp-pr__num { animation-delay: 1s; }
html.dpm-on .dp-pr__steps li:nth-child(3) .dp-pr__num { animation-delay: 2s; }
/* Private tag lock glints */
@keyframes dpmGlint { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-14deg) scale(1.15); } 90% { transform: rotate(10deg) scale(1.15); } }
html.dpm-on .dp-gallery-tag--private i, html.dpm-on .dp-badge-live--private i { display: inline-block; animation: dpmGlint 4s ease-in-out infinite; }
/* platform figures pop when they finish counting */
@keyframes dpmBump { 50% { transform: scale(1.12); } }
.dp-platform__stat b.dpm-done { display: inline-block; animation: dpmBump .45s ease; }
.dp-platform__stat i { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.dp-platform__stat:hover i { transform: scale(1.15) rotate(-6deg); }

/* ── 6. Reading progress line at the top of long pages ─────────── */
.dpm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #2875D9, var(--dp-gold, #FDC210)); }

/* ── 7. Respect "reduce motion" ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.dpm-on .dpm { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.dpm-on *, html.dpm-on *::before, html.dpm-on *::after { animation: none !important; }
  .dp-btn::after { display: none; }
  .dpm-progress { display: none; }
}