/* HX Electric — Intro Overlay Styles v2 */
#hx-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at 50% 50%, #0d0d0d 0%, #050505 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.65s ease-out;
  cursor: pointer;
}
#hx-intro.hx-intro-out {
  opacity: 0;
  pointer-events: none;
}
#hx-intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#hx-intro-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,215,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,215,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0;
  animation: hxGridIn 1.2s ease-out 0.2s forwards;
}
@keyframes hxGridIn {
  to { opacity: 1; }
}
#hx-intro-center {
  position: relative;
  z-index: 2;
  text-align: center;
  user-select: none;
  perspective: 900px;
}
#hx-intro-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 28px;
}
#hx-intro-ring {
  position: absolute;
  inset: -32px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  opacity: 0;
  animation: hxRingIn 1s ease-out 0.4s forwards, hxRingRotate 6s linear 1.4s infinite;
}
#hx-intro-ring::before,
#hx-intro-ring::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #FFD700;
  border-radius: 50%;
  top: 50%;
  margin-top: -3px;
  box-shadow: 0 0 10px #FFD700;
}
#hx-intro-ring::before { left: -3px; }
#hx-intro-ring::after  { right: -3px; }
@keyframes hxRingIn {
  from { opacity: 0; transform: scale(0.7) rotate(0deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes hxRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#hx-intro-logo {
  width: clamp(120px, 16vw, 180px);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 0 18px rgba(255, 215, 0, 0.6))
    drop-shadow(0 0 38px rgba(255, 215, 0, 0.3));
  animation:
    hxLogoIn 1.3s cubic-bezier(.22,.65,.32,1) 0.1s both,
    hxLogoFloat 5s ease-in-out 1.4s infinite;
  transform-style: preserve-3d;
}
@keyframes hxLogoIn {
  0%   { opacity: 0; transform: rotateY(-90deg) translateZ(-100px) scale(0.5); filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0) translateZ(0) scale(1); }
}
@keyframes hxLogoFloat {
  0%, 100% { transform: rotateY(0) rotateX(0) translateY(0); }
  50%      { transform: rotateY(10deg) rotateX(-4deg) translateY(-6px); }
}
.hx-intro-tagline {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 1.9vw, 19px);
  letter-spacing: 0.35em;
  color: #fff;
  margin-bottom: 10px;
  opacity: 0;
  animation: hxFadeUp 0.7s ease-out 1.6s both;
}
.hx-intro-tagline em {
  color: #FFD700;
  font-style: normal;
  font-weight: 900;
}
.hx-intro-tagline span {
  display: inline-block;
}
.hx-intro-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #FFD700;
  margin-bottom: 22px;
  opacity: 0;
  animation: hxFadeUp 0.6s ease-out 1.85s both;
}
.hx-intro-bar {
  width: 240px;
  height: 2px;
  background: rgba(255, 215, 0, 0.15);
  margin: 0 auto 18px;
  overflow: hidden;
  opacity: 0;
  animation: hxFadeUp 0.4s ease-out 2.05s both;
}
.hx-intro-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, #FFD700, #FFE95C, #FFD700, transparent);
  transform: translateX(-100%);
  animation: hxBarSweep 2.0s cubic-bezier(.4,0,.2,1) 2.15s forwards;
}
.hx-intro-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(255, 215, 0, 0.65);
  opacity: 0;
  animation: hxFadeUp 0.5s ease-out 2.4s both;
}
.hx-intro-loader .dot {
  width: 5px;
  height: 5px;
  background: #FFD700;
  border-radius: 50%;
  opacity: 0.3;
  animation: hxDotPulse 1.2s ease-in-out infinite;
}
.hx-intro-loader .dot:nth-child(2) { animation-delay: 0.2s; }
.hx-intro-loader .dot:nth-child(3) { animation-delay: 0.4s; }
.hx-intro-loader .loader-label { margin-left: 4px; }
@keyframes hxDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes hxFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hxBarSweep {
  to { transform: translateX(100%); }
}
#hx-intro-skip {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #FFD700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 9px 16px;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s, border-color 0.2s;
}
#hx-intro-skip:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: rgba(255, 215, 0, 0.6);
}
@media (max-width: 480px) {
  #hx-intro-skip { font-size: 11px; padding: 6px 11px; top: 12px; right: 14px; }
  .hx-intro-tagline { letter-spacing: 0.22em; }
  .hx-intro-bar { width: 180px; }
  #hx-intro-ring { inset: -22px; }
}