/* VSM World - logo.css : la marque reconstruite en CSS a partir de six tuiles */

.mark {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease);
  will-change: transform;
}

.mark__tile {
  position: absolute;
  inset: 0;
  --tx: 0%;
  --ty: 0%;
  --rot: 0deg;
  --sc: 1;
  --op: 1;
  background: var(--tint);
  clip-path: var(--clip);
  transform-origin: var(--ox) var(--oy);
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc));
  opacity: var(--op);
  transition:
    transform var(--dur, 1.05s) var(--ease),
    opacity 0.5s ease,
    background 0.5s var(--ease);
  will-change: transform, opacity;
}

.mark__tile--b1 {
  --tint: var(--blue);
  --clip: polygon(50% 0%, 75% 25%, 50% 25%);
  --ox: 58.33%;
  --oy: 16.67%;
}

.mark__tile--b2 {
  --tint: var(--blue);
  --clip: polygon(75% 25%, 100% 50%, 75% 50%);
  --ox: 83.33%;
  --oy: 41.67%;
}

.mark__tile--g1 {
  --tint: var(--green);
  --clip: polygon(75% 50%, 100% 50%, 75% 75%);
  --ox: 83.33%;
  --oy: 58.33%;
}

.mark__tile--g2 {
  --tint: var(--green);
  --clip: polygon(50% 75%, 75% 75%, 50% 100%);
  --ox: 58.33%;
  --oy: 83.33%;
}

.mark__tile--r1 {
  --tint: var(--red);
  --clip: polygon(0% 50%, 25% 50%, 25% 75%);
  --ox: 16.67%;
  --oy: 58.33%;
}

.mark__tile--r2 {
  --tint: var(--red);
  --clip: polygon(25% 75%, 50% 75%, 50% 100%);
  --ox: 41.67%;
  --oy: 83.33%;
}

.mark-stage {
  position: relative;
  perspective: 1200px;
  width: 100%;
}

.mark-stage__ghost {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.09;
  filter: blur(2px);
  transform: scale(1.04);
  pointer-events: none;
}

.mark--sm {
  width: 30px;
  aspect-ratio: 1 / 1;
}

.mark--sm .mark__tile {
  transition: transform 0.55s var(--ease-snap);
}

.brand:hover .mark--sm .mark__tile--b1,
.brand:focus-visible .mark--sm .mark__tile--b1 {
  --tx: 6%;
  --ty: -6%;
}

.brand:hover .mark--sm .mark__tile--b2,
.brand:focus-visible .mark--sm .mark__tile--b2 {
  --tx: 9%;
  --ty: -3%;
}

.brand:hover .mark--sm .mark__tile--g1,
.brand:focus-visible .mark--sm .mark__tile--g1 {
  --tx: 8%;
  --ty: 6%;
}

.brand:hover .mark--sm .mark__tile--g2,
.brand:focus-visible .mark--sm .mark__tile--g2 {
  --tx: 2%;
  --ty: 9%;
}

.brand:hover .mark--sm .mark__tile--r1,
.brand:focus-visible .mark--sm .mark__tile--r1 {
  --tx: -9%;
  --ty: 2%;
}

.brand:hover .mark--sm .mark__tile--r2,
.brand:focus-visible .mark--sm .mark__tile--r2 {
  --tx: -6%;
  --ty: 7%;
}