/**
 * Sampatti Setu V2 — Motion primitives
 *
 * Reusable classes only. Not attached to live theme elements yet.
 * Prefer transform + opacity. No layout-triggering animations.
 */

/* -------------------------------------------------------------------------
 * Shared transition helpers (opt-in)
 * ------------------------------------------------------------------------- */

.ss-reveal,
.ss-image-zoom,
.ss-gold-line,
.ss-arrow-shift {
  will-change: auto;
}

/* -------------------------------------------------------------------------
 * .ss-reveal — soft entrance (for future IntersectionObserver / CSS trigger)
 * ------------------------------------------------------------------------- */

.ss-reveal {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity var(--ss-duration-luxury, 520ms) var(--ss-ease-primary, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--ss-duration-luxury, 520ms) var(--ss-ease-primary, cubic-bezier(0.22, 1, 0.36, 1));
}

.ss-reveal.is-visible,
.ss-reveal--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* -------------------------------------------------------------------------
 * .ss-image-zoom — restrained media hover (apply to wrapper + img child)
 * ------------------------------------------------------------------------- */

.ss-image-zoom {
  overflow: hidden;
}

.ss-image-zoom img,
.ss-image-zoom .ss-image-zoom__media {
  transform: scale3d(1, 1, 1);
  transition: transform var(--ss-duration-luxury, 520ms) var(--ss-ease-soft, cubic-bezier(0.33, 1, 0.68, 1));
}

@media (hover: hover) and (pointer: fine) {
  .ss-image-zoom:hover img,
  .ss-image-zoom:hover .ss-image-zoom__media,
  .ss-image-zoom:focus-within img,
  .ss-image-zoom:focus-within .ss-image-zoom__media {
    transform: scale3d(1.03, 1.03, 1);
  }
}

/* -------------------------------------------------------------------------
 * .ss-gold-line — underline / accent grow
 * ------------------------------------------------------------------------- */

.ss-gold-line {
  position: relative;
  display: inline-block;
}

.ss-gold-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 1px;
  background-color: var(--ss-muted-gold, #d6b268);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ss-duration-standard, 280ms) var(--ss-ease-primary, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (hover: hover) and (pointer: fine) {
  .ss-gold-line:hover::after,
  .ss-gold-line:focus-visible::after {
    transform: scaleX(1);
  }
}

.ss-gold-line.is-active::after,
.ss-gold-line--active::after {
  transform: scaleX(1);
}

/* -------------------------------------------------------------------------
 * .ss-developer-rail — continuous logo marquee
 * ------------------------------------------------------------------------- */

@keyframes ss-developer-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* -------------------------------------------------------------------------
 * .ss-value-marquee — continuous value strip
 * ------------------------------------------------------------------------- */

@keyframes ss-value-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* -------------------------------------------------------------------------
 * .ss-arrow-shift — micro nudge for CTAs / icons
 * ------------------------------------------------------------------------- */

.ss-arrow-shift {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  transition: transform var(--ss-duration-fast, 160ms) var(--ss-ease-primary, cubic-bezier(0.22, 1, 0.36, 1));
}

.ss-arrow-shift__icon {
  display: inline-block;
  transition: transform var(--ss-duration-standard, 280ms) var(--ss-ease-primary, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (hover: hover) and (pointer: fine) {
  .ss-arrow-shift:hover .ss-arrow-shift__icon,
  .ss-arrow-shift:focus-visible .ss-arrow-shift__icon {
    transform: translate3d(0.25rem, 0, 0);
  }
}

/* -------------------------------------------------------------------------
 * prefers-reduced-motion — mandatory
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ss-reveal,
  .ss-reveal.is-visible,
  .ss-reveal--visible,
  .ss-image-zoom img,
  .ss-image-zoom .ss-image-zoom__media,
  .ss-gold-line::after,
  .ss-arrow-shift,
  .ss-arrow-shift__icon,
  .ss-developer-rail__track,
  .ss-value-marquee__track {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .ss-developer-rail__viewport,
  .ss-value-marquee__viewport {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ss-reveal {
    opacity: 1;
  }

  .ss-gold-line::after {
    transform: scaleX(1);
  }
}