/* =================================================================
   UV REVEAL MODAL — SHARED
   UV-reactive reveal components for hover-to-reveal demos. Two
   flavors:

   1. `.uv-reveal` — simple base + UV layer hover swap. Used by
      dark-matter (and ready for indiglow once UV assets arrive).
   2. `.uv-reveal-kiss` — base + UV layer + 9 stacked foil layers
      with chrome-sweep animation. Used by the-kiss only.

   The base `.reveal-card` / `.reveal-modal` scaffolding lives in
   `css/demo-cards.css`; this file adds the UV-specific component
   plus the-kiss-specific theme overrides for those cards.

   Pages opt in via `css.uvRevealModal: true` in front-matter.
   ================================================================= */

/* =================================================================
   THEME OVERRIDES — THE KISS
   Retint the shared reveal-card / reveal-modal chrome for the-kiss.
   Other UV-reveal pages can rely on demo-cards.css defaults or
   declare their own overrides in pageStyles.
   ================================================================= */

.reveal-card__thumbnail,
.toggle-card__thumbnail {
  background: linear-gradient(135deg, #1a0a1a 0%, #2d1a2d 50%, #1a0a1a 100%);
}

.reveal-card__trigger:hover .reveal-card__overlay,
.toggle-card__trigger:hover .toggle-card__overlay {
  background: rgb(26, 10, 26, 0.6);
}

.reveal-card__title,
.toggle-card__title {
  color: #1a0a1a;
}

.reveal-modal__backdrop,
.toggle-modal__backdrop {
  background: rgb(26, 10, 26, 0.95);
}

.toggle-modal__frame {
  background: linear-gradient(135deg, #1a0a1a 0%, #2d1a2d 50%, #1a0a1a 100%);
}

/* =================================================================
   UV REVEAL — BASE COMPONENT (`.uv-reveal`)
   Two-image hover swap: CMYK base + UV layer that fades in with
   a cyan/magenta glow. Suitable for pages with no foil overlays.
   ================================================================= */

.uv-reveal {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgb(0, 0, 0, 0.3);
  cursor: pointer;
}

.uv-reveal__base {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.5s ease;
}

.uv-reveal__uv-layer {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease, filter 0.5s ease;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
}

.uv-reveal:hover .uv-reveal__uv-layer {
  opacity: 0.85;
  filter:
    drop-shadow(0 0 6px rgb(0, 255, 255, 0.9))
    drop-shadow(0 0 12px rgb(138, 43, 226, 0.7))
    drop-shadow(0 0 20px rgb(0, 255, 255, 0.5));
}

.uv-reveal:hover .uv-reveal__base {
  filter: brightness(0.85) saturate(0.9);
}

.uv-reveal__label {
  position: absolute;
  bottom: 15px;
  left: 50%;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 0 10px rgb(0, 255, 255, 0.5);
  white-space: nowrap;
  color: #fff;
  background: rgb(0, 0, 0, 0.8);
  border-radius: 4px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

.uv-reveal:hover .uv-reveal__label {
  opacity: 1;
}

/* =================================================================
   UV REVEAL — FOILED VARIANT (`.uv-reveal-kiss`)
   The-kiss-specific variant that adds 9 foil layers stacked over
   the base/UV pair with a chrome-sweep animation. Distinct class
   (not a BEM modifier) because the foil-layer markup is non-trivial
   and would clutter the simple-flavor pages if shared.
   ================================================================= */

.uv-reveal-kiss {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgb(0, 0, 0, 0.3);
  cursor: pointer;
}

.uv-reveal-kiss__stack {
  position: relative;
  width: 100%;
}

.uv-reveal-kiss__base {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.5s ease;
}

.uv-reveal-kiss__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: filter 0.5s ease;
  object-fit: cover;
}

.uv-reveal-kiss__cmyk {
  opacity: 0.7;
}

.uv-reveal-kiss__uv-layer {
  opacity: 0;
  transition: opacity 0.5s ease, filter 0.5s ease;
  pointer-events: none;
}

.uv-reveal-kiss:hover .uv-reveal-kiss__uv-layer {
  opacity: 0.85;
  filter:
    drop-shadow(0 0 6px rgb(0, 255, 255, 0.9))
    drop-shadow(0 0 12px rgb(138, 43, 226, 0.7))
    drop-shadow(0 0 20px rgb(0, 255, 255, 0.5));
}

.uv-reveal-kiss:hover .uv-reveal-kiss__base,
.uv-reveal-kiss:hover .uv-reveal-kiss__layer:not(.uv-reveal-kiss__uv-layer) {
  filter: brightness(0.85) saturate(0.9);
}

.uv-reveal-kiss__label {
  position: absolute;
  bottom: 15px;
  left: 50%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 0 10px rgb(0, 255, 255, 0.5);
  white-space: nowrap;
  color: #fff;
  background: rgb(0, 0, 0, 0.8);
  border-radius: 4px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

.uv-reveal-kiss:hover .uv-reveal-kiss__label {
  opacity: 1;
}

/* =================================================================
   FOIL LAYERS — chrome-sweep effects overlaid on the reveal stack
   ================================================================= */

@keyframes reveal-chrome-sweep {
  0%,
  100% {
    background-position: 100% 0;
  }

  50% {
    background-position: 0% 0;
  }
}

.reveal-foil-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: filter 0.5s ease;
}

.reveal-foil-layer img {
  opacity: 0;
}

.reveal-foil-layer--gold::before {
  position: absolute;
  background: linear-gradient(
    120deg,
    #8b6914 0%,
    #cd9b1d 15%,
    #ffe55c 30%,
    #fffacd 45%,
    #ffd700 55%,
    #ffd700 70%,
    #cd9b1d 85%,
    #8b6914 100%
  );
  background-size: 300% 100%;
  animation: reveal-chrome-sweep 3s ease-in-out infinite;
  content: '';
  inset: 0;
}

.reveal-foil-layer--gold-1::before {
  mask-image: url('/assets/the-kiss/gold-1.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--gold-2::before {
  mask-image: url('/assets/the-kiss/gold-2.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--silver::before {
  position: absolute;
  background: linear-gradient(
    120deg,
    #6b6b6b 0%,
    #a8a8a8 15%,
    #e8e8e8 30%,
    #fff 45%,
    #f0f0f0 55%,
    #d4d4d4 70%,
    #b8b8b8 85%,
    #6b6b6b 100%
  );
  background-size: 300% 100%;
  animation: reveal-chrome-sweep 3s ease-in-out infinite;
  content: '';
  inset: 0;
}

.reveal-foil-layer--silver-1::before {
  mask-image: url('/assets/the-kiss/silver-1.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--silver-2::before {
  mask-image: url('/assets/the-kiss/silver-2.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--rose-gold::before {
  position: absolute;
  background: linear-gradient(
    120deg,
    #8b5a5a 0%,
    #b76e79 15%,
    #e8b4b4 30%,
    #ffd1dc 45%,
    #f4c2c2 55%,
    #e8b4b4 70%,
    #b76e79 85%,
    #8b5a5a 100%
  );
  background-size: 300% 100%;
  animation: reveal-chrome-sweep 3s ease-in-out infinite;
  content: '';
  inset: 0;
}

.reveal-foil-layer--rose-gold-1::before {
  mask-image: url('/assets/the-kiss/rose-gold-1.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--rose-gold-2::before {
  mask-image: url('/assets/the-kiss/rose-gold-2.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--matte-gold::before {
  position: absolute;
  background: linear-gradient(
    120deg,
    #9a7b0a 0%,
    #c9a227 15%,
    #e8d48a 30%,
    #f5e6b0 45%,
    #d4af37 55%,
    #d4af37 70%,
    #c9a227 85%,
    #9a7b0a 100%
  );
  background-size: 300% 100%;
  animation: reveal-chrome-sweep 3s ease-in-out infinite;
  content: '';
  inset: 0;
  mask-image: url('/assets/the-kiss/matte-gold.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--matte-silver::before {
  position: absolute;
  background: linear-gradient(
    120deg,
    #888 0%,
    #a0a0a0 15%,
    #c8c8c8 30%,
    #e0e0e0 45%,
    silver 55%,
    silver 70%,
    #a0a0a0 85%,
    #888 100%
  );
  background-size: 300% 100%;
  animation: reveal-chrome-sweep 3s ease-in-out infinite;
  content: '';
  inset: 0;
  mask-image: url('/assets/the-kiss/matte-silver.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--copper::before {
  position: absolute;
  background: linear-gradient(
    120deg,
    #8b5a33 0%,
    #b87333 15%,
    #da8a67 30%,
    #f5d0c5 45%,
    #da8a67 55%,
    #b87333 70%,
    #8b5a33 85%,
    #8b5a33 100%
  );
  background-size: 300% 100%;
  animation: reveal-chrome-sweep 3s ease-in-out infinite;
  content: '';
  inset: 0;
  mask-image: url('/assets/the-kiss/copper.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--black-gloss {
  background: #000;
  mask-image: url('/assets/the-kiss/black-gloss.webp');
  mask-size: 100% 100%;
}

.reveal-foil-layer--black-gloss::before {
  position: absolute;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 35%,
    rgb(255, 255, 255, 0.3) 45%,
    rgb(255, 255, 255, 0.4) 50%,
    rgb(255, 255, 255, 0.3) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: reveal-chrome-sweep 3s ease-in-out infinite;
  content: '';
  inset: 0;
}

.uv-reveal-kiss:hover .reveal-foil-layer::before {
  filter: brightness(0.85) saturate(0.9);
}