/* ============================================================
   URBAN GRND — flair.css
   Extra visuele flair bovenop polish.css. Additief & fail-safe.
   Merkeigen: violet/amber, Made Tommy, diagonale streep-motief.
   ============================================================ */

/* ===== 1. AURORA op donkere hero's =====================
   Levende, langzaam driftende gloed achter de hero-content.
   Basiskleur blijft staan als fallback; tekst blijft leesbaar. */
.hero,.act-hero,.resv-hero,.page-hero{position:relative}
.hero::after,
.act-hero .aurora,
.resv-hero::after,
.page-hero::after{pointer-events:none}

.hero,.act-hero,.resv-hero,.page-hero{
  background-color:var(--ug-violet-900);
  background-image:
    radial-gradient(40% 55% at 82% 18%, rgba(227,150,56,.20), transparent 60%),
    radial-gradient(45% 60% at 12% 90%, rgba(90,8,210,.55), transparent 62%),
    radial-gradient(38% 50% at 60% 60%, rgba(123,56,224,.28), transparent 60%);
  background-repeat:no-repeat;
  background-size:180% 180%,180% 180%,180% 180%;
  animation:ug-aurora 22s ease-in-out infinite alternate;
}
@keyframes ug-aurora{
  0%  {background-position:0% 0%,   100% 100%, 50% 50%}
  50% {background-position:20% 10%, 80% 85%,   60% 40%}
  100%{background-position:0% 0%,   100% 100%, 50% 50%}
}
@media (prefers-reduced-motion:reduce){
  .hero,.act-hero,.resv-hero,.page-hero{animation:none}
}

/* ===== 2. CARD GLOW & TILT op hover ==================== */
.ug-card,.rcard,.act-feature,.combi-card,.pas,.dl{
  transition:transform .22s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s ease,border-color .2s ease;
}
.ug-card--link:hover,.rcard:hover,.act-feature:hover,.dl:hover{
  box-shadow:0 18px 44px rgba(26,4,80,.28),0 0 0 1px rgba(227,150,56,.35);
}
.act-feature:hover{transform:translateY(-4px)}
.combi-card:hover{box-shadow:0 18px 44px rgba(26,4,80,.4),0 0 0 1px rgba(227,150,56,.5)}

/* ===== 3. DISPLAY-KOP FLOURISH =========================
   Korte amber diagonale streep vóór de grote sectiekoppen. */
.sec-head .ug-eyebrow--dot::before,
.act-head .ug-eyebrow--dot::before{box-shadow:0 0 0 4px rgba(227,150,56,.18)}

.sec-head h2,.act-head h2{position:relative;display:inline-block}
.sec-head h2::after,.act-head h2::after{
  content:"";display:block;width:52px;height:5px;margin-top:12px;border-radius:var(--radius-pill);
  background:var(--ug-amber-500) 0 9px,var(--ug-violet-400) 9px 18px);
}

/* ===== 4. MARQUEE (doorlopende activiteiten-band) ====== */
.marquee{
  overflow:hidden;background:var(--ug-amber-500);color:var(--ug-violet-800);
  border-top:3px solid var(--ug-violet-800);border-bottom:3px solid var(--ug-violet-800);
  padding:14px 0;white-space:nowrap;
}
.marquee__track{
  display:inline-flex;align-items:center;gap:0;
  animation:ug-marquee 32s linear infinite;will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--font-display);text-transform:uppercase;font-weight:900;
  font-size:1.25rem;letter-spacing:.02em;padding:0 22px;display:inline-flex;align-items:center;gap:22px;
}
.marquee__track span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ug-violet-800);opacity:.55}
@keyframes ug-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;transform:none}
}

/* ===== 5. STATS-BAND (meetellende cijfers) ============= */
.stat-band{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  background:var(--ug-violet-800);border-radius:var(--radius-xl);
  padding:var(--space-7) var(--space-6);position:relative;overflow:hidden;box-shadow:var(--shadow-md);
}
.stat-band::after{content:"";position:absolute;right:-80px;bottom:-100px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(227,150,56,.18),transparent 62%);pointer-events:none}
.stat{position:relative;z-index:1;text-align:center;color:#fff}
.stat b{display:block;font-family:var(--font-heading);font-weight:800;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--ug-amber-500);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:.8rem;letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:700;color:var(--on-dark-muted)}
@media (max-width:720px){.stat-band{grid-template-columns:1fr 1fr;gap:26px 16px}}

/* ===== 6. ZACHTE FADE aan de randen van de marquee ===== */
.marquee{position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ug-amber-500),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--ug-amber-500),transparent)}