/* ==========================================================================
   Greffe Hollywood sur le site Webflow : ouverture, grain, curseur.
   Préfixe dj- pour ne pas heurter les classes du template.
   ========================================================================== */

.dj-overlay {
  position: fixed; inset: 0; z-index: 99990;
  background: #F6F2EA;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: #171310;
  font-family: "Cormorant Garamond", Georgia, serif;
  transition: background-color 1.6s cubic-bezier(.45,.05,.55,.95);
}
.dj-overlay.dj-clearing { background: rgba(246,242,234,0); pointer-events: none; }

.dj-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.dj-kicker {
  position: relative; z-index: 2;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: clamp(.75rem, .9vw, .875rem);
  font-weight: 600; letter-spacing: .38em;
  margin-bottom: clamp(1.4rem, 4vh, 2.6rem);
}
.dj-title { position: relative; z-index: 2; font-weight: 300; line-height: .95; letter-spacing: .07em; margin: 0; }
.dj-line { display: block; }
.dj-small { font-size: clamp(1rem, 2.4vw, 1.9rem); letter-spacing: .3em; vertical-align: clamp(.5rem, 1.9vw, 1.7rem); margin-right: .3em; }
.dj-big { font-size: clamp(2.3rem, 8vw, 6.4rem); }
.dj-script {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(1.5rem, 3.8vw, 3.1rem);
  color: #9E4526; letter-spacing: 0;
  margin-right: .15em; vertical-align: clamp(.25rem, 1vw, .9rem);
}
.dj-biggest { font-size: clamp(2.8rem, 10vw, 8.2rem); }
.dj-sub {
  position: relative; z-index: 2;
  margin-top: clamp(1.8rem, 4.5vh, 3rem);
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: clamp(.75rem, .9vw, .875rem);
  font-weight: 500; letter-spacing: .06em; line-height: 1.7;
}
.dj-spinner {
  position: relative; z-index: 2;
  margin-top: 2rem; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(23,19,16,.3);
  border-top-color: #171310;
  animation: dj-spin 1s linear infinite;
}
@keyframes dj-spin { to { transform: rotate(360deg); } }

.dj-skip {
  position: absolute; right: clamp(1.2rem, 4vw, 3rem); bottom: 2rem; z-index: 3;
  background: none; border: 1px solid rgba(23,19,16,.45);
  color: #171310; border-radius: 999px;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: .75rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase;
  padding: .6rem 1.3rem; cursor: pointer;
}

.dj-char { display: inline-block; opacity: 0; filter: blur(6px); will-change: opacity, filter; }

/* Grain de pellicule permanent */
.dj-noise {
  position: fixed; inset: -50%; z-index: 99980;
  width: 200%; height: 200%;
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: dj-grain .15s steps(1, end) infinite;
}
@keyframes dj-grain {
  0% { transform: translate(0,0); } 12% { transform: translate(-3%,2%); }
  25% { transform: translate(2%,-4%); } 37% { transform: translate(-4%,-2%); }
  50% { transform: translate(3%,4%); } 62% { transform: translate(-2%,5%); }
  75% { transform: translate(5%,-1%); } 87% { transform: translate(-5%,-4%); }
  100% { transform: translate(4%,2%); }
}

/* Curseur personnalisé (pointeurs fins) */
@media (hover: none), (pointer: coarse) {
  .dj-cursor-dot, .dj-cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-noise, .dj-spinner { animation: none; }
  .dj-char { opacity: 1 !important; filter: none !important; }
}