/* =============================================================================
   LOGUETOWN — Premium annonce hero (2026)
   Floating main-image hero + reveal-on-scroll for the listing detail page.

   NOTE: the default "Mela Envy" layout (.fp--melaenvy) ALREADY implements a
   floating studio stage (meFloat / meAura / meShadow) + reveals (data-me-reveal).
   This file does NOT touch it. It:
     1. Provides the explicit .reveal-on-scroll / .is-visible API (spec request).
     2. Brings a clean floating hero to the LEGACY .annonce-detail-page layout
        (gallery-grid) which previously had no floating image.
     3. Defines the requested .listing-* class API for reuse.

   Constraints honored: mobile-first ≥360px, no horizontal scroll, CTAs never
   blocked, SEO text untouched, prefers-reduced-motion fully disables motion.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Reveal-on-scroll — explicit class API (.reveal-on-scroll → .is-visible)
      Toggled by js/lt-premium-motion.js (IntersectionObserver).
   ----------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--lt-dur-slow, 420ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1)),
    transform var(--lt-dur-slow, 420ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Optional subtle scale variant */
.reveal-on-scroll--scale { transform: translateY(20px) scale(0.98); }
.reveal-on-scroll--scale.is-visible { transform: translateY(0) scale(1); }

/* Stagger helper (set via data-reveal-delay="1..6") */
.reveal-on-scroll[data-reveal-delay="1"].is-visible { transition-delay: 60ms; }
.reveal-on-scroll[data-reveal-delay="2"].is-visible { transition-delay: 120ms; }
.reveal-on-scroll[data-reveal-delay="3"].is-visible { transition-delay: 180ms; }
.reveal-on-scroll[data-reveal-delay="4"].is-visible { transition-delay: 240ms; }
.reveal-on-scroll[data-reveal-delay="5"].is-visible { transition-delay: 300ms; }
.reveal-on-scroll[data-reveal-delay="6"].is-visible { transition-delay: 360ms; }

/* -----------------------------------------------------------------------------
   2. Floating image hero — requested .listing-* class API
      (reusable; also mapped onto the legacy layout in section 3)
   ----------------------------------------------------------------------------- */
.listing-detail-hero {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .listing-detail-hero { grid-template-columns: 1.05fr 0.95fr; }
}

.listing-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 48vw, 560px);
  isolation: isolate;
  padding: clamp(1rem, 4vw, 2.5rem);
}

/* Soft radial glow / halo behind the image */
.listing-image-glow {
  position: absolute;
  inset: 8% 8% 12%;
  z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%,
      var(--lt-gold-wash, rgba(184,132,26,0.16)) 0%,
      rgba(184,132,26,0.10) 30%,
      transparent 70%);
  filter: blur(16px);
  opacity: 0.9;
  animation: listingGlow 7s ease-in-out infinite;
  pointer-events: none;
}

/* Soft contact shadow under the image */
.listing-image-shadow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: -1;
  width: 58%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(11,13,16,0.28), transparent 72%);
  filter: blur(8px);
  animation: listingShadow 7s ease-in-out infinite;
  pointer-events: none;
}

/* The real backend image — floats gently */
.listing-main-image {
  display: block;
  max-width: min(100%, 460px);
  max-height: 520px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--lt-r-lg, 16px);
  filter: drop-shadow(0 24px 48px rgba(11,13,16,0.22));
  animation: listingFloat 7s ease-in-out infinite;
  transform-origin: center 60%;
  will-change: transform;
}

@keyframes listingFloat {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-16px) rotate(0.4deg); }
}
@keyframes listingGlow {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes listingShadow {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.35; transform: translateX(-50%) scale(0.9); }
}

/* Desktop-only parallax hook (JS adds --parallax; safe fallback to 0) */
@media (min-width: 1024px) and (hover: hover) {
  .listing-main-image { transform: translateY(var(--parallax, 0)); }
}

/* -----------------------------------------------------------------------------
   3. Apply the floating hero to the LEGACY .annonce-detail-page layout
      (the gallery-grid layout that had no floating image).
      We turn the FIRST gallery item into the floating stage, keep the rest as
      a thumbnail-style flow underneath. Everything stays clickable (lightbox).
   ----------------------------------------------------------------------------- */
.annonce-detail-page .annonce-detail-gallery {
  position: relative;
}

/* First image = the hero stage */
.annonce-detail-page .annonce-detail-gallery-item:first-child {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 44vw, 520px);
  padding: clamp(1rem, 4vw, 2.5rem);
  border-radius: var(--lt-r-2xl, 28px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 38%, var(--lt-gold-wash, rgba(184,132,26,0.10)) 0%, transparent 60%),
    var(--lt-color-surface-muted, #f7f5f1);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.08));
}
/* glow behind */
.annonce-detail-page .annonce-detail-gallery-item:first-child::before {
  content: "";
  position: absolute;
  inset: 10% 12% 14%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    var(--lt-gold-wash, rgba(184,132,26,0.18)) 0%,
    rgba(184,132,26,0.10) 32%, transparent 70%);
  filter: blur(20px);
  animation: listingGlow 7s ease-in-out infinite;
  pointer-events: none;
}
/* contact shadow */
.annonce-detail-page .annonce-detail-gallery-item:first-child::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 7%;
  z-index: -1;
  width: 54%; height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(11,13,16,0.26), transparent 72%);
  filter: blur(8px);
  animation: listingShadow 7s ease-in-out infinite;
  pointer-events: none;
}
/* the real image floats */
.annonce-detail-page .annonce-detail-gallery-item:first-child .annonce-detail-gallery-img {
  max-width: min(100%, 440px);
  max-height: 480px;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--lt-r-lg, 16px);
  filter: drop-shadow(0 24px 48px rgba(11,13,16,0.22));
  animation: listingFloat 7s ease-in-out infinite;
  will-change: transform;
}

/* Remaining images become a tidy thumbnail row below the hero */
.annonce-detail-page .annonce-detail-gallery-item:not(:first-child) {
  display: inline-flex;
  width: clamp(72px, 18vw, 104px);
  aspect-ratio: 1;
  margin: var(--lt-s-2, 0.5rem) var(--lt-s-2, 0.5rem) 0 0;
  border-radius: var(--lt-r-md, 12px);
  overflow: hidden;
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.08));
  background: var(--lt-color-surface-muted, #f7f5f1);
  cursor: pointer;
  transition: transform var(--lt-dur-base,240ms) var(--lt-ease-out,cubic-bezier(.22,1,.36,1)),
              box-shadow var(--lt-dur-base,240ms) var(--lt-ease-out,cubic-bezier(.22,1,.36,1));
}
.annonce-detail-page .annonce-detail-gallery-item:not(:first-child):hover {
  transform: translateY(-2px);
  box-shadow: var(--lt-elev-2, 0 4px 12px rgba(11,13,16,0.06));
}
.annonce-detail-page .annonce-detail-gallery-item:not(:first-child) .annonce-detail-gallery-img {
  width: 100%; height: 100%; object-fit: cover;
  animation: none;
}

/* Info blocks reveal-on-scroll: applied via markup classes in annonce.php.
   Provide a comfortable premium spacing for the legacy info card. */
.annonce-detail-page .annonce-detail-info-card,
.annonce-detail-page .annonce-detail-description,
.annonce-detail-page .annonce-detail-localisation-section,
.annonce-detail-page .annonce-detail-seller-card {
  /* visual polish already provided by lt-premium-pages.css; nothing destructive here */
}

/* -----------------------------------------------------------------------------
   4. Sticky mobile CTA bar (legacy layout) — keeps purchase action reachable.
      Only shows ≤768px so it never competes with the desktop sidebar.
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .annonce-detail-page .annonce-detail-actions {
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin-inline: calc(-1 * var(--lt-s-4, 1rem));
    padding: var(--lt-s-3, 0.75rem) var(--lt-s-4, 1rem)
             calc(var(--lt-s-3, 0.75rem) + env(safe-area-inset-bottom, 0px));
    background: var(--lt-header-bg-scrolled, rgba(255,255,255,0.92));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--lt-color-border, rgba(11,13,16,0.08));
    display: flex; gap: var(--lt-s-2, 0.5rem);
  }
  .annonce-detail-page .annonce-detail-actions .annonce-detail-btn {
    flex: 1;
    min-height: 48px;       /* ≥44px touch target */
  }
  /* Hint text is non-essential on the sticky bar — keep it out of the bar */
  .annonce-detail-page .annonce-detail-actions-hint { display: none; }
  /* Larger float amplitude is heavier on mobile → calm it down */
  .annonce-detail-page .annonce-detail-gallery-item:first-child .annonce-detail-gallery-img,
  .listing-main-image { animation-duration: 8s; }
}

/* 360px safety — never overflow, keep the hero contained */
@media (max-width: 380px) {
  .annonce-detail-page .annonce-detail-gallery-item:first-child {
    min-height: 280px;
    padding: var(--lt-s-4, 1rem);
  }
  .annonce-detail-page .annonce-detail-gallery-item:first-child .annonce-detail-gallery-img,
  .listing-main-image { max-height: 360px; }
}

/* -----------------------------------------------------------------------------
   5. prefers-reduced-motion — fully disable all motion, keep static premium look
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
  .listing-main-image,
  .listing-image-glow,
  .listing-image-shadow,
  .annonce-detail-page .annonce-detail-gallery-item:first-child .annonce-detail-gallery-img,
  .annonce-detail-page .annonce-detail-gallery-item:first-child::before,
  .annonce-detail-page .annonce-detail-gallery-item:first-child::after {
    animation: none !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------------
   6. Dark / Grand-Line theme — soften shadows, gold glow stays
   ----------------------------------------------------------------------------- */
[data-theme="dark"] .annonce-detail-page .annonce-detail-gallery-item:first-child,
body.lt-accueil-gl .annonce-detail-page .annonce-detail-gallery-item:first-child,
body.lt-acheter-gl .annonce-detail-page .annonce-detail-gallery-item:first-child {
  background:
    radial-gradient(circle at 50% 38%, rgba(212,160,23,0.14) 0%, transparent 60%),
    var(--lt-color-surface, #0e1a2e);
  border-color: rgba(240,236,226,0.08);
}
[data-theme="dark"] .listing-main-image,
[data-theme="dark"] .annonce-detail-page .annonce-detail-gallery-item:first-child .annonce-detail-gallery-img {
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.5));
}