/* Fill narrow windows; fit artwork to the height on wide screens, with blurred sides. */
.site-intro {
  position:fixed; inset:0; z-index:10000; overflow:hidden;
  background:#619bd0; color:#07163f; touch-action:none;
  isolation:isolate; opacity:1;
}
.site-intro::before {
  content:""; position:absolute; inset:-40px;
  background:var(--intro-background) center / cover;
  filter:blur(28px); z-index:-1;
}
.intro-scene {
  position:absolute; height:100%; width:150svh;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.intro-art { position:absolute; inset:0; width:100%; height:100%; }
.intro-labels {
  position:absolute; left:clamp(20px,calc(50% - 35.25svh),26%); top:19%;
  display:grid; gap:3.2svh;
  font:800 clamp(20px,3.7svh,42px)/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.025em;
}
.intro-row { display:flex; align-items:center; gap:2.4svh; opacity:0; }
.intro-icon { width:4.8svh; height:4.8svh; flex:none; overflow:visible; }
.intro-name {
  position:absolute; left:clamp(20px,calc(50% - 32.85svh),28.1%); top:82%; margin:0;
  color:white; font:800 clamp(38px,7.8svh,84px)/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.045em; text-shadow:0 2px 9px #15334780;
  opacity:0; white-space:nowrap; isolation:isolate;
}
.intro-skip {
  position:absolute; z-index:2; cursor:pointer;
  left:calc(100% - 54px);
  top:min(94%,calc(100% - 40px - env(safe-area-inset-bottom,0px))); right:auto; bottom:auto; transform:translate(-50%,-50%);
  width:56px; height:56px; min-height:56px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:#123b56c9; color:#f1faff;
  box-shadow:inset 0 0 14px #58bff51a,0 3px 12px #092d4a40;
  font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.intro-playing .intro-row { animation:intro-appear .5s ease both; }
.intro-playing .intro-row:nth-child(1) { animation-delay:.15s; }
.intro-playing .intro-row:nth-child(2) { animation-delay:.7s; }
.intro-playing .intro-row:nth-child(3) { animation-delay:1.25s; }
.intro-playing .intro-row:nth-child(4) { animation-delay:1.8s; }
.site-intro.intro-leaving { opacity:0; transition:opacity var(--intro-fade,500ms) ease; pointer-events:none; }
.intro-led {
  position:absolute; width:3px; height:2px; border-radius:1px;
  background:#9ae4ff; box-shadow:0 0 4px #23aaff;
  opacity:.2; animation:intro-led-activity var(--led-period) steps(1,end) infinite;
  animation-delay:var(--led-offset);
}
@keyframes intro-appear { from { opacity:0; } to { opacity:1; } }
@keyframes intro-led-activity {
  0%,17%,42%,71%,100% { opacity:.15; }
  8%,34%,64%,88% { opacity:.85; }
  12%,39%,67%,93% { opacity:.35; }
}
@media (max-aspect-ratio:1/1) {
  .intro-scene { width:max(100%,57.108434svh); height:max(100%,175.105485vw); }
  .intro-labels { left:12%; top:34%; gap:2.5svh; font-size:clamp(18px,5.3vw,34px); }
  .intro-icon { width:3.6svh; height:3.6svh; }
  .intro-row { gap:1.6svh; }
  .intro-name { left:16.5%; font-size:clamp(30px,9.4vw,64px); top:83%; }
  .intro-skip { top:min(95.5%,calc(100% - 40px - env(safe-area-inset-bottom,0px))); }
}
/* Keep the original composition and controls together on wide screens. */
@media (min-aspect-ratio:3/2) {
  .intro-art { mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent); }
  .intro-labels { left:calc(50% - 35.25svh); }
  .intro-name { left:calc(50% - 32.85svh); }
  .intro-skip { left:clamp(36px,calc(50% + 51.75svh),calc(100% - 54px)); }
}
@media (prefers-reduced-motion:reduce) { .site-intro { display:none!important; } }

/* Sunlight highlights the final site name only. */

.intro-name::before {
  content:""; position:absolute; pointer-events:none; z-index:-1;
  inset:-65% -12%; opacity:0;
  background:radial-gradient(ellipse at 35% 50%,#ffe3a5b3 0%,#ffd28259 40%,#ffd28200 73%);
  filter:blur(16px);
}
.intro-playing .intro-name::before {
  animation:intro-sunlight 1.2s ease 2.45s both;
}
.intro-playing .intro-name {
  animation:intro-appear .65s ease 2.45s both,intro-lit-name 1.2s ease 2.45s both;
}
@keyframes intro-sunlight {
  0% { opacity:0; transform:translateY(-24%); }
  42% { opacity:.85; }
  100% { opacity:0; transform:translateY(24%); }
}
@keyframes intro-lit-name {
  0%,100% { text-shadow:0 2px 9px #15334780; }
  42% { text-shadow:0 2px 9px #15334780,0 0 15px #ffe5acb3,0 0 34px #ffc56880; }
}

/* Light packets follow the existing cloud connections towards the racks. */
.intro-network {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:hidden;
}
.intro-energy {
  fill:none; stroke:#dcf7ff; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:8 108; stroke-dashoffset:8;
  filter:drop-shadow(0 0 3px #50bdff);
}
.intro-playing .intro-energy {
  animation:intro-energy-flow 2.8s linear infinite both;
  animation-delay:var(--flow-delay);
}
.intro-playing .intro-energy-branch { animation-name:intro-energy-branch; }
.intro-network-node {
  fill:#bcefff; opacity:0; transform:scale(0);
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 4px #70d1ff);
}
.intro-playing .intro-network-node {
  animation:intro-node-fill 2.8s ease infinite both;
  animation-delay:var(--flow-delay);
}
@keyframes intro-energy-flow {
  0% { stroke-dashoffset:8; opacity:.85; }
  85% { stroke-dashoffset:-100; opacity:.85; }
  86%,100% { stroke-dashoffset:-100; opacity:0; }
}
@keyframes intro-energy-branch {
  0% { stroke-dashoffset:8; opacity:.8; }
  22% { stroke-dashoffset:-100; opacity:.8; }
  23%,100% { stroke-dashoffset:-100; opacity:0; }
}
@keyframes intro-node-fill {
  0% { opacity:0; transform:scale(0); }
  6%,12% { opacity:.95; transform:scale(1); }
  26%,100% { opacity:0; transform:scale(1); }
}

/* Clockwise progress follows the total intro duration. */

.intro-skip-ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.intro-skip-track { fill:none; stroke:#9fdcff4d; stroke-width:1.5; }
.intro-skip-progress {
  fill:none; stroke:#bcefff; stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transform:rotate(-90deg); transform-origin:28px 28px;
  filter:drop-shadow(0 0 2px #5ccaff);
}
.intro-skip-head { transform-origin:28px 28px; }
.intro-skip-head circle { fill:#e6faff; filter:drop-shadow(0 0 3px #51bfff); }
.intro-playing .intro-skip-progress { animation:intro-skip-time var(--intro-duration,4000ms) linear both; }
.intro-playing .intro-skip-head { animation:intro-skip-orbit var(--intro-duration,4000ms) linear both; }
.intro-skip:focus-visible { outline:2px solid #dcf6ff; outline-offset:5px; }
@keyframes intro-skip-time { to { stroke-dashoffset:0; } }
@keyframes intro-skip-orbit { to { transform:rotate(360deg); } }