/* =========================================================
   Rick Weegels — Signature motion & polish (additieve laag)
   v1 — laadt ALS LAATSTE bovenop generic.css / home.css.
   Doel: een eigen, herkenbare bewegingstaal + filmische textuur,
   zonder de bestaande opbouw te wijzigen.
   Performant: alleen transform/opacity/clip, GPU-vriendelijk.
   Respecteert prefers-reduced-motion en touch-apparaten.
   Two for You behoudt zijn eigen neon-huisstijl (niet geladen daar).
   ========================================================= */

/* ---------------------------------------------------------
   1. Filmische textuur: korrel + vignet
   --------------------------------------------------------- */
.rw-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.rw-vignette {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 42%, transparent 56%, rgba(4,4,6,.45) 100%);
}

/* ---------------------------------------------------------
   2. Scroll-voortgangsbalk (dun, goud)
   --------------------------------------------------------- */
.rw-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold, #d2a356), var(--gold-soft, #e6c688), var(--copper, #b06f3e));
  box-shadow: 0 0 14px rgba(210,163,86,.5);
  pointer-events: none;
}

/* ---------------------------------------------------------
   3. Eigen cursor-accent (subtiele meebewegende ring)
   --------------------------------------------------------- */
.rw-cursor {
  position: fixed; top: 0; left: 0; z-index: 9996; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(210,163,86,.55);
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, 1));
  transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .3s ease;
  opacity: 0;
}
.rw-cursor.rw-cursor-on { opacity: 1; }
.rw-cursor.rw-cursor-hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--gold-soft, #e6c688); }

/* ---------------------------------------------------------
   4. Drijvende sfeer-gloed (animeert de bestaande .glow)
   Gebruikt de losse `translate`/`scale` properties zodat
   bestaande inline `transform` (bijv. translateX(-50%)) intact blijft.
   --------------------------------------------------------- */
.glow { animation: rwDrift 26s ease-in-out infinite alternate; }
.glow:nth-of-type(2n) { animation-duration: 32s; animation-delay: -8s; }
.glow:nth-of-type(3n) { animation-duration: 38s; animation-delay: -16s; }
@keyframes rwDrift {
  from { translate: -14px 6px; scale: 1; }
  to   { translate: 26px -22px; scale: 1.14; }
}

/* ---------------------------------------------------------
   5. Signatuur: bewegende goudglans op accentwoorden
   --------------------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* Alleen lichte goudtinten zodat de tekst altijd helder leesbaar blijft. */
  .sec-title em,
  h1 .ln:nth-child(2) i {
    background: linear-gradient(100deg,
      var(--gold-soft, #e6c688) 0%, #fff6e0 30%, #f3d79c 50%,
      #fff6e0 70%, var(--gold-soft, #e6c688) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  /* Sectietitels: alleen glans (geen entree-animatie aanwezig). */
  .sec-title em { animation: rwSheen 7s ease-in-out infinite; }
  /* Hero-naam: behoud de bestaande 'rise'-entree en voeg de glans toe. */
  h1 .ln:nth-child(2) i {
    animation: rise .9s .18s ease forwards, rwSheen 7s 1.4s ease-in-out infinite;
  }
}
@keyframes rwSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------------------------------------------------------
   6. Ken-burns op portret/lijst-beelden bij reveal
   --------------------------------------------------------- */
.frame.vis img { animation: rwKen 12s ease-out forwards; }
@keyframes rwKen {
  from { scale: 1.085; }
  to   { scale: 1; }
}

/* ---------------------------------------------------------
   7. Magnetische knoppen + kaart-tilt (JS zet de transform)
   --------------------------------------------------------- */
.btn { will-change: transform; }
.rw-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .25s ease; }
.rw-tilt.rw-tilting { transition: transform .08s linear; }

/* ---------------------------------------------------------
   8. Cursor-gloed op subpagina-hero's (.phero)
   --------------------------------------------------------- */
.phero.rw-glow { isolation: isolate; }
.phero.rw-glow::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(440px circle at var(--gx, 50%) var(--gy, 30%),
              rgba(232,160,74,.18), transparent 60%);
  opacity: 0; transition: opacity .5s ease;
}
.phero.rw-glow.rw-glow-active::after { opacity: 1; }
.phero .phero-in { position: relative; z-index: 2; }

/* ---------------------------------------------------------
   9a. Spotlight-bundel boven de hero verwijderen (op verzoek)
   --------------------------------------------------------- */
.hero .spotlight { display: none; }

/* ---------------------------------------------------------
   9b. Logo terug in de navigatie (badge-variant)
   --------------------------------------------------------- */
.wordmark--logo { display: inline-flex; align-items: center; padding: 0; line-height: 0; }
.wordmark--logo .brand-logo {
  height: 44px; width: auto; display: block; border-radius: 9px;
  border: 1px solid var(--line, rgba(210,163,86,.22));
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
.wordmark--logo:hover .brand-logo { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
@media (max-width: 600px) { .wordmark--logo .brand-logo { height: 38px; } }

/* ---------------------------------------------------------
   9c. Draaiende LP (vinyl) — sfeer + beweging in de muziek-sectie
   --------------------------------------------------------- */
.rw-lp {
  position: absolute; right: clamp(-90px, -4vw, -40px); top: 64px;
  width: clamp(220px, 26vw, 360px); aspect-ratio: 1; border-radius: 50%;
  z-index: 0; pointer-events: none; opacity: .5;
  background:
    conic-gradient(from 0deg, rgba(255,244,216,.10), transparent 12% 48%, rgba(255,244,216,.06) 52%, transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, #0a0a0c 0 2px, #1b1b20 2px 3.6px),
    radial-gradient(circle, #1c1c20, #050506 76%);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.6);
  animation: rwSpin 16s linear infinite;
}
.rw-lp::after {
  content: ""; position: absolute; inset: 36%; border-radius: 50%;
  background:
    radial-gradient(circle, #050506 14%, transparent 15%),
    linear-gradient(120deg, var(--gold, #d2a356), var(--copper, #b06f3e));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 12px rgba(0,0,0,.35);
}
@keyframes rwSpin { to { transform: rotate(360deg); } }
/* zorg dat de tekst boven de LP blijft */
.music .wrap, .original-music .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------
   9. Nettere focus-states (toegankelijkheid)
   --------------------------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold, #d2a356); outline-offset: 3px; border-radius: 4px;
}
.btn-gold:hover {
  box-shadow: 0 10px 38px rgba(210,163,86,.42), 0 0 0 1px rgba(230,198,136,.25) inset;
}

/* ---------------------------------------------------------
   10. Respecteer 'verminder beweging'
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .rw-lp { animation: none; }
  .sec-title em, h1 .ln:nth-child(2) i { animation: none; }
  .frame.vis img { animation: none; }
  .phero.rw-glow::after { display: none; }
  .rw-cursor { display: none; }
}
/* Geen eigen cursor / tilt op touch */
@media (hover: none), (pointer: coarse) {
  .rw-cursor { display: none; }
}