/* ===== Magik Factory Studio — styles custom ===== */
:root {
  --color-primary:   #643FA7;
  --color-secondary: #69548E;
  --color-light:     #E6E6E6;
  --color-dark:      #000000;
  --color-surface:   #0D0D0D;
  --color-border:    #1A1A1A;
  --color-accent:    #8A6FD4;
}

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-dark);
}

/* Scrollbar violette */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--color-primary), var(--color-secondary));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* Grain / noise subtil sur le fond */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le contenu passe au-dessus du grain */
nav, main, footer { position: relative; z-index: 1; }

/* Curseur custom : transitions douces */
#cursor-dot  { transition: transform 0.08s ease-out; }

/* Marquee partenaires (défilement infini) */
.marquee { width: 100%; }
.marquee-track {
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Masonry portfolio basé sur la taille réelle des images */
.masonry { column-gap: 1rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
@media (min-width: 768px)  { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }