/* ==========================================================================
   bydex.ca 2.0 — Motion system
   Quiet, confident. Fades & gentle rises on brand eases. No bounce.
   Elements opt in via [data-reveal]; motion.js flips .is-inview.
   Reduced motion: everything is simply visible.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* Variants */
[data-reveal="fade"] { transform: none; }

[data-reveal="rule"] {
  transform: none;
}
[data-reveal="rule"]::before,
[data-reveal="rule"]::after {
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="rule"].is-inview::before,
[data-reveal="rule"].is-inview::after {
  transform: scaleX(1);
}

/* Stagger helper — parent sets [data-stagger]; children get incremental delay */
[data-stagger] > * { --reveal-delay: 0ms; }
[data-stagger] > *:nth-child(2) { --reveal-delay: 130ms; }
[data-stagger] > *:nth-child(3) { --reveal-delay: 260ms; }
[data-stagger] > *:nth-child(4) { --reveal-delay: 390ms; }
[data-stagger] > *:nth-child(5) { --reveal-delay: 520ms; }
[data-stagger] > *:nth-child(6) { --reveal-delay: 650ms; }

/* Photo frames — slight settle-in scale, hairline frame */
.photo-frame { overflow: hidden; }
.photo-frame img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.photo-frame:hover img { transform: scale(1.025); }

/* Reduced motion: no movement, instant visibility */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="rule"]::before,
  [data-reveal="rule"]::after {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .photo-frame img,
  .photo-frame:hover img { transform: none; transition: none; }
}