html, body { margin: 0; background: var(--color-white); overflow-x: clip; }
  .ds-caption, .ds-body, .ds-subtitle, [class*="button"], [class*="btn"], button { letter-spacing: 0.04em !important; }
  :root { --accent-turquoise: #ba36b4; }
  a { -webkit-tap-highlight-color: transparent; }
  ::selection { background: var(--accent-emerald); color: var(--color-black); }

  /* ---- scroll-reveal animation system --------------------------------- */
  [data-anim] {
    opacity: 0;
    transition:
      opacity .72s cubic-bezier(.16,1,.3,1),
      transform .82s cubic-bezier(.16,1,.3,1),
      clip-path .9s cubic-bezier(.16,1,.3,1),
      filter .72s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--anim-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-anim="up"]     { transform: translateY(44px); }
  [data-anim="left"]   { transform: translateX(-56px); }
  [data-anim="right"]  { transform: translateX(56px); }
  [data-anim="scale"]  { transform: scale(.92); }
  [data-anim="blur"]   { transform: translateY(24px); filter: blur(10px); }

  /* image "clip" reveal — clip the INNER media, never the observed box
     (a clip-path on the observed element zeroes its IntersectionObserver ratio) */
  [data-anim="clip"] > * {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.06);
    transition: clip-path .95s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--anim-delay, 0ms);
    will-change: clip-path, transform;
  }
  [data-anim="clip"][data-in] > * {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }

  [data-anim][data-in] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* ---- hero floating cube --------------------------------------------- */
  #hero-cube-3d { width: 100%; aspect-ratio: 1 / 1; display: block; animation: heroFloat 6s ease-in-out infinite; animation-delay: 1s; will-change: transform; }
  #hero-cube-3d canvas { width: 100% !important; height: 100% !important; display: block; }
  .hero-cube-img {
    animation: heroFloat 6s ease-in-out infinite;
    animation-delay: 1s;
    will-change: transform;
  }
  .hero-cube-shadow {
    position: absolute;
    left: 50%;
    bottom: 9%;
    width: 50%;
    height: 8%;
    transform: translateX(-50%) scaleX(1);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 72%);
    filter: blur(7px);
    border-radius: 50%;
    animation: heroShadow 6s ease-in-out infinite;
    animation-delay: 1s;
    will-change: transform, opacity;
  }
  @keyframes swapIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
  }
  @keyframes heroShadow {
    0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 1; }
    50%      { transform: translateX(-50%) scaleX(0.78); opacity: 0.5; }
  }

  /* texte en graisse light -> justifié */
  [style*="--fw-light"] { text-align: justify !important; }
footer [style*="--fw-light"], nav [style*="--fw-light"] { text-align: left !important; }