:root {
  --logo-background: #000817;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--logo-background);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.logo-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 116, 255, 0.09), transparent 32rem),
    var(--logo-background);
}

.logo-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(36, 134, 233, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 134, 233, 0.026) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at center, black, transparent 68%);
}

.logo-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(920px, 82vw);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: rgba(0, 91, 255, 0.08);
  filter: blur(80px);
  animation: ambient-breathe 5s ease-in-out infinite;
}

.background-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.background-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(0, 4, 14, .26) 70%, rgba(0, 3, 11, .82) 100%);
}

.aurora {
  position: absolute;
  width: min(820px, 74vw);
  aspect-ratio: 1.8 / 1;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .19;
  mix-blend-mode: screen;
}

.aurora-one {
  top: -12%;
  left: 8%;
  background: linear-gradient(110deg, transparent 4%, #003dff 42%, #00c8ff 72%, transparent 92%);
  animation: aurora-drift-one 12s ease-in-out infinite alternate;
}

.aurora-two {
  right: 3%;
  bottom: -14%;
  background: linear-gradient(120deg, transparent, #0075ff 36%, #1ee5ff 60%, transparent 88%);
  animation: aurora-drift-two 15s ease-in-out infinite alternate;
}

.radar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 72vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleY(.58);
  border: 1px solid rgba(51, 165, 255, .1);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 14%, rgba(42, 156, 255, .05) 14.2% 14.45%, transparent 14.7% 28%);
  box-shadow: inset 0 0 80px rgba(0, 101, 255, .04), 0 0 70px rgba(0, 101, 255, .04);
}

.radar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 76%, rgba(42, 181, 255, .36) 92%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 22%, black 22.5% 23%, transparent 23.5% 46%, black 46.5% 47%, transparent 47.5% 71%, black 71.5% 72%, transparent 72.5%);
  animation: radar-sweep 9s linear infinite;
}

.floor-grid {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -36%;
  height: 70%;
  opacity: .18;
  background-image:
    linear-gradient(rgba(29, 132, 225, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 132, 225, .14) 1px, transparent 1px);
  background-size: 64px 42px;
  transform: perspective(420px) rotateX(63deg);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, transparent, black 28%, transparent 91%);
  animation: grid-flow 8s linear infinite;
}

.data-motes {
  position: absolute;
  inset: 0;
}

.data-motes i {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #75d9ff;
  box-shadow: 0 0 8px #138eff;
  opacity: 0;
  animation: mote-float 7s var(--delay) ease-in-out infinite;
}

.logo-button {
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  position: relative;
  z-index: 2;
  width: min(1000px, 88vw);
  aspect-ratio: 1672 / 941;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  transform: perspective(1100px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
  transform-style: preserve-3d;
  transition: transform 120ms ease-out, filter 300ms ease;
  filter: drop-shadow(0 35px 60px rgba(0, 0, 0, 0.48));
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: logo-arrival 1.4s cubic-bezier(.16, .84, .28, 1) both;
}

.logo-button::before,
.logo-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: url("hopfner-systems-logo.png") center / contain no-repeat;
  mix-blend-mode: screen;
}

.logo-button.active::before {
  animation: glitch-top 580ms steps(2, end);
  clip-path: inset(28% 0 57% 0);
  filter: hue-rotate(12deg) brightness(1.35);
}

.logo-button.active::after {
  animation: glitch-bottom 720ms steps(2, end);
  clip-path: inset(63% 0 19% 0);
  filter: hue-rotate(-18deg) brightness(1.25);
}

.logo-button:focus-visible {
  outline: 1px solid rgba(74, 193, 255, 0.85);
  outline-offset: 12px;
}

.logo-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.scan-bar {
  position: absolute;
  top: 7%;
  right: 4%;
  left: 4%;
  z-index: 5;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(100, 220, 255, 0.95), transparent);
  box-shadow: 0 0 18px 2px rgba(18, 155, 255, 0.52);
}

.logo-button:hover .scan-bar,
.logo-button:focus-visible .scan-bar,
.logo-button.active .scan-bar {
  animation: system-scan 1.8s linear infinite;
}

.logo-button.active {
  filter:
    drop-shadow(0 0 18px rgba(41, 166, 255, 0.75))
    drop-shadow(0 0 62px rgba(0, 101, 255, 0.44));
}

.logo-button.active img {
  animation: logo-charge 1.2s cubic-bezier(.2, .8, .2, 1);
}

.energy-field {
  position: absolute;
  width: min(850px, 76vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: scaleY(0.54);
}

.circuit-board {
  position: absolute;
  z-index: 0;
  width: min(1200px, 96vw);
  height: min(650px, 72vh);
  pointer-events: none;
  opacity: 0;
  animation: circuits-arrive 1.5s 520ms ease-out forwards;
}

.trace {
  position: absolute;
  display: block;
  height: 1px;
  overflow: visible;
  background: linear-gradient(90deg, transparent, rgba(14, 119, 223, 0.22), rgba(65, 189, 255, 0.42));
  filter: drop-shadow(0 0 4px rgba(0, 127, 255, 0.5));
}

.trace::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #54d5ff, transparent);
  opacity: 0;
  animation: data-pulse 3.2s linear infinite;
}

.trace b {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(72, 195, 255, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 136, 255, 0.55);
}

.trace-1 { top: 20%; left: 1%; width: 25%; transform: rotate(9deg); }
.trace-2 { top: 34%; left: 3%; width: 21%; transform: rotate(-4deg); }
.trace-3 { bottom: 31%; left: 2%; width: 27%; transform: rotate(5deg); }
.trace-4 { bottom: 17%; left: 8%; width: 19%; transform: rotate(-10deg); }
.trace-5 { top: 18%; right: 1%; width: 25%; transform: rotate(171deg); }
.trace-6 { top: 36%; right: 2%; width: 22%; transform: rotate(184deg); }
.trace-7 { right: 0; bottom: 29%; width: 28%; transform: rotate(176deg); }
.trace-8 { right: 8%; bottom: 16%; width: 20%; transform: rotate(190deg); }

.trace-2::after, .trace-6::after { animation-delay: -1.2s; }
.trace-3::after, .trace-7::after { animation-delay: -2.1s; }
.trace-4::after, .trace-8::after { animation-delay: -.55s; }

.ring {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(55, 185, 255, 0);
  border-radius: 50%;
  opacity: 0;
}

.energy-field.active .ring-one {
  animation: ring-burst 1.1s ease-out;
}

.energy-field.active .ring-two {
  animation: ring-burst 1.1s 90ms ease-out;
}

.energy-field.active .ring-three {
  animation: ring-burst 1.1s 180ms ease-out;
}

.spark {
  --angle: calc(var(--i) * 18deg);
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7cddff;
  box-shadow: 0 0 12px #139cff;
  opacity: 0;
  transform: rotate(var(--angle)) translateX(130px);
}

.energy-field.active .spark {
  animation: spark-flight 900ms calc(var(--i) * 14ms) ease-out;
}

@keyframes ambient-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes aurora-drift-one {
  from { transform: translate3d(-8%, -3%, 0) rotate(-5deg) scale(.92); }
  to { transform: translate3d(26%, 18%, 0) rotate(9deg) scale(1.14); }
}

@keyframes aurora-drift-two {
  from { transform: translate3d(14%, 8%, 0) rotate(7deg) scale(1.08); }
  to { transform: translate3d(-28%, -18%, 0) rotate(-8deg) scale(.9); }
}

@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}

@keyframes grid-flow {
  to { background-position: 0 84px, 0 0; }
}

@keyframes mote-float {
  0%, 100% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.5); }
  18%, 70% { opacity: .52; }
  50% { opacity: .88; transform: translate3d(10px, -18px, 0) scale(1); }
}

@keyframes logo-arrival {
  0% { opacity: 0; transform: perspective(1100px) scale(.92); filter: blur(14px) brightness(2); }
  44% { opacity: 1; filter: blur(0) brightness(1.38) drop-shadow(0 0 32px rgba(0, 145, 255, .7)); }
  100% { transform: perspective(1100px) scale(1); filter: drop-shadow(0 35px 60px rgba(0, 0, 0, .48)); }
}

@keyframes circuits-arrive {
  from { opacity: 0; transform: scale(.84); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes data-pulse {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  55% { opacity: .65; }
  75%, 100% { left: calc(100% - 28px); opacity: 0; }
}

@keyframes system-scan {
  0% { top: 8%; opacity: 0; }
  12%, 80% { opacity: .8; }
  100% { top: 90%; opacity: 0; }
}

@keyframes glitch-top {
  0%, 100% { opacity: 0; transform: translateX(0); }
  15% { opacity: .72; transform: translateX(-14px); }
  34% { opacity: .35; transform: translateX(9px); }
  58% { opacity: .66; transform: translateX(-5px); }
}

@keyframes glitch-bottom {
  0%, 100% { opacity: 0; transform: translateX(0); }
  20% { opacity: .52; transform: translateX(12px); }
  48% { opacity: .7; transform: translateX(-8px); }
  72% { opacity: .28; transform: translateX(5px); }
}

@keyframes logo-charge {
  0%, 100% { transform: translateZ(0) scale(1); }
  28% { transform: translateZ(38px) scale(1.022); filter: brightness(1.24); }
  55% { transform: translateZ(12px) scale(1.008); filter: brightness(1.08); }
}

@keyframes ring-burst {
  0% { opacity: 0.9; transform: scale(0.5); border-color: rgba(70, 195, 255, 0.9); }
  100% { opacity: 0; transform: scale(2.6); border-color: rgba(0, 106, 255, 0); }
}

@keyframes spark-flight {
  0% { opacity: 1; transform: rotate(var(--angle)) translateX(120px) scale(1.5); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(360px) scale(0); }
}

@media (max-width: 600px) {
  .logo-button {
    width: 98vw;
  }

  .energy-field {
    width: 108vw;
  }

  .circuit-board {
    width: 124vw;
    height: 74vw;
  }

  .logo-page::before {
    background-size: 38px 38px;
  }

  .radar { width: 104vw; }
  .floor-grid { bottom: -20%; height: 52%; background-size: 42px 34px; }
  .aurora { width: 115vw; opacity: .16; }
  .data-motes i:nth-child(2n) { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .logo-button { width: min(860px, 82vw); max-height: 92svh; }
  .circuit-board { height: 96svh; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-page::after,
  .aurora,
  .radar::before,
  .floor-grid,
  .data-motes i,
  .logo-button,
  .circuit-board,
  .trace::after,
  .scan-bar,
  .logo-button::before,
  .logo-button::after,
  .logo-button.active img,
  .energy-field.active .ring,
  .energy-field.active .spark {
    animation: none;
  }

  .logo-button {
    transition: none;
  }
}