/* Configuration de base Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Police personnalisée */
@font-face {
  font-family: 'SourceSansPro';
  src: url('/font/SourceSansPro-Regular.otf') format('opentype'),
}

@font-face {
  font-family: 'SourceSansProLight';
  src: url('/font/SourceSansPro-Light.otf') format('opentype'),
}

@font-face {
  font-family: 'Everett-Light';
  src: url('/font/Everett-Light.otf') format('opentype'),
}

@font-face {
  font-family: 'Everett-Regular';
  src: url('/font/Everett-Regular.otf') format('opentype'),
}

@font-face {
  font-family: 'UniversLR';
  src: url('/font/UniversLR.otf') format('opentype'),
}

#intro-video {
  overflow: hidden;
}

#intro-video video {
  will-change: transform, opacity; /* Optimisation des performances */
}

#intro-text {
  transition: transform 0.3s ease;
  transform-origin: left bottom;
}

/* Viewer 360° */
#car-viewer {
  position: relative;
  width: 100%;
  height: 24rem;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

#car-viewer.dragging {
  cursor: grabbing;
}

#car-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.car-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

.car-image.active {
  opacity: 1;
  z-index: 2;
}

.indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: rgb(75 85 99);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background-color: rgb(220 38 38);
  transform: scale(1.2);
}

#car-image-container {
  transform: scale(1.3); /* 30% plus grand */
}

/* ... (conservez vos styles existants) ... */

.car-image {
  @apply absolute top-1/2 left-1/2 w-full h-full object-contain;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

/* Scale réduit pour les images spécifiques */
.car-image[src*="Evoview1.png"].active,
.car-image[src*="Evoview5.png"].active {
  transform: translate(-50%, -50%) scale(0.9); /* 10% plus petit */
}

@keyframes move {
  100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.mask1 {
  -webkit-mask-image: url('w3logo.png');
  mask-image: url('w3logo.png');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

.text-mask {
  font-size: 6rem;
  font-weight: bold;
  background: url('/img/japan.jpg') no-repeat center / cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-mask2 {
  font-size: 6rem;
  font-weight: bold;
  background: url('/img/japan2.jpg') no-repeat center / cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}