/* Minimal starter styles for a clean site. Replace as needed. */
:root{--bg:#f7f7f7;--text:#111;--accent:#0b5cff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.wrap{max-width:1000px;margin:40px auto;padding:20px;background:#fff;border-radius:8px}
h1{margin:0 0 12px}
a{color:var(--accent)}

/* Water wrapper and canvas sizing */
.water{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  height:320px; /* adjust as needed */
  background:linear-gradient(180deg,#e6f3ff 0%, #f7fbff 100%);
}

.water canvas{
  position:absolute;
  left:0;top:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
}

/* Ripple elements sit above the canvas */
.water .ripple{
  position:absolute;
  width:24px;
  height:24px;
  background:rgba(0,0,0,0.12);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  z-index:2;
}
.water .ripple.animate{animation:ripple 900ms ease-out forwards}

@keyframes ripple{
	from{transform:translate(-50%,-50%) scale(0);opacity:0.8}
	to{transform:translate(-50%,-50%) scale(4);opacity:0}
}

@keyframes floatUnder {
  0% {
    transform: translateY(-10px) rotate(-5deg);
  }
  50% {
    transform: translateY(10px) rotate(5deg);
  }
  100% {
    transform: translateY(-10px) rotate(-5deg);
  }
}

.underfloat {
  display: inline-block;
  animation: floatUnder 3s infinite ease-in-out;
}

.floating {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

#heading {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  margin: 0;
  transform-origin: bottom left;
}