.taopix-atc-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Alpine: hide x-cloak elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/*
  Taopix button icon hover swap.
  Don't rely on Tailwind `group-hover:*` utilities being present in the built CSS,
  since module templates may not be included in a theme's Tailwind content scan.
*/
.taopix-customize-wrapper .taopix-sparkles-icon {
    transition: opacity 150ms ease;
}

.taopix-customize-wrapper .taopix-sparkles-icon--white {
    opacity: 1;
}

.taopix-customize-wrapper .taopix-sparkles-icon--black {
    opacity: 0;
}

.taopix-customize-wrapper button:hover .taopix-sparkles-icon--white,
.taopix-customize-wrapper button:focus-visible .taopix-sparkles-icon--white {
    opacity: 0;
}

.taopix-customize-wrapper button:hover .taopix-sparkles-icon--black,
.taopix-customize-wrapper button:focus-visible .taopix-sparkles-icon--black {
    opacity: 1;
}

/*
  Hyvä theme styles apply `mix-blend-mode: difference` on `.button--hyperion:hover > span > span`.
  That makes pure black artwork effectively disappear (difference blend of #000 results in no visual change).
  Taopix needs a real black icon on hover, so we reset blending for this module's button area.
*/
.taopix-customize-wrapper .button--hyperion > span > span,
.taopix-customize-wrapper .button--hyperion:hover > span > span {
    mix-blend-mode: normal !important;
}

/*
  Restore the visible “text inversion” on hover without using mix-blend-mode.
  In Hyvä, `.button--hyperion` has `bg-white` and a `::before` overlay with bg-secondary.
  On hover the overlay scales down, revealing the white base.
  Keep text readable by switching it to black on hover.
*/
.taopix-customize-wrapper .taopix-hyperion-text {
    color: #ffffff !important;
    transition: color 150ms ease;
}

.taopix-customize-wrapper .button--hyperion:hover .taopix-hyperion-text,
.taopix-customize-wrapper .button--hyperion:focus-visible .taopix-hyperion-text {
    color: #000000 !important;
}