*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#159ec7;font-family:Arial,"Helvetica Neue",sans-serif}
.ocean{
  position:relative;width:100%;height:100svh;min-height:100%;overflow:hidden;isolation:isolate;
  background-image:linear-gradient(rgba(5,92,130,.06),rgba(0,0,0,.02)),url("assets/background.jpg");
  background-size:cover;background-position:center;
}
/* Subtle moving glitter layer. Kept intentionally restrained so the characters remain the focus. */
.ocean::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.82) 0 1px,transparent 2.5px),
    radial-gradient(circle at 31% 67%,rgba(255,255,255,.70) 0 1.2px,transparent 3px),
    radial-gradient(circle at 51% 33%,rgba(255,255,255,.78) 0 1px,transparent 2.7px),
    radial-gradient(circle at 69% 76%,rgba(255,255,255,.66) 0 1.1px,transparent 3px),
    radial-gradient(circle at 86% 24%,rgba(255,255,255,.80) 0 1px,transparent 2.5px),
    radial-gradient(circle at 78% 49%,rgba(255,255,255,.62) 0 1px,transparent 2.8px),
    radial-gradient(circle at 42% 82%,rgba(255,255,255,.72) 0 1px,transparent 2.6px);
  background-size:23% 31%,29% 37%,31% 27%,37% 41%,26% 34%,33% 29%,28% 36%;
  mix-blend-mode:screen;
  opacity:.42;
  filter:blur(.15px);
  animation:water-glitter 7.5s ease-in-out infinite alternate;
}
.ocean::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle at 36% 20%,rgba(255,255,255,.08),transparent 17%),
    radial-gradient(circle at 75% 72%,rgba(255,255,255,.06),transparent 15%);
  mix-blend-mode:screen;
}
@keyframes water-glitter{
  0%{transform:translate3d(-.7%,-.4%,0) scale(1.015);opacity:.24}
  28%{opacity:.48}
  55%{transform:translate3d(.5%,.35%,0) scale(1.025);opacity:.32}
  78%{opacity:.56}
  100%{transform:translate3d(.9%,-.2%,0) scale(1.018);opacity:.28}
}
.domain{
  font-family:'Pacifico', cursive;
  position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;color:#fff;font-weight:400;letter-spacing:.035em;
  font-size:clamp(34px,7vw,112px);line-height:1;white-space:nowrap;pointer-events:none;
  text-shadow:0 2px 18px rgba(0,66,98,.18);
}
.actors{position:absolute;inset:0;z-index:10;pointer-events:none}
.actor{
  position:absolute;left:0;top:0;width:var(--size,84px);aspect-ratio:1;pointer-events:auto;cursor:pointer;
  transform:translate3d(var(--x),var(--y),0);will-change:transform;
}
.actor:hover{filter:drop-shadow(0 6px 10px rgba(0,73,103,.15))}
.actor .visual{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.actor img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.actor.react .visual{animation:react-pop .8s cubic-bezier(.22,.8,.26,1)}
.splash{
  position:absolute;width:86px;height:86px;border:3px solid rgba(255,255,255,.76);
  border-radius:50%;transform:translate(-50%,-50%) scale(.25);pointer-events:none;z-index:9;
  animation:splash .72s ease-out forwards;
}
.splash::before,.splash::after{content:"";position:absolute;border-radius:50%;inset:14px;border:2px solid rgba(255,255,255,.5)}
.splash::after{inset:28px}
@keyframes splash{to{transform:translate(-50%,-50%) scale(1.55);opacity:0}}
@keyframes react-pop{35%{transform:scale(1.08)}65%{transform:scale(.97)}}
@media (max-width:640px){.domain{
  font-family:'Pacifico', cursive;font-size:clamp(28px,10vw,60px)}}
@media (prefers-reduced-motion:reduce){
  .actor,.actor .visual{transition:none!important;animation:none!important}
  .ocean::before{animation:none!important;opacity:.28}
}