/* ── Der blasse Schimmer — Motion ──
   Nothing hectic. No visual noise. Elements fade softly (opacity 0 → 1) or glide
   slowly upward (translateY). Only ease-in-out curves. Adult, light-flooded, calm. */

:root {
  /* ── Easing — soft, symmetrical, never bouncy (default in/out, slow settle, caption swap) ── */
  --ease-soft:    cubic-bezier(0.4, 0.0, 0.2, 1);   /* @kind other */
  --ease-gentle:  cubic-bezier(0.33, 0.0, 0.2, 1);  /* @kind other */
  --ease-out:     cubic-bezier(0.16, 0.0, 0.0, 1);  /* @kind other */

  /* ── Durations — unhurried ── */
  --dur-fast:   400ms;  /* @kind other */
  --dur-base:   650ms;  /* @kind other */
  --dur-slow:   900ms;  /* @kind other */
  --dur-hold:   1200ms; /* @kind other */

  /* ── Travel distances for glide-ups ── */
  --rise-sm: 16px;
  --rise-md: 28px;
  --rise-lg: 48px;
}

/* ── Keyframes ── */
@keyframes dbs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dbs-rise-in {
  from { opacity: 0; transform: translateY(var(--rise-md)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dbs-rise-in-lg {
  from { opacity: 0; transform: translateY(var(--rise-lg)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* gentle scale-settle for hook cards — barely perceptible */
@keyframes dbs-settle-in {
  from { opacity: 0; transform: translateY(var(--rise-sm)) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* caption word swap — soft cross-fade up */
@keyframes dbs-caption-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* a slow, ambient light drift for hero backgrounds */
@keyframes dbs-shimmer-drift {
  0%, 100% { opacity: 0.7; transform: translateX(-2%); }
  50%      { opacity: 1;   transform: translateX(2%); }
}

/* ── Animation utility classes ── */
.dbs-anim-fade   { animation: dbs-fade-in    var(--dur-base) var(--ease-soft) both; }
.dbs-anim-rise   { animation: dbs-rise-in    var(--dur-slow) var(--ease-gentle) both; }
.dbs-anim-settle { animation: dbs-settle-in  var(--dur-slow) var(--ease-gentle) both; }
.dbs-anim-caption{ animation: dbs-caption-in var(--dur-fast) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .dbs-anim-fade, .dbs-anim-rise, .dbs-anim-settle, .dbs-anim-caption {
    animation: none;
  }
}