/* section hero-visual */

.dp-hero-visual {
    overflow: clip;
    padding-block: var(--dp-space-600);
  }
  
  .dp-hero-visual__stage {
  
    position: relative;
  
    min-height: 560px;
  
    display: grid;
    place-items: center;
  
    isolation: isolate;
  
  }
  
  
  /* halo subtil derrière */
  
  .dp-hero-visual__stage::before {
  
    content: "";
  
    position: absolute;
  
    width: min(78%,520px);
    aspect-ratio: 1;
  
    border-radius: 999px;
  
    background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.03) 35%,
      transparent 70%
    );
  
    filter: blur(28px);
  
    z-index: 0;
  
  }
  
  
  /* svg */
  
  .dp-hero-visual__shape {
  
    position: absolute;
  
    width: min(92%,760px);
  
    z-index: 1;
  
    opacity: 0;
  
    transform: translateY(40px) scale(.95) rotate(-4deg);
  
    animation: dpHeroShapeIn 1.2s var(--dp-ease) forwards;
  
  }
  
  
  .dp-hero-visual__shape img {
  
    width: 100%;
    height: auto;
  
    display: block;
  
    filter: drop-shadow(0 20px 60px rgba(0,0,0,0.25));
  
    animation: dpHeroShapeFloat 7s ease-in-out infinite;
  
  }
  
  
  /* disque */
  
  .dp-hero-visual__product {
  
    position: relative;
  
    width: min(70%,520px);
  
    z-index: 2;
  
    opacity: 0;
  
    transform: translateY(50px) scale(.96);
  
    animation: dpHeroProductIn 1s var(--dp-ease) forwards;
    animation-delay: .3s;
  
  }
  
  
  .dp-hero-visual__product img {
  
    width: 100%;
    height: auto;
  
    display: block;
  
    filter:
      drop-shadow(0 30px 80px rgba(0,0,0,.35))
      drop-shadow(0 8px 22px rgba(255,255,255,.05));
  
  }
  
  
  /* anim entree */
  
  @keyframes dpHeroShapeIn {
  
    to {
  
      opacity: 1;
  
      transform:
        translateY(0)
        scale(1)
        rotate(0deg);
  
    }
  
  }
  
  
  @keyframes dpHeroProductIn {
  
    to {
  
      opacity: 1;
  
      transform:
        translateY(0)
        scale(1);
  
    }
  
  }
  
  
  /* anim SVG */
  
  @keyframes dpHeroShapeFloat {
  
    0%,100% {
  
      transform:
      translateY(0)
      rotate(0deg);
  
    }
  
    50% {
  
      transform:
      translateY(-10px)
      rotate(.8deg);
  
    }
  
  }
  
  
  
  /* Responsive */
  
  @media (max-width:1024px){
  
  .dp-hero-visual__stage{
  
  min-height:480px;
  
  }
  
  }
  
  
  @media (max-width:768px){
  
  .dp-hero-visual__stage{
  
  min-height:360px;
  
  }
  
  .dp-hero-visual__product{
  
  width:80%;
  
  }
  
  }