/* ROY DIAMOND — premium smooth classic scroll motion v4
   Motion-only enhancement. Existing layout, typography, colours and business content remain unchanged. */
:root {
  --rd-motion-ease: cubic-bezier(.16, 1, .3, 1);
  --rd-motion-soft: cubic-bezier(.22, .78, .24, 1);
  --rd-motion-fast: 220ms;
  --rd-motion-medium: 440ms;
  --rd-motion-slow: 680ms;
}

/*
   Scroll reveal intentionally uses opacity + individual transform properties.
   This avoids replacing transforms already used by page components and keeps
   the motion lightweight. No wheel/touch scrolling is intercepted.
*/
html.rd-motion-ready .rd-motion-reveal {
  --rd-reveal-x: 0px;
  --rd-reveal-y: 18px;
  --rd-reveal-scale: .994;
  opacity: 0;
  translate: var(--rd-reveal-x) var(--rd-reveal-y);
  scale: var(--rd-reveal-scale);
  transition-property: opacity, translate, scale;
  transition-duration: var(--rd-motion-slow);
  transition-timing-function: var(--rd-motion-ease);
  transition-delay: var(--rd-motion-delay, 0ms);
}

html.rd-motion-ready .rd-motion-reveal.rd-motion-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Premium choreography: headings rise, cards alternate gently, media settles in. */
html.rd-motion-ready .rd-motion-reveal.rd-motion-heading {
  --rd-reveal-y: 14px;
  --rd-reveal-scale: .998;
}

html.rd-motion-ready .rd-motion-reveal.rd-motion-from-left {
  --rd-reveal-x: -16px;
  --rd-reveal-y: 9px;
  --rd-reveal-scale: .996;
}

html.rd-motion-ready .rd-motion-reveal.rd-motion-from-right {
  --rd-reveal-x: 16px;
  --rd-reveal-y: 9px;
  --rd-reveal-scale: .996;
}

html.rd-motion-ready .rd-motion-reveal.rd-motion-media-reveal {
  --rd-reveal-y: 12px;
  --rd-reveal-scale: .988;
}

html.rd-motion-ready .rd-motion-reveal.rd-motion-footer-reveal {
  --rd-reveal-y: 10px;
  --rd-reveal-scale: .999;
  transition-duration: 560ms;
}

.rd-motion-card {
  backface-visibility: hidden;
  transition:
    translate 360ms var(--rd-motion-ease),
    scale 360ms var(--rd-motion-ease),
    box-shadow 360ms ease,
    border-color 360ms ease;
}

.rd-motion-depth-target {
  --rd-depth-x: 0deg;
  --rd-depth-y: 0deg;
  --rd-depth-scale: 1;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transform: perspective(1100px)
             rotateX(var(--rd-depth-x))
             rotateY(var(--rd-depth-y))
             scale(var(--rd-depth-scale)) !important;
  transition: transform 300ms var(--rd-motion-ease);
}

.rd-motion-depth-target.rd-motion-tracking {
  transition-duration: 90ms;
  transition-timing-function: linear;
}

.rd-motion-button {
  backface-visibility: hidden;
  transition:
    translate var(--rd-motion-fast) var(--rd-motion-ease),
    scale var(--rd-motion-fast) var(--rd-motion-ease),
    box-shadow var(--rd-motion-fast) ease,
    opacity var(--rd-motion-fast) ease;
}

.rd-motion-button:active {
  translate: 0 1px;
  scale: .988;
}

.rd-motion-pop-open {
  animation: rdMotionPopOpenV3 420ms var(--rd-motion-ease) both;
}

@keyframes rdMotionPopOpenV3 {
  from {
    opacity: 0;
    translate: 0 10px;
    scale: .992;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .rd-motion-card.rd-motion-has-depth:hover {
    /* Legacy page CSS already supplies any card lift; avoid stacking a second translation. */
    translate: 0 0;
  }

  .rd-motion-card:hover .rd-motion-depth-target {
    --rd-depth-scale: 1.008;
  }

  .rd-motion-button:hover {
    /* Keep the premium micro-scale without doubling legacy button translateY hover rules. */
    translate: 0 0;
    scale: 1.004;
  }
}

/* Phone motion stays elegant and deliberately lighter to avoid jumpy/janky feel. */
@media (max-width: 700px) {
  html.rd-motion-ready .rd-motion-reveal {
    --rd-reveal-x: 0px;
    --rd-reveal-y: 9px;
    --rd-reveal-scale: .998;
    transition-duration: 500ms;
  }

  html.rd-motion-ready .rd-motion-reveal.rd-motion-heading {
    --rd-reveal-y: 8px;
  }

  html.rd-motion-ready .rd-motion-reveal.rd-motion-from-left {
    --rd-reveal-x: -7px;
    --rd-reveal-y: 7px;
    --rd-reveal-scale: .999;
  }

  html.rd-motion-ready .rd-motion-reveal.rd-motion-from-right {
    --rd-reveal-x: 7px;
    --rd-reveal-y: 7px;
    --rd-reveal-scale: .999;
  }

  html.rd-motion-ready .rd-motion-reveal.rd-motion-media-reveal {
    --rd-reveal-y: 8px;
    --rd-reveal-scale: .996;
  }

  .rd-motion-card {
    transition-duration: 260ms;
  }

  .rd-motion-card.rd-motion-has-depth:active {
    translate: 0 -1px;
    scale: .997;
  }

  .rd-motion-depth-target {
    transform: none !important;
  }
}

@supports not (translate: 0 1px) {
  html.rd-motion-ready .rd-motion-reveal {
    translate: none;
    scale: 1;
  }

  .rd-motion-card,
  .rd-motion-button {
    translate: none !important;
    scale: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.rd-motion-ready .rd-motion-reveal,
  html.rd-motion-ready .rd-motion-reveal.rd-motion-visible,
  .rd-motion-card,
  .rd-motion-depth-target,
  .rd-motion-button,
  .rd-motion-pop-open {
    animation: none !important;
    transition: none !important;
  }

  html.rd-motion-ready .rd-motion-reveal,
  html.rd-motion-ready .rd-motion-reveal.rd-motion-visible {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
  }

  .rd-motion-card.rd-motion-has-depth:hover,
  .rd-motion-card.rd-motion-has-depth:active,
  .rd-motion-button:hover,
  .rd-motion-button:active {
    translate: none !important;
    scale: 1 !important;
  }

  .rd-motion-depth-target,
  .rd-motion-depth-target.rd-motion-tracking {
    transform: none !important;
  }
}