/* 3D Thumbnail Hover Effects Styles */

/* Card container with 3D transform properties */
[data-coolthumb] {
  will-change: transform;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Image layer with depth */
[data-coolthumb] .project-image {
  transform: translateZ(18px);
}

/* Glare overlay layer */
[data-coolthumb-glare] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Chromatic aberration effect layer */
[data-coolthumb-chroma] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  mix-blend-mode: screen;
  filter: blur(10px);
  background: radial-gradient(240px 160px at 50% 40%, rgba(0, 160, 255, 0.18), transparent 60%),
              radial-gradient(240px 160px at 50% 40%, rgba(255, 0, 120, 0.14), transparent 62%);
}

/* Floating metric badge */
[data-coolthumb-badge] {
  position: absolute;
  right: 14px;
  bottom: 14px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translateY(8px);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 8px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background) 80%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  color: var(--text-primary);
  font-weight: 650;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
}

/* Additional effect layers for different variants */
[data-coolthumb-glass] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 60%
  );
  transform: translateX(-60%) rotate(8deg);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-coolthumb-rim] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-coolthumb-occlusion] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  border-radius: 16px;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-coolthumb-holo] {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(0, 200, 255, 0.15) 36%,
    rgba(255, 0, 200, 0.15) 43%,
    rgba(255, 200, 0, 0.15) 50%,
    rgba(0, 255, 100, 0.15) 57%,
    rgba(100, 0, 255, 0.15) 64%,
    transparent 80%
  );
  mix-blend-mode: screen;
  transform: translateX(-20%) rotate(0deg);
  transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-coolthumb-vignette] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  border-radius: 16px;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-coolthumb-grain] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  border-radius: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-coolthumb-orbit] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  overflow: visible;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-coolthumb-orbit-dot] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  transform: translate(-50%, 0);
}

[data-coolthumb-plate] {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}