/* The hero's arrival: four layers assemble in real 3D and a shock wave crosses the floor, then the stack rests.
   Everything is sized in em from --em on .art, so one drawing fits every width. Runs on CSS alone; runtime.js only adds
   pointer tilt (--px, --py), the scroll opening (--open) and the off-screen pause. */
.art {
  --em: min(1.65vw, 8.5px);
  --gap: 13em;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  margin: 8px 0 0;
  width: 100%;
  height: calc(var(--em) * 74);
  font-size: var(--em);
}
.stage { position: absolute; inset: 0; perspective: 340em; perspective-origin: 50% 40%; }
.scene {
  position: absolute;
  left: 50%;
  top: calc(100% - 19em);
  width: 56em;
  height: 26em;
  margin: -13em 0 0 -28em;
  transform-style: preserve-3d;
  transform: rotateX(calc(60deg + var(--py, 0) * -4deg)) rotateZ(calc(-30deg + var(--px, 0) * 6deg));
}
.scene i, .scene b { display: block; font-style: normal; }

/* Floor: a dotted plane and one light under the stack */
.floor {
  position: absolute;
  inset: -46em;
  transform: translateZ(-5em);
  background:
    radial-gradient(rgba(170, 190, 255, 0.34) 1px, transparent 1.4px) 0 0 / 3em 3em;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
.floor::after {
  content: "";
  position: absolute;
  inset: 22%;
  background: radial-gradient(closest-side, rgba(58, 98, 255, 0.5), transparent);
}
.shock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100em;
  height: 100em;
  margin: -50em 0 0 -50em;
  border-radius: 50%;
  border: 0.22em solid rgba(190, 208, 255, 0.9);
  transform: translateZ(-5em);
  opacity: 0;
}

/* Layers */
.pl {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--n) * (var(--gap) + var(--open, 0) * 5em)));
}
.pl__top {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(196, 210, 255, 0.85);
  background: linear-gradient(120deg, rgba(38, 62, 160, 0.94), rgba(18, 32, 92, 0.9) 70%);
  box-shadow: 0 0 2.6em rgba(84, 124, 255, 0.42), inset 0 0 3em rgba(150, 178, 255, 0.2);
}
.pl__front, .pl__side { position: absolute; background: rgba(88, 120, 245, 0.8); }
.pl__front { left: 0; top: 100%; width: 100%; height: 1.3em; transform-origin: top; transform: rotateX(-90deg); }
.pl__side { right: 100%; top: 0; width: 1.3em; height: 100%; background: rgba(40, 66, 170, 0.9); transform-origin: right; transform: rotateY(-90deg); }
.pl__tag {
  position: absolute;
  left: 1.8em;
  bottom: 1.5em;
  display: flex;
  align-items: center;
  gap: 1.1em;
}
.pl__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 5.2em;
  height: 5.2em;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.pl__ic svg { width: 3.5em; height: 3.5em; fill: none; stroke: #ffffff; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pl__tag--vps .pl__ic { background: #ffffff; }
.pl__tag--vps svg { fill: #e5362a; stroke: none; }
.pl__label {
  color: #ffffff;
  font-size: 2.3em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.pl__tag--vps .pl__label { font-size: 3em; letter-spacing: 0.01em; }

/* Bricks on the server firewall, rows on the application firewall */
.pl--fw .pl__top {
  background:
    repeating-linear-gradient(0deg, transparent 0 2.9em, rgba(196, 210, 255, 0.16) 2.9em 3em),
    linear-gradient(120deg, rgba(38, 62, 160, 0.94), rgba(18, 32, 92, 0.9) 70%);
}
.pl--waf .pl__top {
  background:
    repeating-linear-gradient(90deg, transparent 0 3.9em, rgba(196, 210, 255, 0.13) 3.9em 4em),
    linear-gradient(120deg, rgba(34, 56, 150, 0.94), rgba(16, 28, 84, 0.9) 70%);
}
.pl--site .pl__top { background: linear-gradient(120deg, #3a64f4, #1f43c4); border-color: rgba(214, 224, 255, 0.95); }
.pl--site .pl__front { background: #2a4fd6; }
.pl--site .pl__side { background: #1b3a96; }
.pl__page { position: absolute; right: 3em; bottom: 2em; width: 15em; height: 10.5em; padding: 2.4em 1.6em 0; border: 0.18em solid #ffffff; }
.pl__page::before { content: ""; position: absolute; left: 0; right: 0; top: 1.3em; border-top: 0.18em solid #ffffff; }
.pl__page b { height: 0.5em; margin-top: 1.05em; background: #ffffff; }
.pl__page b:nth-child(2) { width: 78%; }
.pl__page b:nth-child(3) { width: 56%; }
.pl--vps .pl__top { background: linear-gradient(120deg, #141c40, #0c1230); border-color: rgba(150, 165, 225, 0.8); box-shadow: 0 0 2.6em rgba(84, 124, 255, 0.28); }
.pl--vps .pl__front { background: #2b3b82; }
.pl--vps .pl__side { background: #1a2558; }
.pl__rack { position: absolute; right: 3em; bottom: 2em; width: 19em; }
.pl__rack b { position: relative; height: 3.3em; margin-top: 0.7em; border: 0.18em solid rgba(190, 204, 250, 0.85); border-radius: 0.3em; }
.pl__rack b::before { content: ""; position: absolute; left: 1em; top: 50%; width: 0.6em; height: 0.6em; margin-top: -0.3em; border-radius: 50%; background: #6ee7a0; }
.pl__rack b::after { content: ""; position: absolute; right: 1.1em; left: 45%; top: 50%; height: 0.24em; margin-top: -0.12em; background: rgba(190, 204, 250, 0.7); }

/* Hero layout with the art */
.has-art .hero__copy { position: relative; z-index: 1; }
.has-art .hero__sub { max-width: 46ch; }
@media (min-width: 640px) { .art { --em: 8.5px; } }
@media (min-width: 960px) {
  .has-art .hero { display: flex; align-items: center; min-height: min(calc(100svh - var(--header)), 920px); padding-block: 24px; }
  .has-art .hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .has-art { --f0: clamp(3.25rem, 4.6vw, 5rem); }
  .art { --em: min(0.8vw, 1.2vh, 13px); margin: 0; }
}

/* Off the page, or when motion is not welcome, the drawing simply rests. */
.art.is-offscreen *, .art.is-offscreen *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes art-camera { from { transform: rotateX(74deg) rotateZ(-64deg) scale(0.72); } }
  @keyframes art-drop { from { transform: translateZ(calc(var(--n) * var(--gap) + 58em)); } }
  @keyframes art-fade { from { opacity: 0; } }
  @keyframes art-land { 0% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
  @keyframes art-shock { 0% { transform: translateZ(-5em) scale(0.1); opacity: 1; } 100% { transform: translateZ(-5em) scale(1.9); opacity: 0; } }
  @keyframes art-floor { from { opacity: 0; } }

  .scene { animation: art-camera 2.3s var(--ease) both; }
  .floor { animation: art-floor 1.6s ease-out 0.2s both; }
  .pl { animation: art-drop 1s var(--ease) both; animation-delay: calc(0.2s + (var(--n)) * 0.24s); }
  .pl__front, .pl__side { animation: art-fade 0.3s linear both; animation-delay: calc(0.2s + var(--n) * 0.24s); }
  .pl__top { animation: art-fade 0.3s linear both, art-land 0.9s ease-out both; animation-delay: calc(0.2s + var(--n) * 0.24s), calc(0.62s + var(--n) * 0.24s); }
  .shock { animation: art-shock 1.5s var(--ease) 1.3s both; }
}