/*
 * ImageHalo C2 pricing motion
 *
 * Hook contract (one visual mount per pricing tier):
 *
 * <article data-c2-pricing-motion-card tabindex="0">
 *   <div class="c2-pricing-motion" data-c2-pricing-motion="basic"></div>
 * </article>
 *
 * `data-c2-pricing-motion` accepts basic/50, pro/120, or flagship/300.
 * Load this stylesheet before c2-pricing-motion.js.  The JS creates an SVG
 * scene from /static/brand/imagehalo/c2.png; it does not create a replacement
 * illustration or introduce another image source.
 */

.c2-pricing-motion {
  --c2pm-size: clamp(5.75rem, 14vw, 9.5rem);
  position: relative;
  isolation: isolate;
  display: block;
  flex: 0 0 auto;
  inline-size: var(--c2pm-size);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: visible;
  contain: layout paint style;
}

.c2-pricing-motion__scene {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.c2-pricing-motion__base,
.c2-pricing-motion__halo,
.c2-pricing-motion__brow-patch,
.c2-pricing-motion__brow,
.c2-pricing-motion__artwork {
  transform-box: fill-box;
  will-change: opacity, transform;
}

/* The rest pose is always the untouched, complete C2 artwork. */
.c2-pricing-motion__halo,
.c2-pricing-motion__brow-patch,
.c2-pricing-motion__brow,
.c2-pricing-motion__artwork {
  opacity: 0;
}

.c2-pricing-motion__artwork {
  transform-origin: 50% 50%;
}

[data-c2-pricing-motion-card] {
  -webkit-tap-highlight-color: transparent;
}

[data-c2-pricing-motion-card]:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 4px;
}

@media (max-width: 639px) {
  .c2-pricing-motion { --c2pm-size: clamp(7rem, 30vw, 7.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .c2-pricing-motion__artwork {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .c2-pricing-motion__halo,
  .c2-pricing-motion__brow-patch,
  .c2-pricing-motion__brow {
    display: none;
  }
}

@media (forced-colors: active) {
  .c2-pricing-motion__artwork { display: none; }
}