:root{
  --text:#f5f9ff;
  --cursor-x:50vw;
  --cursor-y:55vh;
  --cursor-visible:0;
}
*{box-sizing:border-box}
html,body,#root{width:100%;height:100%;margin:0}
body{
  overflow:hidden;
  background:#010611;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.app{position:relative;width:100vw;height:100vh;overflow:hidden;background:#010611}
.stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#010611}

.ocean-bg{
  position:absolute;inset:-2.5%;z-index:0;
  width:105%;height:105%;
  object-fit:cover;
  object-position:56% center;
  transform:scale(1.035);
  filter:saturate(1.04) contrast(1.015) brightness(.98);
  pointer-events:none;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 54%,rgba(27,103,205,.06),transparent 29%),
    linear-gradient(180deg,rgba(0,4,12,.015),rgba(0,4,12,.055) 56%,rgba(0,6,15,.13));
}
.cloud-title{
  position:absolute;
  z-index:4;
  top:3.8%;
  left:36.0%;
  width:49.5%;
  height:auto;
  pointer-events:none;
  opacity:.96;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 16px rgba(210,236,255,.06));
}
.cursor-haze{
  position:absolute;z-index:40;left:0;top:0;pointer-events:none;
  width:460px;height:460px;border-radius:50%;
  transform:translate(calc(var(--cursor-x) - 230px),calc(var(--cursor-y) - 230px));
  opacity:var(--cursor-visible);
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,.42) 0%,
      rgba(214,250,255,.30) 4%,
      rgba(149,235,255,.24) 10%,
      rgba(89,202,255,.17) 22%,
      rgba(58,144,255,.10) 40%,
      rgba(31,94,220,.04) 58%,
      transparent 76%);
  mix-blend-mode:screen;
  filter:blur(2px);
  transition:opacity .14s ease;
}
.cursor-haze::after{
  content:"";
  position:absolute;left:50%;top:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.50),rgba(164,236,255,.24) 35%,rgba(77,174,255,.10) 58%,transparent 76%);
  box-shadow:0 0 22px rgba(187,243,255,.32),0 0 50px rgba(77,174,255,.18);
}
.center-brand{
  border:0;background:transparent;padding:0;margin:0;position:absolute;
  left:50%;top:52.3%;width:min(39.5vw,650px);transform:translate(-50%,-50%);
  z-index:12;cursor:pointer;transition:transform .22s ease,filter .22s ease;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(57,198,255,.18));
}
.center-brand:hover,.center-brand:focus-visible{
  transform:translate(-50%,-50%) scale(1.018);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.48)) drop-shadow(0 0 34px rgba(108,226,255,.34));
  outline:none;
}
.center-brand img{display:block;width:100%;height:auto}
.node{
  position:absolute;z-index:13;transform:translate(-50%,-50%);
  text-align:center;width:12.5%;min-width:106px;
  animation:floatNode var(--dur,8s) ease-in-out infinite;animation-delay:var(--delay,-1s);
}
.node:hover,.node:focus-within{animation-play-state:paused}
.node.current{left:14.1%;top:29.9%;--dur:8.1s;--delay:-1.8s}
.node.harbor{left:10.8%;top:54.0%;--dur:8.9s;--delay:-3.7s}
.node.wake{left:24.4%;top:75.1%;--dur:8.7s;--delay:-2.4s}
.node.portal{left:77.0%;top:35.8%;--dur:8.3s;--delay:-4.1s}
.node.depth{left:87.3%;top:54.2%;--dur:9.3s;--delay:-1.2s}
.node.breakwater{left:79.3%;top:76.5%;--dur:8.8s;--delay:-4.6s}
.node-btn{
  display:grid;place-items:center;position:relative;margin:0 auto;border:0;background:transparent;padding:0;
  width:clamp(88px,8.8vw,142px);height:clamp(88px,8.8vw,142px);border-radius:50%;
  cursor:pointer;transition:transform .18s ease,filter .18s ease;overflow:visible;
}
.node-btn::before,.node-btn::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.node-btn::before{
  inset:0;border:1.4px solid rgba(104,211,255,.72);
  box-shadow:0 0 24px rgba(52,165,255,.42),inset 0 0 28px rgba(46,145,245,.17);
}
.node-btn::after{inset:10%;border:1px solid rgba(135,227,255,.27)}
.node:hover .node-btn,.node:focus-within .node-btn{
  transform:translateY(-3px) scale(1.04);
  filter:drop-shadow(0 0 20px rgba(92,225,255,.42));
}
.node-icon{
  width:73%;height:73%;object-fit:contain;display:block;
  filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 12px rgba(62,182,255,.32));
}
.node.wake .node-icon,.node.breakwater .node-icon{
  width:72%;height:72%;
  filter:brightness(1.32) contrast(1.06) saturate(1.18) drop-shadow(0 0 14px rgba(92,214,255,.44));
}
.node-label{
  display:block;position:relative;z-index:4;margin-top:10px;color:rgba(247,250,255,.98);
  font-size:clamp(10px,1.03vw,17px);line-height:1;letter-spacing:.30em;text-indent:.30em;
  text-transform:uppercase;white-space:nowrap;text-shadow:0 0 12px rgba(0,0,0,.62),0 0 12px rgba(57,155,255,.18);
}
.node.wake .node-label,.node.breakwater .node-label{margin-top:12px}
.tooltip{
  position:absolute;z-index:25;width:clamp(220px,18vw,320px);padding:14px 18px;
  border:1px solid rgba(111,198,255,.66);border-radius:16px;
  background:linear-gradient(180deg,rgba(9,24,46,.92),rgba(6,16,32,.95));
  box-shadow:0 12px 34px rgba(0,0,0,.44),0 0 24px rgba(63,166,255,.15),inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-align:left;color:rgba(220,236,251,.94);font-size:clamp(12px,.95vw,16px);line-height:1.45;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.tooltip strong{color:#fff;font-weight:750;letter-spacing:.02em}
.node[data-side="right"] .tooltip{left:100%;top:14%;margin-left:12px;transform:translateY(6px)}
.node[data-side="left"] .tooltip{right:100%;top:14%;margin-right:12px;transform:translateY(6px)}
.node[data-side="top"] .tooltip{left:50%;bottom:100%;margin-bottom:12px;transform:translate(-50%,6px)}
.node:hover .tooltip,.node:focus-within .tooltip,.node.open .tooltip{opacity:1;visibility:visible}
.node[data-side="right"]:hover .tooltip,.node[data-side="right"]:focus-within .tooltip,.node[data-side="right"].open .tooltip,
.node[data-side="left"]:hover .tooltip,.node[data-side="left"]:focus-within .tooltip,.node[data-side="left"].open .tooltip{transform:translateY(0)}
.node[data-side="top"]:hover .tooltip,.node[data-side="top"]:focus-within .tooltip,.node[data-side="top"].open .tooltip{transform:translate(-50%,0)}
.center-tip{
  position:absolute;left:50%;top:66.6%;z-index:24;transform:translate(-50%,8px);width:clamp(320px,27vw,470px);
  padding:14px 18px;border:1px solid rgba(111,198,255,.66);border-radius:16px;
  background:linear-gradient(180deg,rgba(9,24,46,.92),rgba(6,16,32,.95));
  box-shadow:0 12px 34px rgba(0,0,0,.44),0 0 24px rgba(63,166,255,.15);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:rgba(220,236,251,.94);font-size:clamp(12px,.95vw,16px);line-height:1.46;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.center-tip strong{color:#fff}
.center-brand:hover + .center-tip,.center-brand:focus-visible + .center-tip,.center-tip.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.coming{
  position:absolute;left:50%;bottom:6.6%;z-index:10;transform:translateX(-50%);display:flex;align-items:center;gap:22px;
  color:rgba(241,248,255,.95);font-size:clamp(10px,1vw,16px);line-height:1;letter-spacing:.52em;text-indent:.52em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 14px rgba(65,180,255,.14);
}
.coming::before,.coming::after{
  content:"";width:clamp(70px,8vw,130px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(141,224,255,.86),transparent);
  box-shadow:0 0 16px rgba(73,189,255,.22);
}
@keyframes floatNode{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){.node{animation:none}.node-btn,.center-brand{transition:none}}

@media (min-aspect-ratio:3/2){
  .ocean-bg{object-position:50% center}
}
@media (max-width:1100px){
  .cloud-title{left:34%;width:53%;top:4.4%}
  .center-brand{width:min(48vw,600px)}
}
@media (max-width:900px){
  .ocean-bg{object-position:58% center}
  .cloud-title{left:31%;width:58%;top:5.5%}
  .center-brand{width:min(54vw,520px);top:53%}
  .center-tip{top:68%;width:min(66vw,420px)}
  .node.current{left:14%;top:29.5%}.node.harbor{left:11%;top:57%}.node.wake{left:25%;top:79%}
  .node.portal{left:79%;top:39%}.node.depth{left:88%;top:57%}.node.breakwater{left:80%;top:80%}
}
@media (max-width:640px), (orientation:portrait){
  .ocean-bg{object-position:72% center;transform:scale(1.04)}
  .cloud-title{left:18%;width:76%;top:6%;opacity:.92}
  .center-brand{width:min(72vw,420px);top:47.8%}
  .center-tip{width:min(84vw,320px);top:61.2%;padding:12px 14px;font-size:12px}
  .node{width:19%;min-width:72px}
  .node.current{left:13%;top:25.5%}.node.harbor{left:12%;top:49%}.node.wake{left:25%;top:74.5%}
  .node.portal{left:84%;top:32.5%}.node.depth{left:88%;top:51.5%}.node.breakwater{left:80%;top:76%}
  .node-btn{width:clamp(66px,16vw,84px);height:clamp(66px,16vw,84px)}
  .node-label{margin-top:7px;font-size:11px;letter-spacing:.18em;text-indent:.18em}
  .tooltip{width:min(78vw,240px);padding:10px 12px;font-size:12px;line-height:1.38}
  .node[data-side="right"] .tooltip,.node[data-side="left"] .tooltip,
  .node[data-side="top"] .tooltip{left:50%;right:auto;top:auto;bottom:100%;margin:0 0 10px 0;transform:translate(-50%,6px)}
  .node:hover .tooltip,.node:focus-within .tooltip,.node.open .tooltip{transform:translate(-50%,0)}
  .coming{bottom:4.6%;gap:10px;font-size:12px;letter-spacing:.24em;text-indent:.24em}
  .coming::before,.coming::after{width:38px}
}
@media (max-width:420px){
  .ocean-bg{object-position:76% center}
  .cloud-title{left:14%;width:82%;top:7%}
  .center-brand{width:78vw;top:46.5%}
  .center-tip{top:59.8%}
  .node.current{left:13%;top:24.5%}.node.harbor{left:12%;top:47.5%}.node.wake{left:25%;top:73%}
  .node.portal{left:85%;top:31%}.node.depth{left:88.5%;top:50%}.node.breakwater{left:80%;top:75%}
}

@media (hover:none), (pointer:coarse){
  .cursor-haze{display:none}
}