/** Reusable cards, buttons, media and decorative components */
body.cy-design :where(
  .fusion-button,
  .button,
  input[type="submit"],
  button[type="submit"],
  .checkout-button,
  .single_add_to_cart_button
) {
  position: relative;
  display: inline-flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .8rem 1.45rem;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--cy-radius-pill);
  background: linear-gradient(135deg, var(--cy-accent-bright), var(--cy-accent-deep));
  box-shadow: 0 10px 28px rgb(var(--cy-accent-rgb) / 25%);
  font-family: var(--cy-font-body);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
  transition:
    transform var(--cy-duration-base) var(--cy-ease-out),
    box-shadow var(--cy-duration-base) ease,
    filter var(--cy-duration-fast) ease;
}

body.cy-design :where(
  .fusion-button,
  .button,
  input[type="submit"],
  button[type="submit"],
  .checkout-button,
  .single_add_to_cart_button
):hover {
  color: #fff;
  transform: translateY(-3px);
  filter: saturate(1.08) brightness(1.05);
  box-shadow: 0 16px 38px rgb(var(--cy-accent-rgb) / 36%);
}

body.cy-design .fusion-button .fusion-button-text,
body.cy-design .fusion-button i {
  position: relative;
  z-index: 1;
  color: inherit;
}

body.cy-design .cy-button-ghost,
body.cy-design .fusion-button.button-default:not(.button-custom) {
  color: var(--cy-ink);
  border-color: rgb(var(--cy-accent-rgb) / 35%);
  background: rgb(255 255 255 / 72%);
  box-shadow: var(--cy-shadow-xs);
  backdrop-filter: blur(12px);
}

body.cy-design :where(
  .cy-card,
  .fusion-post-wrapper,
  .fusion-events-content-wrapper,
  .products li.product .product-wrapper,
  .fusion-content-boxes .content-wrapper-background,
  .person-author-wrapper,
  .tribe-common-g-row
) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--cy-accent-rgb) / 13%);
  border-radius: var(--cy-radius-lg);
  background: rgb(255 253 248 / 88%);
  box-shadow: var(--cy-shadow-sm);
  backdrop-filter: blur(16px);
  transform: translateZ(0);
  transition:
    transform var(--cy-duration-base) var(--cy-ease-out),
    box-shadow var(--cy-duration-base) ease,
    border-color var(--cy-duration-base) ease;
}

body.cy-design :where(
  .cy-card,
  .fusion-post-wrapper,
  .fusion-events-content-wrapper,
  .products li.product .product-wrapper,
  .fusion-content-boxes .content-wrapper-background,
  .person-author-wrapper
):hover {
  border-color: rgb(var(--cy-accent-rgb) / 36%);
  box-shadow: var(--cy-shadow-md), var(--cy-shadow-glow);
  transform: translateY(-7px);
}

body.cy-design :where(.fusion-post-wrapper, .product-wrapper) img {
  transition: transform 900ms var(--cy-ease-out), filter 600ms ease;
}

body.cy-design :where(.fusion-post-wrapper, .product-wrapper):hover img {
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.045);
}

body.cy-design .fusion-post-content-wrapper,
body.cy-design .product-details-container {
  position: relative;
  padding: clamp(1.25rem, 2.2vw, 2rem);
}

body.cy-design .fusion-post-content-wrapper::before,
body.cy-design .product-details-container::before {
  position: absolute;
  top: 0;
  left: clamp(1.25rem, 2.2vw, 2rem);
  width: 3.4rem;
  height: 3px;
  content: "";
  border-radius: var(--cy-radius-pill);
  background: linear-gradient(90deg, var(--cy-accent), var(--cy-gold-light));
}

body.cy-design .fusion-post-content-wrapper :where(h2, h3, h4) {
  margin-top: .35rem;
}

body.cy-design .fusion-imageframe,
body.cy-design .tribe-events-event-image,
body.cy-design .woocommerce-product-gallery__wrapper {
  overflow: hidden;
  border-radius: var(--cy-radius-lg);
  box-shadow: var(--cy-shadow-md);
}

body.cy-design .cy-glass {
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--cy-radius-xl);
  background: rgb(16 13 18 / 72%);
  box-shadow: var(--cy-shadow-lg);
  backdrop-filter: blur(22px) saturate(1.2);
}

body.cy-design .cy-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--cy-accent);
  font-family: var(--cy-font-display);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.cy-design .cy-ornament::before,
body.cy-design .cy-ornament::after {
  width: min(6rem, 12vw);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, currentColor);
}

body.cy-design .cy-ornament::after {
  transform: scaleX(-1);
}

body.cy-design .cy-surface-dark {
  color: rgb(255 255 255 / 76%);
  background:
    radial-gradient(circle at 82% 20%, rgb(var(--cy-accent-rgb) / 26%), transparent 28rem),
    linear-gradient(145deg, var(--cy-night-soft), var(--cy-night));
}

body.cy-design .cy-surface-dark :where(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

body.cy-design .cy-scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10050;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cy-accent-bright), var(--cy-gold-light));
  box-shadow: 0 0 18px rgb(var(--cy-accent-rgb) / 58%);
  transform: scaleX(var(--cy-scroll-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

body.cy-design .cy-pointer-card::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--cy-pointer-x, 50%) var(--cy-pointer-y, 50%), rgb(var(--cy-accent-rgb) / 13%), transparent 12rem);
  transition: opacity var(--cy-duration-base) ease;
}

body.cy-design .cy-pointer-card:hover::after {
  opacity: 1;
}

body.cy-design .cy-sponsor-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

body.cy-design .cy-sponsor-track.is-marquee {
  animation: cy-sponsor-marquee 36s linear infinite;
}

body.cy-design .cy-sponsor-track.is-marquee:hover {
  animation-play-state: paused;
}

@keyframes cy-sponsor-marquee {
  to { transform: translateX(-50%); }
}

html.cy-js body.cy-design .cy-reveal {
  opacity: 0;
  transform: translate3d(0, 2.75rem, 0) scale(.985);
  transition:
    opacity var(--cy-duration-slow) var(--cy-ease-out),
    transform var(--cy-duration-slow) var(--cy-ease-out);
  transition-delay: var(--cy-reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.cy-js body.cy-design .cy-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}