/*
Theme Name: Water Helden
Theme URI: https://waterhelden.nl
Author: Water Helden
Description: Eenpagina animatielandingspagina voor Water Helden, met een muis-interactief 3D logo en bel-/WhatsApp-knoppen.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: water-helden
*/

:root{
  --bg-1:#173c3f;
  --bg-2:#0c2224;
  --cream:#f2f4ee;
  --mustard:#c9a227;
  --blue:#4fb3c4;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  background:radial-gradient(circle at 50% 28%, var(--bg-1) 0%, var(--bg-2) 100%);
  font-family:'Poppins', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wh-stage{
  position:relative;
  width:100%;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
}
.wh-bubble{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0.01));
  pointer-events:none;
  animation:wh-drift linear infinite;
}
@keyframes wh-drift{
  0%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-30px) translateX(10px);}
  100%{transform:translateY(0) translateX(0);}
}

.wh-float-wrap{
  animation:wh-idleFloat 5.5s ease-in-out infinite;
  transform-style:preserve-3d;
}
@keyframes wh-idleFloat{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-14px);}
}

.wh-scene{
  width:min(80vw, 620px);
  transform-style:preserve-3d;
  transition:transform 0.15s ease-out;
  will-change:transform;
}
.wh-scene svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.wh-layer-water{transform:translateZ(70px); transform-box:fill-box; transform-origin:center;}
.wh-layer-frame{transform:translateZ(0px);}
.wh-layer-mustard{transform:translateZ(95px); transform-box:fill-box; transform-origin:center;}
.wh-layer-helden{transform:translateZ(40px); transform-box:fill-box; transform-origin:center;}
.wh-layer-drop{transform:translateZ(60px); transform-box:fill-box; transform-origin:center;}

#wh-dropPath{
  animation:wh-drip 2.6s cubic-bezier(.55,0,.2,1) infinite;
  transform-origin:440px 288px;
}
@keyframes wh-drip{
  0%{transform:translateY(0) scale(1,0.7); opacity:0;}
  8%{opacity:1; transform:translateY(0) scale(1,1);}
  55%{transform:translateY(30px) scale(0.95,1.15); opacity:1;}
  72%{transform:translateY(40px) scale(0.6,0.6); opacity:0;}
  100%{transform:translateY(0) scale(1,0.7); opacity:0;}
}

.wh-contact{
  position:absolute;
  left:0; right:0;
  bottom:max(28px, 4vh);
  display:flex;
  justify-content:center;
  gap:16px;
  z-index:10;
  padding:0 16px;
}
.wh-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  text-decoration:none;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:0.3px;
  box-shadow:0 8px 22px rgba(0,0,0,0.35);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.wh-btn:active{transform:scale(0.95);}
.wh-btn:hover{transform:translateY(-3px);}
.wh-btn-call{
  background:var(--mustard);
  color:#1b1300;
  box-shadow:0 8px 22px rgba(201,162,39,0.35);
}
.wh-btn-wa{
  background:#25D366;
  color:#0d2721;
  box-shadow:0 8px 22px rgba(37,211,102,0.30);
}
.wh-btn svg{width:20px;height:20px;flex-shrink:0;}

@media (max-width:480px){
  .wh-btn{font-size:14px;padding:12px 16px;}
  .wh-contact{gap:10px;}
}