:root {
  /* ===== Canvas Dimensions (d'après Figma) ===== */
  
  /* Constellation : dimensions actuelles (lignes 677-678) */
  --canvas-constellation-width: 1920;
  --canvas-constellation-height: 1072;
  
  /* Envelope Opening : ratio 6928/4784 pour matcher frame_0001 (swap seamless) */
  --canvas-envelope-width: 1732;
  --canvas-envelope-height: 1196;
  
  /* Box Reveal : à définir d'après vos séquences d'images */
  --canvas-box-width: 1920;
  --canvas-box-height: 1080;
  
  /* Cards Float : ratio ezgif-frame-001.jpg (référence position) — agrandi x2 */
  --canvas-cards-width: 3944;
  --canvas-cards-height: 2096;

  /* Morph stack lettres → boite (1820×1136 HD) */
  --canvas-morph-width: 1820;
  --canvas-morph-height: 1136;

  /* Image finale (boîte + cartes) : ajuster pour matcher la vidéo */
  --final-image-max-width: 780px;

  /* Cards touching overlay (frame 153) — réglage manuel position/échelle */
  --cards-touching-scale: 0.4;
  --cards-touching-translate-x: -93px;
  --cards-touching-translate-y: -130px;
  --cards-touching-object-position-x: 50%;
  --cards-touching-object-position-y: 50%;

  /* ===== Deep Black Aesthetic ===== */
  --color-deep-black: #000000;
  --color-dark-bg: #0D0D0E;      /* Actuel, garder pour compatibilité */
  --color-gold: #C5A059;
  --color-gold-light: #FFD76B;
  --color-blue: #5A8EDB;
  
  /* ===== Performance Hints ===== */
  --canvas-will-change: transform, opacity;
}

/* Appliquer will-change sur tous les canvas pour 60fps */
canvas {
  will-change: var(--canvas-will-change);
  background-color: var(--color-deep-black); /* Éviter flash blanc pendant chargement */
}