/* ============================================================================
   3SIXTY — Animation Guidelines & Utilities
   ----------------------------------------------------------------------------
   Principles
   1. Purposeful — motion confirms an action or guides the eye, never decorates.
   2. Elegant, not bouncy — luxury reads as smooth and unhurried. Prefer
      --ease-emphasis / --ease-out over elastic overshoot.
   3. Quick to respond, slow to dazzle — interactions (hover, press) use
      --duration-fast/base; reveals & ambient loops use --duration-slow+.
   4. Subtle distance — translate by 8–24px, scale by 1.02–1.05. Restraint.
   5. Respect prefers-reduced-motion — tokens collapse to 0ms automatically
      (see tokens.css); decorative loops below are also disabled.

   Duration guide
   - instant 80ms   : color/opacity nudge
   - fast    150ms  : hover, press, focus
   - base    250ms  : default transitions, dropdowns
   - slow    400ms  : card lift, image zoom, section reveal
   - slower  600ms  : hero / large gilded reveals

   Easing guide
   - --ease-standard : general UI    - --ease-out : enter/reveal
   - --ease-in       : exit/dismiss  - --ease-emphasis : luxe lifts & CTAs
   ============================================================================ */

/* --- Keyframes ------------------------------------------------------------- */
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ds-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
/* Gilded shimmer — for the brand name / hero accents. Use sparingly. */
@keyframes ds-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* --- Reveal-on-load utilities ---------------------------------------------- */
.ds-animate-fade  { animation: ds-fade-in  var(--duration-slow) var(--ease-out) both; }
.ds-animate-rise  { animation: ds-rise-in  var(--duration-slow) var(--ease-emphasis) both; }
.ds-animate-scale { animation: ds-scale-in var(--duration-base) var(--ease-emphasis) both; }

/* Stagger children: add to a parent, set --i on each child (0,1,2…) */
.ds-stagger > * {
  animation: ds-rise-in var(--duration-slow) var(--ease-emphasis) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Gilded shimmer sweep (pair with .ds-gilded) */
.ds-shimmer {
  background-size: 200% auto;
  animation: ds-shimmer 6s linear infinite;
}

/* --- Scroll-reveal pattern -------------------------------------------------
   Add `.ds-reveal` in markup; a tiny IntersectionObserver adds `.is-visible`.
   (See styleguide.html / README for the 6-line observer snippet.) */
.ds-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-emphasis);
  will-change: opacity, transform;
}
.ds-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hover affordance helpers ---------------------------------------------- */
.ds-hover-lift {
  transition: transform var(--duration-fast) var(--ease-emphasis),
              box-shadow var(--duration-base) var(--ease-standard);
}
.ds-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Animated underline for nav/links — grows from the left */
.ds-underline {
  position: relative;
  text-decoration: none;
}
.ds-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-emphasis);
}
.ds-underline:hover::after { transform: scaleX(1); }

/* --- Reduced motion: silence ambient & reveal animations ------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-animate-fade,
  .ds-animate-rise,
  .ds-animate-scale,
  .ds-stagger > *,
  .ds-shimmer { animation: none; }

  .ds-reveal { opacity: 1; transform: none; transition: none; }
}