/*
 * Car Care Customs — precision interaction layer
 * Two composited layers only: studio light + detail interface.
 * Content remains still; only transform and opacity are animated.
 */

.ccc-detail-field {
  position: fixed;
  z-index: 4500;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}

.ccc-detail-field__light,
.ccc-detail-field__interface {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ccc-detail-field__light {
  width: 32rem;
  height: 32rem;
  margin: -16rem 0 0 -16rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.13) 0 14%, rgba(255, 255, 255, 0.07) 30%, rgba(225, 37, 27, 0.038) 47%, rgba(225, 37, 27, 0) 71%);
  opacity: 0.82;
  transform: translate3d(var(--ccc-light-x, 50vw), var(--ccc-light-y, 50vh), 0);
  will-change: transform;
}

.ccc-detail-field__interface {
  contain: layout paint style;
}

.ccc-detail-reticle {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(225, 37, 27, 0.72);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-80px, -80px, 0);
  transition: opacity 120ms ease;
  will-change: transform, opacity;
}

.ccc-detail-reticle::before,
.ccc-detail-reticle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(225, 37, 27, 0.84);
  content: "";
  transform: translate(-50%, -50%);
}

.ccc-detail-reticle::before {
  width: 8px;
  height: 1px;
}

.ccc-detail-reticle::after {
  width: 1px;
  height: 8px;
}

.ccc-detail-reticle.is-visible {
  opacity: 1;
}

.ccc-detail-reticle__label {
  position: absolute;
  top: 50%;
  left: 42px;
  min-width: max-content;
  border-left: 2px solid #e1251b;
  background: rgba(10, 10, 12, 0.9);
  padding: 5px 8px 5px 9px;
  color: #fff;
  font-family: "Archivo", "Manrope", system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%);
  white-space: nowrap;
}

.ccc-detail-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(225, 37, 27, 0.78);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-80px, -80px, 0) scale(0.35);
  will-change: transform, opacity;
}

.ccc-detail-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ccc-detail-reactor {
  position: absolute;
  z-index: 2;
  inset: -4%;
  border: 1px solid transparent;
  background:
    linear-gradient(112deg, transparent 17%, rgba(255, 255, 255, 0.13) 38%, rgba(225, 37, 27, 0.055) 48%, transparent 67%);
  opacity: 0.46;
  transform:
    perspective(900px)
    rotateX(var(--ccc-tilt-x, 0deg))
    rotateY(var(--ccc-tilt-y, 0deg))
    scale(1.025);
  transform-origin: center;
  transition: opacity 180ms ease, transform 150ms ease-out;
  pointer-events: none;
  will-change: transform;
}

.ccc-detail-reactor[data-material="Keramik"] {
  background:
    linear-gradient(118deg, transparent 16%, rgba(255, 255, 255, 0.16) 38%, rgba(255, 255, 255, 0.04) 48%, rgba(225, 37, 27, 0.048) 55%, transparent 72%);
}

.ccc-detail-reactor[data-material="PPF"] {
  background:
    linear-gradient(104deg, transparent 23%, rgba(255, 255, 255, 0.035) 35%, rgba(255, 255, 255, 0.17) 44%, rgba(225, 37, 27, 0.04) 47%, rgba(255, 255, 255, 0.025) 57%, transparent 70%);
}

.ccc-detail-reactor[data-material="Unterboden"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(255, 255, 255, 0.04) 36px 37px),
    linear-gradient(115deg, transparent 25%, rgba(225, 37, 27, 0.065) 46%, rgba(255, 255, 255, 0.05) 55%, transparent 72%);
  opacity: 0.38;
}

.ccc-detail-card:hover .ccc-detail-reactor {
  opacity: 0.64;
}

.ccc-magnetic {
  --ccc-magnet-x: 0px;
  --ccc-magnet-y: 0px;
  transform: translate3d(var(--ccc-magnet-x), var(--ccc-magnet-y), 0);
  transition:
    transform 150ms ease-out,
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.ccc-magnetic:active {
  transform:
    translate3d(var(--ccc-magnet-x), var(--ccc-magnet-y), 0)
    scale(0.985);
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .ccc-detail-field__light,
  .ccc-detail-reticle,
  .ccc-detail-reactor {
    display: none;
  }

  .ccc-magnetic,
  .ccc-magnetic:active {
    transform: none;
  }

  .ccc-detail-pulse {
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .ccc-detail-field {
    display: none;
  }

  .ccc-detail-reactor,
  .ccc-magnetic,
  .ccc-magnetic:active {
    transform: none;
    transition: none;
  }
}