/* Halloween op de teampagina (Berber, 23 okt 2026). TIJDELIJK.
   Alles hangt aan html.is-halloween. Die klasse zet het script in de pagina alleen tot en met
   31 oktober 2026; daarna (of met ?halloween=0) ziet de pagina er weer normaal uit. De
   versieringen (vleermuizen, maan, web, spin, pompoenen) maakt het script pas aan als het
   Halloween is, dus buiten die periode staan ze niet eens in de pagina.
   Kleuren uit de webstyleguide: navy #1C2338/#2A3550, oranje #F28D2D, tekst wit op donker.
   Weghalen na Halloween: zie het commentaar in paginas/Teampagina/team-technea.html. */

/* ---------- kop: dieper navy, oranje maan, vleermuizen ---------- */
html.is-halloween body .project-hero::after{
  background:
    radial-gradient(circle at 82% 34%, rgba(242,141,45,.30) 0, rgba(242,141,45,0) 32%),
    linear-gradient(135deg, rgba(28,35,56,.97) 0%, rgba(28,35,56,.90) 55%, rgba(42,53,80,.78) 100%);
}
html.is-halloween body .project-hero{overflow:hidden;}
html.is-halloween body .project-hero .wrap{z-index:3;}   /* tekst altijd boven maan en vleermuizen */
/* z-index 1: anders valt de maan onder de donkere overlay (::after) van de kop */
.hw-maan{
  position:absolute; z-index:1; right:8%; top:22px; width:150px; height:150px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 38% 36%, #FFC27F 0, #F28D2D 58%, #D97A1F 100%);
  box-shadow:0 0 70px 18px rgba(242,141,45,.35);
}
.hw-vleermuizen{position:absolute; inset:0; z-index:2; pointer-events:none;}
.hw-vleermuis{position:absolute; width:72px; height:auto; color:#0E1322; filter:drop-shadow(0 0 6px rgba(242,141,45,.55)); animation:hw-vlieg 9s ease-in-out infinite;}
.hw-vleermuis svg{display:block; width:100%; height:auto; animation:hw-flap .32s ease-in-out infinite alternate; transform-origin:50% 60%;}
.hw-vleermuis:nth-child(1){right:12%; top:16%; animation-duration:8s;}
.hw-vleermuis:nth-child(2){right:22%; top:58%; width:54px; animation-duration:11s; animation-delay:-3s;}
.hw-vleermuis:nth-child(3){right:6%;  top:66%; width:44px; animation-duration:10s; animation-delay:-6s;}
.hw-vleermuis:nth-child(4){right:30%; top:22%; width:38px; animation-duration:12s; animation-delay:-2s;}
.hw-vleermuis:nth-child(5){right:3%;  top:18%; width:58px; animation-duration:9.5s; animation-delay:-5s;}
@keyframes hw-vlieg{
  0%,100%{transform:translate(0,0) rotate(-4deg);}
  25%{transform:translate(-38px,-16px) rotate(6deg);}
  50%{transform:translate(-12px,14px) rotate(-2deg);}
  75%{transform:translate(26px,-8px) rotate(4deg);}
}
@keyframes hw-flap{from{transform:scaleY(1);} to{transform:scaleY(.55);}}
.hw-pil{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  padding:5px 14px; border-radius:999px; background:#F28D2D; color:#FFFFFF;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.hw-pil svg{width:16px; height:auto; display:block;}
.hw-pil svg ellipse{fill:#FFFFFF;}

/* ---------- uitleg en muur: navy, met spinnenweb en een spin ---------- */
html.is-halloween body .team-uitleg,
html.is-halloween body .team-muur{background:linear-gradient(180deg, #1C2338 0%, #2A3550 100%); border-bottom-color:rgba(255,255,255,.12);}
html.is-halloween body .team-uitleg p{color:rgba(255,255,255,.82);}
html.is-halloween body .team-uitleg p a{color:#F28D2D;}
html.is-halloween body .team-telling{color:#FFFFFF;}
html.is-halloween body .team-telling b{color:#F28D2D;}
html.is-halloween body .team-muur{position:relative; overflow:hidden; padding-bottom:84px;}
.hw-web{position:absolute; top:0; width:220px; height:auto; color:rgba(255,255,255,.16); pointer-events:none; z-index:0;}
.hw-web.links{left:0;}
.hw-web.rechts{right:0; transform:scaleX(-1);}
html.is-halloween body .team-muur .wrap{position:relative; z-index:1;}
.hw-spin{position:absolute; top:0; right:7%; z-index:6; width:2px; height:90px; background:rgba(255,255,255,.35);
  transform-origin:top center; animation:hw-zak 5s ease-in-out infinite; pointer-events:none;}
.hw-spin svg{position:absolute; left:50%; bottom:-20px; width:44px; margin-left:-22px; color:#0E1322; filter:drop-shadow(0 0 5px rgba(242,141,45,.6));}
@keyframes hw-zak{0%,100%{height:70px;} 50%{height:150px;}}

/* pompoenen onderaan de muur */
.hw-pompoenen{position:absolute; left:0; right:0; bottom:8px; z-index:1; display:flex; justify-content:space-between;
  padding:0 4%; pointer-events:none;}
.hw-pompoenen svg{width:60px; height:auto;}
.hw-pompoenen svg:nth-child(2){width:44px; margin-top:16px;}
.hw-pompoenen svg:nth-child(3){width:52px;}

/* ---------- kaarten: spookje bij hover, oranje naamplaat bij open ---------- */
html.is-halloween body .team-kaart::before{
  content:"\1F47B"; position:absolute; z-index:3; right:14px; top:14px; font-size:30px; line-height:1;
  opacity:0; transform:translateY(16px) scale(.6); transition:opacity .25s ease, transform .35s ease;
  pointer-events:none;
}
html.is-halloween body .team-kaart.is-durk::before{content:"\1F383";}
@media (hover:hover){
  html.is-halloween body .team-kaart:hover::before{opacity:1; transform:translateY(0) scale(1); animation:hw-zweef 1.6s ease-in-out .35s infinite;}
}
html.is-halloween body .team-kaart.is-open::before,
html.is-halloween body .team-kaart:focus-visible::before{opacity:1; transform:none;}
@keyframes hw-zweef{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
html.is-halloween body .team-weetje .label{color:#F28D2D;}

/* ---------- Bliksum en Piebe lopen onderlangs de muur (Johan, 26 okt) ----------
   De beelden staan hier in de css en niet in de js: de bouw houdt alleen assets over waar html of
   css naar verwijst (prune_assets in build_projectpaginas.py). Uitgesneden uit de bestaande cartoon
   met paginas/assets/team-halloween/maak_katten.py.
   Opbouw: .hw-kat (positie, via js) > .hw-kat-spiegel (kijkrichting) > .hw-kat-lijf (huppelen). */
html.is-halloween body .team-muur{padding-bottom:168px;}
.hw-kattenpad{position:absolute; left:0; right:0; bottom:10px; height:150px; z-index:4; pointer-events:none;}
.hw-kat{position:absolute; left:0; bottom:0; height:120px; pointer-events:auto; cursor:pointer; will-change:transform;
  -webkit-tap-highlight-color:transparent;}
.hw-kat.lapjes{width:79px;}
.hw-kat.zwart{width:121px;}
.hw-kat-spiegel{display:block; height:100%; transition:transform .25s ease;}
.hw-kat.links .hw-kat-spiegel{transform:scaleX(-1);}
.hw-kat-lijf{display:block; height:100%; background:center bottom / contain no-repeat; transform-origin:50% 100%;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.35));}
.hw-kat.lapjes .hw-kat-lijf{background-image:url("/assets/team-halloween/kat-lapjes.png");}
.hw-kat.zwart .hw-kat-lijf{background-image:url("/assets/team-halloween/kat-zwart.png");}
.hw-kat.loopt .hw-kat-lijf{animation:hw-hup .44s ease-in-out infinite;}
@keyframes hw-hup{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-9px) rotate(-3deg);}}
.hw-ballon{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%,6px); opacity:0;
  background:#FFFFFF; color:#161616; font-size:13px; font-weight:700; line-height:1.3; padding:7px 12px; border-radius:10px;
  white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.3); transition:opacity .2s ease, transform .2s ease; pointer-events:none;}
.hw-ballon::after{content:""; position:absolute; left:50%; top:100%; margin-left:-6px; border:6px solid transparent; border-top-color:#FFFFFF;}
.hw-kat.praat .hw-ballon{opacity:1; transform:translate(-50%,0);}
@media (hover:hover){ .hw-kat:hover .hw-ballon{opacity:1; transform:translate(-50%,0);} }

/* ---------- afsluitende kaart ---------- */
.hw-cta{display:flex; gap:12px; align-items:center; margin:0 0 18px; padding:12px 16px; border-radius:10px;
  background:#FDF1E4; color:#161616; font-size:15px; font-weight:600;}
.hw-cta svg{flex:none; width:34px; height:auto;}

@media (max-width:760px){
  .hw-maan{width:110px; height:110px; right:-24px; top:14px; opacity:.85;}
  .hw-vleermuis:nth-child(n+4){display:none;}
  .hw-vleermuis{width:44px;}
  .hw-web{width:130px;}
  .hw-pompoenen svg{width:32px;}
  html.is-halloween body .team-muur{padding-bottom:130px;}
  .hw-kattenpad{height:110px;}
  .hw-kat{height:84px;}
  .hw-kat.lapjes{width:56px;}
  .hw-kat.zwart{width:85px;}
}
@media (prefers-reduced-motion:reduce){
  .hw-vleermuis, .hw-vleermuis svg, .hw-spin{animation:none !important;}
  html.is-halloween body .team-kaart:hover::before{animation:none !important;}
  .hw-kat-lijf{animation:none !important;}
}