/* Creytix Banner Studio — "design magic" motion layer
 * Dependency-free. Reuses the fleet's owned @expedia/creytix-motion engine
 * for the appear/reveal/hover-lift/parallax primitives (compositor-first,
 * scroll-driven CSS, reduced-motion safe out of the box — see
 * packages/creytix-motion/README.md), then layers banner-specific polish
 * on top: CTA shimmer sweep, hero tilt/parallax, and sticky-dismiss motion.
 *
 * Drop-in usage on ANY page (not just banners):
 *   <link rel="stylesheet" href=".../creytix-motion/css/default.css">
 *   <link rel="stylesheet" href=".../creytix-banners/core/magic.css">
 *   <script defer src=".../creytix-banners/core/magic.js"></script>
 *   <div data-cx-motion="appear-fade-up">...</div>
 *   <button class="cxb__btn cxb__btn--primary" data-cxb-shimmer>...</button>
 *
 * Every effect below is wrapped in @media (prefers-reduced-motion: reduce)
 * guards IN ADDITION to the ones already shipped by creytix-motion, and
 * magic.js checks matchMedia before attaching any scroll/pointer listener.
 */
@import url("./default.css");

/* ---------- CTA shimmer sweep ---------- */
/* A soft diagonal light sweep across a button on hover/focus — cheap
   (background-position transition only, no layout, no repaint of siblings). */
[data-cxb-shimmer] {
  position: relative;
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.35) 55%, transparent 70%),
    linear-gradient(0deg, transparent, transparent);
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  transition: background-position 0.6s ease;
}
[data-cxb-shimmer]:hover,
[data-cxb-shimmer]:focus-visible {
  background-position: -50% 0, 0 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-cxb-shimmer] { transition: none; background-position: 0 0, 0 0; }
}

/* ---------- hover-lift for banner cards themselves ---------- */
[data-cxb-magic~="lift"] {
  transition: transform 0.28s cubic-bezier(.22,.9,.32,1), box-shadow 0.28s ease;
  will-change: transform;
}
[data-cxb-magic~="lift"]:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(15, 25, 35, 0.34); }
@media (prefers-reduced-motion: reduce) {
  [data-cxb-magic~="lift"] { transition: none; }
  [data-cxb-magic~="lift"]:hover { transform: none; }
}

/* ---------- hero parallax media (JS sets --cxb-parallax-y via rAF scroll) ---------- */
[data-cxb-magic~="parallax"] .cxb__media {
  transform: translate3d(0, var(--cxb-parallax-y, 0px), 0) scale(1.12);
  transition: transform 0.05s linear;
}
@media (prefers-reduced-motion: reduce) {
  [data-cxb-magic~="parallax"] .cxb__media { transform: none !important; }
}

/* ---------- hero tilt (JS sets --cxb-tilt-x/--cxb-tilt-y via pointermove) ---------- */
[data-cxb-magic~="tilt"] {
  transform: perspective(900px) rotateX(var(--cxb-tilt-y, 0deg)) rotateY(var(--cxb-tilt-x, 0deg));
  transition: transform 0.4s cubic-bezier(.22,.9,.32,1);
}
@media (prefers-reduced-motion: reduce) {
  [data-cxb-magic~="tilt"] { transform: none !important; transition: none; }
}

/* ---------- gradient shimmer border/glow accent (achievement + brand tones) ---------- */
[data-cxb-magic~="glow"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--cxb-accent, #2563EB) 70%, white) 45%, transparent 70%);
  background-size: 220% 220%;
  animation: cxb-glow-sweep 5.5s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes cxb-glow-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-cxb-magic~="glow"]::before { animation: none; }
}

/* ---------- sticky enter/dismiss transition ---------- */
[data-cxb-sticky-root] {
  transition: transform 0.32s cubic-bezier(.22,.9,.32,1), opacity 0.32s ease;
}
[data-cxb-sticky-root][data-cxb-dismissed="true"] {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-cxb-sticky-root] { transition: opacity 0.15s ease; }
  [data-cxb-sticky-root][data-cxb-dismissed="true"] { transform: none; }
}

/* ---------- view-transition-ish swap polish for theme switching (showcase) ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.35s; }
}