/* 120 — Image Reveal
   Carte image : au survol (ou :focus-visible), un rideau accent se retire en
   diagonale, suivi d'un volet surface avec un léger retard — l'image apparaît
   derrière avec un zoom lent continu, la caption glisse depuis le bas et un
   liseré accent se dessine autour du cadre. CSS pur. */

.image-reveal {
  --imgrev-radius: 16px;
  --imgrev-zoom: 1.06;
  position: relative;
  display: block;
  width: min(300px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: var(--imgrev-radius);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  background: var(--ml-surface, #151a24);
  box-shadow: 0 18px 40px -18px rgba(4, 7, 16, 0.8);
}

.image-reveal:focus-visible {
  box-shadow:
    0 0 0 2px var(--ml-bg, #0d1017),
    0 0 0 4px var(--ml-accent, #7c8cff),
    0 18px 40px -18px rgba(4, 7, 16, 0.8);
}

/* — Visuel (SVG de démo, remplaçable par <img> — voir README) — */
.image-reveal__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scale(1);
  transform-origin: 52% 42%;
  transition: transform 0.9s cubic-bezier(0.33, 0, 0.2, 1);
  will-change: transform;
}

.image-reveal__media > svg,
.image-reveal__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-reveal:hover .image-reveal__media,
.image-reveal:focus-visible .image-reveal__media {
  transform: scale(var(--imgrev-zoom, 1.06));
  /* zoom lent continu : longue durée, ease très amorti */
  transition-duration: 5s;
  transition-timing-function: cubic-bezier(0.12, 0.55, 0.24, 1);
}

/* — Double rideau diagonal —
   Triangle qui couvre tout le cadre au repos (hypoténuse au-delà du coin
   bas-droit) et se replie vers le coin haut-gauche à la révélation. */
.image-reveal__veil {
  position: absolute;
  inset: -1px;
  clip-path: polygon(0 0, 225% 0, 0 225%);
  transition: clip-path 0.65s cubic-bezier(0.72, 0, 0.22, 1);
}

.image-reveal__veil--surface {
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(124, 140, 255, 0.14), rgba(45, 212, 191, 0.05) 55%, rgba(124, 140, 255, 0.02)),
    var(--ml-surface, #151a24);
  /* au retour (repos), le volet surface recouvre l'image en premier */
  transition-delay: 0s;
}

.image-reveal__veil--accent {
  z-index: 3;
  background:
    repeating-linear-gradient(135deg, rgba(13, 16, 23, 0.07) 0 10px, rgba(13, 16, 23, 0) 10px 20px),
    linear-gradient(135deg, var(--ml-accent, #7c8cff), var(--ml-accent-2, #2dd4bf));
  transition-delay: 0.08s;
}

/* Le volet accent part en premier, le volet surface suit avec un retard */
.image-reveal:hover .image-reveal__veil--accent,
.image-reveal:focus-visible .image-reveal__veil--accent {
  clip-path: polygon(0 0, 0 0, 0 0);
  transition-delay: 0s;
}

.image-reveal:hover .image-reveal__veil--surface,
.image-reveal:focus-visible .image-reveal__veil--surface {
  clip-path: polygon(0 0, 0 0, 0 0);
  transition-delay: 0.14s;
}

/* Invitation affichée sur le rideau accent (clippée avec lui) */
.image-reveal__hint {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(13, 16, 23, 0.82);
}

/* — Liseré accent qui se dessine (rect SVG, pathLength=1) — */
.image-reveal__edge {
  position: absolute;
  inset: 5px;
  z-index: 4;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  pointer-events: none;
  overflow: visible;
}

.image-reveal__edge-line {
  stroke: var(--ml-accent, #7c8cff);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0s,
    opacity 0.2s linear 0s;
}

.image-reveal:hover .image-reveal__edge-line,
.image-reveal:focus-visible .image-reveal__edge-line {
  stroke-dashoffset: 0;
  opacity: 1;
  transition-delay: 0.18s, 0.18s;
}

/* — Caption : glisse depuis le bas avec fade — */
.image-reveal__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 36px 16px 14px;
  background: linear-gradient(180deg, rgba(10, 13, 20, 0), rgba(10, 13, 20, 0.88));
  transform: translateY(16px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0s,
    opacity 0.45s ease 0s;
}

.image-reveal:hover .image-reveal__caption,
.image-reveal:focus-visible .image-reveal__caption {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.22s, 0.22s;
}

.image-reveal__title {
  display: block;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ml-fg, #e8eaf2);
}

.image-reveal__meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ml-muted, #8b91a3);
}

/* — Reduced motion : image révélée en permanence, aucun mouvement — */
@media (prefers-reduced-motion: reduce) {
  .image-reveal__media,
  .image-reveal__veil,
  .image-reveal__caption,
  .image-reveal__edge-line {
    transition: none;
  }

  .image-reveal__media {
    transform: none;
  }

  .image-reveal__veil {
    clip-path: polygon(0 0, 0 0, 0 0);
  }

  .image-reveal__caption {
    transform: none;
    opacity: 1;
  }

  .image-reveal__edge-line {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}