/*
 * The drawn server scene (resources/views/partials/server-scene.blade.php):
 * the home page header's picture and the sign-in page's brand panel.
 *
 * An isometric stack of three servers on a lit floor, with three glass cards
 * (uptime, network, DDoS protection). It is drawn inline, not an <img>, so it
 * takes the page's fonts and digits and follows the theme: dark by default,
 * light under the site's .light-theme. The stage keeps its 600 × 520
 * proportions at every width and the cards scale with it (container units),
 * so the composition reads the same on a phone as on a wide screen.
 */

.wn-scene {
  /* dark (default) */
  --sc-top-1: #2e323d;
  --sc-top-2: #20232b;
  --sc-left-1: #1d2027;
  --sc-left-2: #16181e;
  --sc-right-1: #15171c;
  --sc-right-2: #0f1115;
  --sc-edge: rgba(255, 255, 255, .06);
  --sc-edge-hi: rgba(255, 255, 255, .16);
  --sc-vent: rgba(0, 0, 0, .35);
  --sc-bay: #0a0b0e;
  --sc-bay-edge: rgba(255, 255, 255, .07);
  --sc-panel: rgba(255, 255, 255, .025);
  --sc-panel-edge: rgba(255, 255, 255, .08);
  --sc-grid: rgba(255, 255, 255, .07);
  --sc-ring: rgba(255, 154, 31, .38);
  --sc-ring-faint: rgba(255, 255, 255, .07);
  --sc-trace: rgba(255, 154, 31, .28);
  --sc-shadow: rgba(0, 0, 0, .75);
  --sc-glow: rgba(218, 120, 0, .20);
  --sc-cube-t: #ffc24d;
  --sc-cube-l: #e58a0c;
  --sc-cube-r: #b86400;

  --sc-card-bg: linear-gradient(160deg, rgba(40, 44, 54, .78), rgba(22, 24, 30, .78));
  --sc-card-border: rgba(255, 255, 255, .09);
  --sc-card-shadow: 0 1.6em 3em -1.2em rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  --sc-text: #ffffff;
  --sc-muted: #9aa0b4;
  --sc-chip: rgba(255, 154, 31, .14);

  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 600 / 520;
  container-type: inline-size;
  direction: ltr;              /* the drawing is not mirrored; the cards' text is */
  user-select: none;
  -webkit-user-select: none;
}

.light-theme .wn-scene {
  --sc-top-1: #ffffff;
  --sc-top-2: #f2f5f9;
  --sc-left-1: #eef2f7;
  --sc-left-2: #e3e9f1;
  --sc-right-1: #dde4ed;
  --sc-right-2: #d2dae6;
  --sc-edge: rgba(15, 23, 42, .07);
  --sc-edge-hi: rgba(255, 255, 255, .95);
  --sc-vent: rgba(15, 23, 42, .09);
  --sc-bay: #c5cedb;
  --sc-bay-edge: rgba(255, 255, 255, .8);
  --sc-panel: rgba(15, 23, 42, .025);
  --sc-panel-edge: rgba(15, 23, 42, .08);
  --sc-grid: rgba(15, 23, 42, .09);
  --sc-ring: rgba(218, 120, 0, .40);
  --sc-ring-faint: rgba(15, 23, 42, .08);
  --sc-trace: rgba(218, 120, 0, .30);
  --sc-shadow: rgba(30, 41, 59, .35);
  --sc-glow: rgba(255, 170, 60, .22);

  --sc-card-bg: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .80));
  --sc-card-border: rgba(15, 23, 42, .07);
  --sc-card-shadow: 0 1.6em 3em -1.4em rgba(30, 41, 59, .30), inset 0 1px 0 #fff;
  --sc-text: #0f1014;
  --sc-muted: #5d6579;
  --sc-chip: rgba(218, 120, 0, .10);
}

.wn-scene__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- the drawing ------------------------------------------------------- */

.wn-scene .wnsc-s-top1 { stop-color: var(--sc-top-1); }
.wn-scene .wnsc-s-top2 { stop-color: var(--sc-top-2); }
.wn-scene .wnsc-s-left1 { stop-color: var(--sc-left-1); }
.wn-scene .wnsc-s-left2 { stop-color: var(--sc-left-2); }
.wn-scene .wnsc-s-right1 { stop-color: var(--sc-right-1); }
.wn-scene .wnsc-s-right2 { stop-color: var(--sc-right-2); }
.wn-scene .wnsc-s-glow { stop-color: var(--sc-glow); }

.wn-scene .wnsc-grid { fill: none; stroke: var(--sc-grid); stroke-width: 1; }
.wn-scene .wnsc-ring { fill: none; }
.wn-scene .wnsc-ring--1 { stroke: var(--sc-ring); stroke-width: 1.4; }
.wn-scene .wnsc-ring--2 { stroke: var(--sc-ring); stroke-width: 1.2; stroke-dasharray: .8 1.6; opacity: .75; animation: wnsc-dash 40s linear infinite; }
.wn-scene .wnsc-ring--3 { stroke: var(--sc-ring-faint); stroke-width: 1; }

.wn-scene .wnsc-trace { fill: none; stroke: var(--sc-trace); stroke-width: 1.4; stroke-linejoin: round; }
.wn-scene .wnsc-pulse {
  fill: none;
  stroke: #ffb84d;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 7 200;
  stroke-dashoffset: 7;
  animation: wnsc-pulse 3.6s cubic-bezier(.45, 0, .3, 1) infinite;
  animation-delay: var(--d, 0s);
}
.wn-scene .wnsc-node { fill: #ffb84d; }
.wn-scene .wnsc-node-halo { fill: rgba(255, 154, 31, .22); animation: wnsc-breathe 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wn-scene .wnsc-packet { fill: #ffd27a; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .9)); }
.wn-scene .wnsc-packet--2 { fill: #ffffff; opacity: .8; }
.light-theme .wn-scene .wnsc-packet--2 { fill: #da7800; }

.wn-scene .wnsc-shadow { fill: var(--sc-shadow); }
.wn-scene .wnsc-underglow { opacity: .9; }
.light-theme .wn-scene .wnsc-underglow { opacity: .55; }

.wn-scene .wnsc-f-top { fill: url(#wnsc-top); }
.wn-scene .wnsc-f-left { fill: url(#wnsc-left); }
.wn-scene .wnsc-f-right { fill: url(#wnsc-right); }
.wn-scene .wnsc-edge { fill: none; stroke: var(--sc-edge); stroke-width: 1; }
.wn-scene .wnsc-edge-hi { fill: none; stroke: var(--sc-edge-hi); stroke-width: 1; }
.wn-scene .wnsc-vent { fill: var(--sc-vent); }
.wn-scene .wnsc-bay { fill: var(--sc-bay); stroke: var(--sc-bay-edge); stroke-width: .6; }
.wn-scene .wnsc-bay-led { fill: #15cd72; opacity: .45; }
.wn-scene .wnsc-bay-led.is-busy { opacity: 1; animation: wnsc-blink 1.8s steps(2, jump-none) infinite; animation-delay: var(--d, 0s); }
.wn-scene .wnsc-led { animation: wnsc-led 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.wn-scene .wnsc-led--ok { fill: #22e08a; filter: drop-shadow(0 0 2px rgba(34, 224, 138, .9)); }
.wn-scene .wnsc-led--warm { fill: #ffb84d; filter: drop-shadow(0 0 2px rgba(255, 184, 77, .9)); }
.wn-scene .wnsc-power { fill: url(#wnsc-accent); }

.wn-scene .wnsc-panel { fill: var(--sc-panel); stroke: var(--sc-panel-edge); stroke-width: 1; }
.wn-scene .wnsc-core { fill: url(#wnsc-accent); }
.wn-scene .wnsc-core-hi { fill: rgba(255, 255, 255, .28); }
.wn-scene .wnsc-core-glow { fill: #ff9a1f; opacity: .55; animation: wnsc-breathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wn-scene .wnsc-core-ring { fill: none; stroke: rgba(255, 154, 31, .45); stroke-width: 1.2; stroke-dasharray: 3 3; }
.wn-scene .wnsc-pins { fill: none; stroke: rgba(255, 154, 31, .55); stroke-width: 1.6; stroke-linecap: round; }

.wn-scene .wnsc-gap { animation: wnsc-gap 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.wn-scene .wnsc-seam { fill: none; stroke: #ffc24d; stroke-width: 1.3; stroke-linejoin: round; }
.wn-scene .wnsc-seam-glow { fill: none; stroke: #ff9a1f; stroke-width: 5; opacity: .75; }
.light-theme .wn-scene .wnsc-gap { opacity: .85; }

.wn-scene .wnsc-cube { animation: wnsc-float 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.wn-scene .wnsc-cube-t { fill: var(--sc-cube-t); }
.wn-scene .wnsc-cube-l { fill: var(--sc-cube-l); }
.wn-scene .wnsc-cube-r { fill: var(--sc-cube-r); }

/* ---- the cards --------------------------------------------------------- */

.wn-scene__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .85em 1.05em;
  border-radius: 1.05em;
  background: var(--sc-card-bg);
  border: 1px solid var(--sc-card-border);
  box-shadow: var(--sc-card-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--sc-text);
  font-family: var(--primary-font, inherit);
  font-size: 13px;
  font-size: clamp(12px, 2.75cqw, 15.5px);
  line-height: 1.35;
  white-space: nowrap;
  animation: wnsc-float 8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* The cards' text runs in the page's own direction. */
[dir="rtl"] .wn-scene__card { direction: rtl; }

.wn-scene__value {
  display: block;
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.wn-scene__value small {
  font-size: .5em;
  font-weight: 600;
  color: var(--sc-muted);
  margin-inline-start: .3em;
  letter-spacing: 0;
}

.wn-scene__title {
  display: block;
  font-size: 1.06em;
  font-weight: 700;
}

.wn-scene__label {
  display: block;
  margin-top: .2em;
  font-size: .86em;
  font-weight: 500;
  color: var(--sc-muted);
}

/* uptime: top, towards the start of the drawing */
.wn-scene__card--uptime { left: 0; top: 8%; --d: -1s; }

.wn-scene__ring {
  flex: none;
  width: 3.3em;
  height: 3.3em;
  transform: rotate(-90deg);
}
.wn-scene__ring-track { fill: none; stroke: var(--sc-ring-faint); stroke-width: 4; }
.wn-scene__ring-fill {
  fill: none;
  stroke: url(#wnsc-ring-grad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  animation: wnsc-draw 1.8s cubic-bezier(.3, .7, .2, 1) .3s both;
}
.wn-scene__ring-check { fill: none; stroke: #22e08a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* DDoS protection: top, towards the end */
.wn-scene__card--shield { right: 1%; top: 1%; --d: -3.5s; }

.wn-scene__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: .8em;
  background: var(--sc-chip);
  color: #ff9a1f;
}
.wn-scene__icon svg { width: 1.45em; height: 1.45em; }

/* network: bottom, towards the end */
.wn-scene__card--network {
  right: 0;
  bottom: 1%;
  flex-direction: column;
  align-items: stretch;
  gap: .35em;
  min-width: 12.5em;
  --d: -6s;
}

.wn-scene__spark {
  display: block;
  width: 100%;
  height: 2.7em;
  margin-top: .15em;
  overflow: visible;
}
.wn-scene__spark-area { fill: url(#wnsc-spark-grad); }
.wn-scene__spark-line {
  fill: none;
  stroke: #ff9a1f;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 100;
  animation: wnsc-draw 2.2s cubic-bezier(.3, .7, .2, 1) .5s both;
}
.wn-scene__spark-dot { fill: #ffb84d; stroke: var(--sc-text); stroke-width: 0; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .9)); }

/* A narrow stage: the cards stay readable, so the third one steps aside. */
@container (max-width: 430px) {
  .wn-scene__card--uptime { top: 4%; }
  .wn-scene__card--shield { display: none; }
  .wn-scene__card--network { right: 0; bottom: 0; }
}

/* ---- motion ------------------------------------------------------------ */

@keyframes wnsc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes wnsc-dash { to { stroke-dashoffset: -100; } }
@keyframes wnsc-pulse {
  0% { stroke-dashoffset: 7; opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes wnsc-breathe {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: .8; transform: scale(1.1); }
}
@keyframes wnsc-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
@keyframes wnsc-led {
  0%, 100% { opacity: 1; }
  45% { opacity: .35; }
}
@keyframes wnsc-gap {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
@keyframes wnsc-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wn-scene *,
  .wn-scene__card { animation: none !important; }
  .wn-scene .wnsc-packet,
  .wn-scene .wnsc-pulse { display: none; }
}