/* ==========================================================================
   Section démo landing — VIDÉO réelle du produit dans mockups CSS
   (feat/da-demo-video, v2 de feat/da-hero-demo : le crossfade de captures
   statiques cède la place à des <video> de sessions réelles).

   - Frames téléphone (générique, toggle Android poinçon / iPhone îlot)
     et laptop en CSS pur, ombres chaudes Carnet.
   - Perspective 3D subtile sur la scène, tilt anime.js (demo-vitrine.js).
   - Écrans : <video class="aa-demo-screen-video"> lazy (demo-vitrine.js),
     posters = captures réelles ; légendes/dots synchronisés sur currentTime.
   - CLS ~0 : aspect-ratio sur frames, width/height sur <img>.
   - prefers-reduced-motion : transitions coupées, premier écran statique.
   Scope : body.aa-landing uniquement (chargé par landing/index.html seul).
   ========================================================================== */

body.aa-landing .aa-demo-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 24px 88px;
  text-align: center;
}

body.aa-landing .aa-demo-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 12px;
}

body.aa-landing .aa-demo-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 48px;
}

/* --------------------------------------------------------------------------
   Stage + scène 3D
   -------------------------------------------------------------------------- */
body.aa-landing .aa-demo-stage {
  position: relative;
}

body.aa-landing .aa-demo-scene {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 1400px;
  /* Réserve la hauteur : phone 300px de large → écran 300×(844/390)≈649px
     + chrome frame. min-height fige le layout avant chargement des PNG. */
  min-height: 560px;
}

/* ----- Laptop (derrière, à droite) ----- */
body.aa-landing .aa-demo-laptop {
  width: min(620px, 58vw);
  margin: 0 0 24px -8%;
  transform: rotateY(-7deg) rotateX(1.5deg);
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-out, ease), filter 700ms ease, opacity 700ms ease;
  opacity: 0.94;
  filter: saturate(0.96);
}

body.aa-landing .aa-demo-laptop__lid {
  position: relative;
  background: linear-gradient(160deg, #3a3631, #211f1c);
  border-radius: 18px 18px 6px 6px;
  padding: 14px 14px 16px;
  box-shadow:
    0 24px 48px -18px rgba(60, 48, 30, 0.45),
    0 6px 16px -8px rgba(60, 48, 30, 0.30);
}

body.aa-landing .aa-demo-laptop__cam {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #0c0b0a;
  box-shadow: inset 0 0 2px rgba(140, 160, 190, 0.6);
}

body.aa-landing .aa-demo-laptop__screen {
  border-radius: 8px;
  overflow: hidden;
  background: #f4ead8;
  aspect-ratio: 2000 / 1250;
}

body.aa-landing .aa-demo-laptop__screen video,
body.aa-landing .aa-demo-laptop__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.aa-landing .aa-demo-laptop-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 12px 0 10px;
  text-align: center;
}

body.aa-landing .aa-demo-laptop__base {
  height: 14px;
  margin: 0 -5%;
  background: linear-gradient(180deg, #46423c, #28251f 70%, #1b1916);
  border-radius: 2px 2px 12px 12px;
  box-shadow: 0 18px 30px -12px rgba(60, 48, 30, 0.5);
}
/* Encoche d'ouverture au centre de la base */
body.aa-landing .aa-demo-laptop__base::before {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 0 auto;
  background: #15130f;
  border-radius: 0 0 8px 8px;
}

/* ----- Téléphone (devant, à gauche) ----- */
body.aa-landing .aa-demo-phone {
  position: relative;
  width: min(280px, 64vw);
  margin: 0 0 -10px -10%;
  transform: rotateY(8deg) rotateX(0.5deg);
  transform-style: preserve-3d;
  z-index: 2;
  background: linear-gradient(155deg, #36322c 0%, #15130f 55%, #2b2823 100%);
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    0 30px 60px -20px rgba(60, 48, 30, 0.55),
    0 10px 24px -10px rgba(60, 48, 30, 0.35),
    inset 0 0 0 2px rgba(255, 248, 235, 0.06);
  transition: transform 700ms var(--ease-out, ease), border-radius 300ms ease;
}

body.aa-landing .aa-demo-phone__screen {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: #f4ead8;
  aspect-ratio: 390 / 844;
  transition: border-radius 300ms ease;
}

/* Bande « status bar » éteinte en haut de l'écran : loge le poinçon /
   l'îlot SANS recouvrir le header de l'app (les captures Playwright
   n'embarquent pas de status bar OS). */
body.aa-landing .aa-demo-phone__screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: #0e0d0b;
  z-index: 2;
}

body.aa-landing .aa-demo-phone__screen .aa-demo-screen-video {
  position: absolute;
  top: 26px;
  left: 0;
  width: 100%;
  height: calc(100% - 26px);
  object-fit: cover;
  object-position: top;
}

/* Chrome générique : poinçon (Android) vs îlot (iPhone). */
body.aa-landing .aa-demo-phone__cam,
body.aa-landing .aa-demo-phone__island {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 3;
  background: #0c0b0a;
  box-shadow: inset 0 0 3px rgba(140, 160, 190, 0.5);
  transition: opacity 250ms ease, transform 250ms ease;
}
body.aa-landing .aa-demo-phone__cam {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  top: 18px;
  border-radius: 50%;
}
body.aa-landing .aa-demo-phone__island {
  width: 72px;
  height: 18px;
  margin-left: -36px;
  top: 14px;
  border-radius: 11px;
}

body.aa-landing .aa-demo-phone[data-frame="android"] .aa-demo-phone__island { opacity: 0; transform: scale(0.6); }
body.aa-landing .aa-demo-phone[data-frame="android"] .aa-demo-phone__cam { opacity: 1; transform: none; }
body.aa-landing .aa-demo-phone[data-frame="iphone"] .aa-demo-phone__cam { opacity: 0; transform: scale(0.4); }
body.aa-landing .aa-demo-phone[data-frame="iphone"] .aa-demo-phone__island { opacity: 1; transform: none; }
/* iPhone : coins un peu plus serrés, Android un peu plus ouverts. */
body.aa-landing .aa-demo-phone[data-frame="iphone"] { border-radius: 50px; }
body.aa-landing .aa-demo-phone[data-frame="iphone"] .aa-demo-phone__screen { border-radius: 40px; }

/* Boutons physiques en silhouette (génériques). */
body.aa-landing .aa-demo-phone__btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #0e0d0b;
}
body.aa-landing .aa-demo-phone__btn--power { right: -3px; top: 26%; height: 64px; }
body.aa-landing .aa-demo-phone__btn--vol { left: -3px; top: 22%; height: 92px; }

/* --------------------------------------------------------------------------
   Légendes (serif Carnet) + dots + toggle frame
   -------------------------------------------------------------------------- */
body.aa-landing .aa-demo-captions {
  position: relative;
  min-height: 56px;
  margin-top: 36px;
}

body.aa-landing .aa-demo-caption {
  position: absolute;
  inset: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.4;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms ease, transform 450ms var(--ease-out, ease);
}
body.aa-landing .aa-demo-caption.is-active {
  opacity: 1;
  transform: translateY(0);
}

body.aa-landing .aa-demo-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
body.aa-landing .aa-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 250ms ease, transform 250ms ease;
}
body.aa-landing .aa-demo-dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

body.aa-landing .aa-demo-frame-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 22px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
}
body.aa-landing .aa-demo-frame-btn {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 16px;
  min-height: 32px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast, 140ms) ease, color var(--dur-fast, 140ms) ease;
}
body.aa-landing .aa-demo-frame-btn.is-active {
  background: var(--accent);
  color: var(--fill-on, #fff);
}
body.aa-landing .aa-demo-frame-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body.aa-landing .aa-demo-cta-line {
  margin-top: 44px;
}

/* --------------------------------------------------------------------------
   Mobile : phone seul en vedette, laptop replié dessous (plus petit).
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.aa-landing .aa-demo-scene {
    flex-direction: column;
    align-items: center;
    min-height: 0;
  }
  body.aa-landing .aa-demo-phone {
    margin: 0;
    width: min(280px, 72vw);
    transform: rotateY(0deg);
  }
  body.aa-landing .aa-demo-laptop {
    order: 2;
    width: min(440px, 92vw);
    margin: 28px 0 0;
    transform: rotateY(0deg);
  }
  body.aa-landing .aa-demo-captions { min-height: 72px; }
}

/* --------------------------------------------------------------------------
   Sombre : les captures restent le produit en mode clair (choix assumé,
   « papier » du Carnet) — on détache les frames du fond ardoise.
   -------------------------------------------------------------------------- */
[data-theme="dark"] body.aa-landing .aa-demo-phone,
[data-theme="dark"] body.aa-landing .aa-demo-laptop__lid {
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(244, 234, 216, 0.10);
}

/* --------------------------------------------------------------------------
   Reduced motion : tout statique, premier écran affiché.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.aa-landing .aa-demo-caption,
  body.aa-landing .aa-demo-phone,
  body.aa-landing .aa-demo-laptop,
  body.aa-landing .aa-demo-dot {
    transition: none;
  }
}