/* MAS Kerk - Planning : de welkomstband op het dashboard
   Zelfde gedachte als de MAS-hero en de VVD-seizoensband: een tafereel achter
   de begroeting dat meebeweegt met de tijd. Hier bepaalt het KERKELIJK JAAR het
   tafereel en de kleur, en het weer de sfeer eroverheen. */

.hero{
  position:relative; overflow:hidden; border-radius:var(--rond);
  border:1px solid var(--lijn); box-shadow:var(--schaduw);
  background:var(--blauw-licht); margin-bottom:18px; isolation:isolate;
}
.hero-tafereel{position:absolute; inset:0; z-index:0}
.hero-tafereel svg{width:100%; height:100%; display:block}
/* Leessluier: van links dekkend, naar rechts open zodat het tafereel te zien
   blijft. Zonder deze laag is wit op een lichte lucht niet te lezen. */
.hero-sluier{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(20,28,46,.80) 0%, rgba(20,28,46,.62) 38%, rgba(20,28,46,.20) 68%, rgba(20,28,46,0) 100%)}
.hero-inhoud{position:relative; z-index:2; padding:20px 22px; min-height:186px;
  display:flex; flex-direction:column; justify-content:center; gap:7px; color:#fff; max-width:66%;
  text-shadow:0 1px 3px rgba(12,18,32,.45)}

.hero-groet{font-size:27px; line-height:1.1; font-weight:400; letter-spacing:-.015em}
.hero-groet .punt{color:var(--oranje)}
.hero-nu{font-size:13.5px; color:#E7E9EF; max-width:64ch}
.hero-regels{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.hero-kaartje{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff;
  padding:5px 11px; border-radius:999px; backdrop-filter:blur(3px)}
.hero-kaartje.oranje{background:var(--oranje); border-color:var(--oranje); color:#fff}
.hero-kaartje .kleurbol{width:11px; height:11px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(255,255,255,.6)}
.hero-kaartje button{all:unset; cursor:pointer; text-decoration:underline}
.hero-knop{position:absolute; right:12px; top:12px; z-index:3; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.16); color:#fff; font-size:11.5px; font-weight:600;
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(3px)}
.hero-knop:hover{background:rgba(255,255,255,.3)}

/* ---------- bewegende lagen ---------- */
.hero .drijf{animation:kp-drijf 78s linear infinite}
.hero .drijf.traag{animation-duration:126s}
@keyframes kp-drijf{from{transform:translateX(-190px)} to{transform:translateX(1330px)}}
.hero .val{animation:kp-val var(--du,9s) linear infinite}
@keyframes kp-val{from{transform:translate(0,-30px) rotate(0)} to{transform:translate(var(--zw,26px),260px) rotate(var(--dr,300deg))}}
.hero .regen line{animation:kp-regen .85s linear infinite}
@keyframes kp-regen{from{transform:translate(0,-40px)} to{transform:translate(-9px,240px)}}
.hero .flits{animation:kp-flits 9s linear infinite; opacity:0}
@keyframes kp-flits{0%,86%{opacity:0} 87%{opacity:.62} 89%{opacity:0} 91%{opacity:.45} 93%,100%{opacity:0}}
.hero .vlam{transform-origin:center bottom; animation:kp-vlam 2.6s ease-in-out infinite}
@keyframes kp-vlam{0%,100%{transform:scaleY(1) scaleX(1)} 50%{transform:scaleY(1.14) scaleX(.93)}}
.hero .fonkel{animation:kp-fonkel 4.5s ease-in-out infinite}
@keyframes kp-fonkel{0%,100%{opacity:.35} 50%{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .hero .drijf,.hero .val,.hero .regen line,.hero .flits,.hero .vlam,.hero .fonkel{animation:none}
  .hero .flits{opacity:0}
}

/* ---------- smal ---------- */
@media(max-width:900px){
  .hero-inhoud{max-width:100%; min-height:168px}
  .hero-sluier{background:linear-gradient(180deg, rgba(24,32,50,.62) 0%, rgba(24,32,50,.8) 55%, rgba(24,32,50,.88) 100%)}
}
@media(max-width:560px){
  .hero-inhoud{padding:16px 16px; min-height:0; gap:6px}
  .hero-groet{font-size:21px}
  .hero-nu{font-size:12.5px}
  .hero-knop{position:static; align-self:flex-start; margin-top:4px}
}