/*
 * VTC Booking Pro — Image Effects CSS
 * Effets premium pour Elementor et PHP templates
 * ============================================================ */

/* ============================================================
   WRAPPER DE BASE
   ============================================================ */
.vtc-img-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
}

.vtc-img-wrap img,
.vtc-img-wrap .elementor-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.7s ease,
              opacity 0.7s ease;
}

/* ============================================================
   1. CADRE DORÉ — vtc-gold-frame
   ============================================================ */
.vtc-gold-frame {
  border-radius: 4px;
}

.vtc-gold-frame::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 168, 76, 0.6);
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
  transition: inset 0.4s ease, border-color 0.4s ease;
}

.vtc-gold-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(201,168,76,0.15) 0%,
    transparent 40%,
    transparent 60%,
    rgba(201,168,76,0.08) 100%
  );
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.vtc-gold-frame:hover::before {
  inset: 6px;
  border-color: rgba(201, 168, 76, 0.9);
}

.vtc-gold-frame:hover img {
  transform: scale(1.04);
}

/* Coin décoratif doré */
.vtc-gold-frame .vtc-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 3;
  pointer-events: none;
}
.vtc-gold-frame .vtc-corner::before,
.vtc-gold-frame .vtc-corner::after {
  content: '';
  position: absolute;
  background: #c9a84c;
}
.vtc-gold-frame .vtc-corner::before { width: 2px; height: 100%; }
.vtc-gold-frame .vtc-corner::after  { width: 100%; height: 2px; }

.vtc-gold-frame .vtc-corner.tl { top: 6px; left: 6px; }
.vtc-gold-frame .vtc-corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.vtc-gold-frame .vtc-corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.vtc-gold-frame .vtc-corner.br { bottom: 6px; right: 6px; transform: scale(-1); }

/* ============================================================
   2. RÉVÉLATION SLIDE — vtc-reveal
   ============================================================ */
.vtc-reveal {
  clip-path: inset(0 100% 0 0);
  animation: vtc-slide-reveal 1.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes vtc-slide-reveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

.vtc-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #c9a84c, #e8c97a);
  z-index: 2;
  animation: vtc-reveal-curtain 1.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  pointer-events: none;
}

@keyframes vtc-reveal-curtain {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(110%); }
}

/* ============================================================
   3. PARALLAX SUBTIL — vtc-parallax
   ============================================================ */
.vtc-parallax {
  overflow: hidden;
}

.vtc-parallax img {
  transform: scale(1.12) translateY(0px);
  will-change: transform;
}

/* JS gère translateY via data-parallax-offset */

/* ============================================================
   4. REFLET LUMINEUX (GLINT) — vtc-glint
   ============================================================ */
.vtc-glint::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.25) 50%,
    transparent 70%
  );
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
  transition: none;
}

.vtc-glint:hover::after {
  animation: vtc-glint-sweep 0.7s ease forwards;
}

@keyframes vtc-glint-sweep {
  0%   { left: -75%; }
  100% { left: 125%; }
}

.vtc-glint:hover img {
  transform: scale(1.03);
}

/* ============================================================
   5. ZOOM LUXE — vtc-zoom-luxury
   ============================================================ */
.vtc-zoom-luxury {
  border-radius: 4px;
}

.vtc-zoom-luxury::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0) 0%, rgba(0,0,0,0.4) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.vtc-zoom-luxury:hover::before {
  opacity: 1;
}

.vtc-zoom-luxury:hover img {
  transform: scale(1.08);
}

.vtc-zoom-luxury .vtc-zoom-label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 2;
  background: rgba(201,168,76,0.9);
  color: #0a0c10;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 2px;
  opacity: 0;
  transition: all 0.4s ease;
  white-space: nowrap;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}

.vtc-zoom-luxury:hover .vtc-zoom-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   6. DUOTONE OR/NOIR — vtc-duotone
   ============================================================ */
.vtc-duotone img {
  filter: grayscale(80%) sepia(40%) hue-rotate(5deg) saturate(150%) brightness(0.9);
  transition: filter 0.6s ease, transform 0.6s ease;
}

.vtc-duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(10,12,16,0.3));
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.vtc-duotone:hover img {
  filter: grayscale(0%) sepia(0%) saturate(100%) brightness(1);
  transform: scale(1.03);
}

.vtc-duotone:hover::after {
  opacity: 0;
}

/* ============================================================
   7. INCLINAISON 3D — vtc-tilt
   ============================================================ */
.vtc-tilt {
  transform-style: preserve-3d;
  perspective: 1000px;
  border-radius: 8px;
  will-change: transform;
}

.vtc-tilt img {
  border-radius: 8px;
}

/* JS gère rotateX/rotateY dynamiquement */

.vtc-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%);
  z-index: 2;
  pointer-events: none;
  border-radius: 8px;
  transition: background 0.1s;
}

/* ============================================================
   8. BLUR → NETTETÉ — vtc-blur-reveal
   ============================================================ */
.vtc-blur-reveal img {
  filter: blur(8px) brightness(0.7);
  transform: scale(1.05);
  opacity: 0;
}

.vtc-blur-reveal.vtc-in-view img {
  animation: vtc-blur-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes vtc-blur-in {
  0%   { filter: blur(8px) brightness(0.7); transform: scale(1.05); opacity: 0; }
  60%  { opacity: 1; }
  100% { filter: blur(0px) brightness(1);   transform: scale(1);    opacity: 1; }
}

/* ============================================================
   OVERLAY CAPTION DORÉ (optionnel, ajouté via JS)
   ============================================================ */
.vtc-img-wrap .vtc-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(10,12,16,0.85));
  color: #c9a84c;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 28px 16px 14px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 3;
  pointer-events: none;
}

.vtc-img-wrap:hover .vtc-caption {
  transform: translateY(0);
}

/* ============================================================
   CLASSE UTILITAIRE: appliquer aux images normales en PHP
   ============================================================ */

/* Sur toutes les images dans le contenu Elementor/PHP */
.elementor-widget-image .vtc-gold-frame,
.elementor-widget-image .vtc-glint,
.elementor-widget-image .vtc-zoom-luxury,
.elementor-widget-image .vtc-duotone,
.elementor-widget-image .vtc-tilt {
  display: block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .vtc-gold-frame::before { inset: 8px; }
  .vtc-tilt { perspective: 600px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vtc-img-wrap img,
  .vtc-img-wrap::before,
  .vtc-img-wrap::after,
  .vtc-reveal,
  .vtc-blur-reveal img {
    animation: none !important;
    transition: none !important;
  }
}