/* Shared lightweight motion templates for portfolio demos. */
html[data-demo-motion] {
  --dm-primary: 49 139 202;
  --dm-accent: 126 211 255;
  --dm-soft: 255 255 255;
}
html[data-demo-motion='bakery'] { --dm-primary: 188 116 53; --dm-accent: 245 187 104; --dm-soft: 255 244 219; }
html[data-demo-motion='cafe-brosh'] { --dm-primary: 65 112 82; --dm-accent: 191 154 85; --dm-soft: 236 245 226; }
html[data-demo-motion='cafe-dina'] { --dm-primary: 104 75 57; --dm-accent: 173 126 90; --dm-soft: 255 239 219; }
html[data-demo-motion='ember'] { --dm-primary: 212 78 43; --dm-accent: 244 157 70; --dm-soft: 255 226 189; }
html[data-demo-motion='fix-electric'] { --dm-primary: 24 112 220; --dm-accent: 0 196 255; --dm-soft: 255 221 47; }
html[data-demo-motion='kav-ink'] { --dm-primary: 212 35 42; --dm-accent: 255 76 94; --dm-soft: 247 246 242; }
html[data-demo-motion='lume-hair'] { --dm-primary: 164 91 102; --dm-accent: 213 170 113; --dm-soft: 255 236 233; }
html[data-demo-motion='sora-sushi'] { --dm-primary: 235 64 98; --dm-accent: 79 202 224; --dm-soft: 255 237 241; }
html[data-demo-motion='station-burger'] { --dm-primary: 238 177 31; --dm-accent: 230 72 43; --dm-soft: 255 236 164; }
html[data-demo-motion='studio-zahav'] { --dm-primary: 204 158 62; --dm-accent: 244 207 116; --dm-soft: 255 241 204; }

.dm-section { position: relative; isolation: isolate; }
.dm-section > :not(.dm-layer):not(.absolute) { position: relative; z-index: 1; }
.dm-section > .absolute:not(.dm-layer) { z-index: 1; }
.dm-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.dm-section.dm-active .dm-layer { opacity: 1; }
.dm-blob,
.dm-ring,
.dm-beam,
.dm-dot {
  position: absolute;
  display: block;
  will-change: transform, opacity;
  animation-play-state: paused !important;
}
.dm-active .dm-blob,
.dm-active .dm-ring,
.dm-active .dm-beam,
.dm-active .dm-dot { animation-play-state: running !important; }

.dm-blob {
  width: clamp(15rem, 34vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(58px);
  background: radial-gradient(circle, rgb(var(--dm-primary) / .15), transparent 68%);
  animation: dm-flow 14s cubic-bezier(.2,.8,.2,1) infinite alternate;
}
.dm-blob--one { top: -35%; left: -12%; }
.dm-blob--two {
  right: -15%;
  bottom: -42%;
  background: radial-gradient(circle, rgb(var(--dm-accent) / .13), transparent 69%);
  animation-direction: alternate-reverse;
  animation-duration: 19s;
}
.dm-ring {
  top: -18%;
  right: -13%;
  width: clamp(16rem, 40vw, 40rem);
  aspect-ratio: 1.6;
  border: 1px solid rgb(var(--dm-primary) / .18);
  border-radius: 50%;
  animation: dm-ring 22s linear infinite;
}
.dm-ring--two {
  top: auto;
  right: auto;
  left: -11%;
  bottom: -25%;
  width: clamp(12rem, 27vw, 27rem);
  border-style: dashed;
  border-color: rgb(var(--dm-accent) / .2);
  animation-direction: reverse;
  animation-duration: 28s;
}
.dm-beam {
  top: 36%;
  left: -40rem;
  width: 38rem;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--dm-primary) / .28), rgb(var(--dm-accent) / .85), transparent);
  box-shadow: 0 0 22px rgb(var(--dm-accent) / .24);
  transform: rotate(-11deg);
  animation: dm-beam 10s cubic-bezier(.42,0,.2,1) infinite;
}
.dm-dot {
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--dm-accent) / .76);
  box-shadow: 0 0 14px 4px rgb(var(--dm-accent) / .16);
  animation: dm-dot 4.6s ease-in-out var(--delay) infinite;
}

.dm-template-flow .dm-ring { opacity: .38; }
.dm-template-flow .dm-beam { animation-duration: 14s; opacity: .45; }
.dm-template-orbit .dm-blob { opacity: .52; }
.dm-template-orbit .dm-ring { border-width: 1.5px; }
.dm-template-beam .dm-beam { height: 2px; animation-duration: 8s; }
.dm-template-beam .dm-ring { opacity: .45; }
.dm-template-grid .dm-layer {
  background-image:
    linear-gradient(rgb(var(--dm-primary) / .06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--dm-primary) / .06) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: dm-grid-shift 9s linear infinite;
}
.dm-template-grid .dm-blob { opacity: .58; }
.dm-template-grid .dm-ring { opacity: .34; }

.dm-hero .dm-layer { opacity: .85; }
.dm-hero .dm-blob { background: radial-gradient(circle, rgb(var(--dm-accent) / .23), transparent 66%); }
.dm-hero .dm-beam { animation-duration: 7.5s; }

/* Small tactile polish without changing the individual demo layouts. */
.dm-card {
  transition-property: transform, box-shadow, filter !important;
  transition-duration: .28s !important;
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}
@media (hover: hover) and (pointer: fine) {
  .dm-card:hover { transform: translateY(-4px); filter: saturate(1.03); }
}

@keyframes dm-flow {
  from { transform: translate3d(-4%, -3%, 0) scale(.9); opacity: .42; }
  to { transform: translate3d(24%, 14%, 0) scale(1.14); opacity: .96; }
}
@keyframes dm-ring { to { transform: rotate(360deg); } }
@keyframes dm-beam {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(-11deg); }
  12% { opacity: .82; }
  75% { opacity: .38; }
  90%, 100% { opacity: 0; transform: translate3d(calc(100vw + 78rem),0,0) rotate(-11deg); }
}
@keyframes dm-dot { 0%,100% { transform: scale(.55); opacity: .18; } 50% { transform: scale(1.3); opacity: .9; } }
@keyframes dm-grid-shift { from { background-position: 0 0, 0 0; } to { background-position: 42px 42px, 42px 42px; } }

@media (max-width: 767px) {
  .dm-blob { filter: blur(43px); opacity: .75; }
  .dm-beam { animation-duration: 7.5s; }
  .dm-ring { opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-layer,
  .dm-section.dm-active .dm-layer { opacity: .45; }
  .dm-layer,
  .dm-layer *,
  .dm-card { animation: none !important; transition-duration: .01ms !important; }
  .dm-card:hover { transform: none; }
}