/* ============================================================================
   HERO PREMIUM — couches, motion & hotspots. Chargé APRÈS premium.css (gagne la cascade).
   PRINCIPE PERF/A11Y : par défaut le hero est STATIQUE et lisible (contenu visible, aucune
   dépendance JS, CLS 0). Le mouvement est un enrichissement gated par la classe .ag-hero--motion,
   posée par premium-hero.js UNIQUEMENT si prefers-reduced-motion = no-preference. Donc :
   reduced-motion OU JS absent = rendu statique propre, sans à-coup ni décalage.
   Motion = transform/opacity uniquement (GPU, zéro reflow, zéro CLS).
   ============================================================================ */

/* Le fond passe des slides aux couches dédiées .ag-hero__bg (permet Ken Burns + parallaxe). */
.ag-hero__slide--1, .ag-hero__slide--2, .ag-hero__slide--3 { background-image: none; }
.ag-hero__slide { overflow: hidden; }

.ag-hero__bg { position: absolute; inset: -5%; z-index: 0; pointer-events: none; will-change: transform; }
.ag-hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: cover; background-position: center right;
  transform: scale(1.06); transform-origin: 60% 50%;
}
.ag-hero__bg--1::before { background-image: url('../img/hero-1.jpg'); background-image: image-set(url('../img/hero-1.webp') type('image/webp'), url('../img/hero-1.jpg') type('image/jpeg')); }
.ag-hero__bg--2::before { background-image: url('../img/hero-2.jpg'); background-image: image-set(url('../img/hero-2.webp') type('image/webp'), url('../img/hero-2.jpg') type('image/jpeg')); }
.ag-hero__bg--3::before { background-image: url('../img/hero-3.jpg'); background-image: image-set(url('../img/hero-3.webp') type('image/webp'), url('../img/hero-3.jpg') type('image/jpeg')); }

/* Mode fond VIDÉO : la vidéo (poster LCP + lazy) remplace les images de fond des slides. */
.ag-hero--video .ag-hero__bg { display: none; }

/* Scrim (dégradé de lisibilité) — séparé du fond pour laisser le fond bouger dessous. */
.ag-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,8,11,.95) 0%, rgba(8,8,11,.8) 30%, rgba(8,8,11,.38) 55%, rgba(8,8,11,.05) 80%, transparent 100%); }
.ag-hero__slide--2 .ag-hero__scrim { background: linear-gradient(90deg, rgba(8,8,11,.05), rgba(8,8,11,.4) 45%, rgba(8,8,11,.82) 72%, rgba(8,8,11,.95)); }
.ag-hero__slide--2 .ag-hero__inner { margin-left: auto; text-align: right; }
.ag-hero__slide--2 .ag-hero__subtitle { margin-left: auto; }
.ag-hero__glow { z-index: 1; }
.ag-hero__fg { position: absolute; z-index: 2; right: 4%; bottom: 0; max-height: 96%; max-width: 46%; object-fit: contain; pointer-events: none; will-change: transform; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.ag-hero__inner { z-index: 3; }

/* ---------- Révélation du contenu (staggered) — défaut : visible & statique ---------- */
.ag-rev { opacity: 1; transform: none; }

/* ---------- HOTSPOTS SHOPPABLES ---------- */
.ag-hero__spots { position: absolute; inset: 0; z-index: 4; }
.ag-hero__spot { position: absolute; transform: translate(-50%, -50%); }
.ag-hero__spotdot { width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); color: #fff;
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px); box-shadow: 0 0 0 6px rgba(230, 57, 70,.14); transition: transform .2s, background .2s, box-shadow .2s; }
.ag-hero__spotdot:hover, .ag-hero__spotdot:focus-visible { background: var(--ag-gold); color: #0a0a0c; border-color: var(--ag-gold); box-shadow: 0 0 0 8px rgba(230, 57, 70,.22); outline: none; }
.ag-hero__spotdot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ag-hero__spotcard { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%) translateY(6px);
  width: 232px; background: rgba(16,16,21,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 10px; display: flex; gap: 10px; align-items: center; opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s; z-index: 5; box-shadow: 0 20px 40px rgba(0,0,0,.5); text-align: left; }
.ag-hero__spot.is-open .ag-hero__spotcard, .ag-hero__spot:hover .ag-hero__spotcard { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ag-hero__spotimg { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 6px; background-size: cover; background-position: center; background-color: #191921; }
.ag-hero__spottx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-hero__spotname { color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.2; }
.ag-hero__spotprice { color: var(--ag-gold); font-size: .82rem; font-weight: 700; }
.ag-hero__spotlink { align-self: flex-start; margin-top: 3px; background: var(--ag-gold); color: #0a0a0c !important;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 3px; }
.ag-hero__spotlink:hover { background: #fff; color: #0a0a0c !important; }
/* carte débordant à droite : recadrer */
.ag-hero__spot[style*="left:8"] .ag-hero__spotcard, .ag-hero__spot[style*="left:9"] .ag-hero__spotcard { left: auto; right: 0; transform: translateY(6px); }
.ag-hero__spot[style*="left:8"].is-open .ag-hero__spotcard, .ag-hero__spot[style*="left:9"].is-open .ag-hero__spotcard { transform: translateY(0); }

/* ============================================================================
   MOTION — activé UNIQUEMENT via .ag-hero--motion (posé par JS si motion autorisée).
   ============================================================================ */
.ag-hero--motion .ag-hero__bg::before { animation: agKen 12s ease-in-out infinite alternate; }
.ag-hero--motion .ag-hero__slide:not(.is-active) .ag-hero__bg::before { animation-play-state: paused; }
@keyframes agKen {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2%, -1.5%, 0); }
}

/* Parallaxe (profondeur) : chaque couche suit --mx/--my (pointeur) avec un facteur différent. */
.ag-hero--motion .ag-hero__bg    { transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0); }
.ag-hero--motion .ag-hero__glow  { transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 20px), 0); }
.ag-hero--motion .ag-hero__fg    { transform: translate3d(calc(var(--mx, 0) * 34px), calc(var(--my, 0) * 14px), 0); }
.ag-hero--motion .ag-hero__inner { transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0); transition: transform .15s ease-out; }

/* Lumière or qui balaie lentement le hero (accent premium). */
.ag-hero--motion .ag-hero__glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--ag-gold) 30%, transparent), transparent 62%);
  animation: agGold 7s ease-in-out infinite alternate; opacity: .8;
}
@keyframes agGold { from { transform: translate(-6%, 4%) scale(.9); opacity: .55; } to { transform: translate(8%, -4%) scale(1.12); opacity: .9; } }

/* Révélation staggered du contenu du slide actif (transform/opacity → zéro CLS). */
.ag-hero--motion .ag-hero__slide .ag-rev { opacity: 0; transform: translateY(20px); }
.ag-hero--motion .ag-hero__slide .ag-hero__accent.ag-rev { transform: translateY(20px); filter: blur(6px); }
.ag-hero--motion .ag-hero__slide.is-active .ag-rev { animation: agReveal .85s cubic-bezier(.16,1,.3,1) forwards; }
.ag-hero--motion .ag-hero__slide.is-active .ag-hero__accent.ag-rev { animation: agRevealAccent 1s cubic-bezier(.16,1,.3,1) forwards; }
.ag-hero--motion .ag-hero__slide.is-active .ag-hero__eyebrow { animation-delay: .05s; }
.ag-hero--motion .ag-hero__slide.is-active .ag-hero__tl:not(.ag-hero__accent) { animation-delay: .16s; }
.ag-hero--motion .ag-hero__slide.is-active .ag-hero__accent { animation-delay: .34s; }
.ag-hero--motion .ag-hero__slide.is-active .ag-hero__subtitle { animation-delay: .5s; }
.ag-hero--motion .ag-hero__slide.is-active .ag-hero__cta { animation-delay: .64s; }
/* mots découpés par JS (révélation typographique fine) */
.ag-hero--motion .ag-hero__word { display: inline-block; opacity: 0; transform: translateY(.5em); }
.ag-hero--motion .ag-hero__slide.is-active .ag-hero__word { animation: agReveal .7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes agReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes agRevealAccent { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* Neutralise l'ancien fondu (premium.css) : la révélation est pilotée ici. */
.ag-hero__slide.is-active .ag-hero__eyebrow, .ag-hero__slide.is-active .ag-hero__title,
.ag-hero__slide.is-active .ag-hero__subtitle, .ag-hero__slide.is-active .ag-hero__cta { animation: none; opacity: 1; }

/* Garde-fou : même si la classe motion venait à manquer, respecter l'OS. */
@media (prefers-reduced-motion: reduce) {
  .ag-hero__bg::before, .ag-hero__glow::after, .ag-rev, .ag-hero__word { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

@media (max-width: 767px) {
  /* Hotspots : masqués sur mobile (positions % pensées desktop chevaucheraient le texte). */
  .ag-hero__spots { display: none; }
  .ag-hero__fg { max-width: 60%; opacity: .5; }
  .ag-hero__slide--2 .ag-hero__inner { text-align: left; margin-left: 0; }
  .ag-hero__slide--2 .ag-hero__scrim { background: linear-gradient(90deg, rgba(8,8,11,.95), rgba(8,8,11,.8) 30%, rgba(8,8,11,.4) 60%, transparent); }
  .ag-hero__spotcard { width: 200px; }
}