/* =========================================
   BLX88 — NEON X-DRIVE
   CYBERPUNK LANDING
========================================= */

:root {
  --bg: #050916;

  --cyberBlack: #070d1a;
  --cyberNavy: #081b2c;
  --cyberPurple: #1c092a;

  --cyan: #1aeaff;
  --blue: #087bff;
  --purple: #a044ff;
  --magenta: #ff2abb;

  --white: #ffffff;
}


/* =========================================
   RESET
========================================= */

* {
  box-sizing: border-box;
}

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

html {
  background: var(--bg);
}

body {
  margin: 0;

  background:
    radial-gradient(
      ellipse at 15% 20%,
      rgba(0, 174, 255, .12),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 85% 70%,
      rgba(255, 42, 187, .10),
      transparent 55%
    ),
    #050916;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


/* =========================================
   LANDING PAGE
========================================= */

.page {
  width: min(560px, 100%);

  min-height: 100vh;
  min-height: 100svh;

  margin: 0 auto;

  padding-bottom:
    calc(112px + env(safe-area-inset-bottom));

  background: #050916;

  box-shadow:
    0 0 75px rgba(0, 0, 0, .65);
}

.posterWrap {
  position: relative;

  width: 100%;
  overflow: hidden;

  background: #050916;
}

.posterImg {
  display: block;

  width: 100%;
  height: auto;

  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================
   NEON X-DRIVE CTA
========================================= */

.cta {
  position: fixed;

  left: 50%;

  bottom:
    calc(14px + env(safe-area-inset-bottom));

  width: min(520px, 92vw);
  height: 76px;

  z-index: 100;

  display: flex;

  padding: 2px;

  color: #ffffff;
  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  /*
    Cyber HUD — Cut Corners
  */

  clip-path: polygon(
    17px 0,
    100% 0,
    100% calc(100% - 17px),
    calc(100% - 17px) 100%,
    0 100%,
    0 17px
  );

  /*
    Neon Circuit Border
    Cyan → Blue → Purple → Magenta
  */

  background:
    linear-gradient(
      105deg,
      #1af2ff 0%,
      #087bff 32%,
      #a044ff 65%,
      #ff2abb 100%
    );

  filter:
    drop-shadow(
      0 0 7px rgba(26, 234, 255, .28)
    )
    drop-shadow(
      0 0 10px rgba(255, 42, 187, .18)
    );

  transform: translateX(-50%);

  isolation: isolate;

  animation:
    cyberPulse 4.5s ease-in-out infinite;

  transition:
    transform .18s ease,
    filter .18s ease;
}


/* =========================================
   CIRCUIT ENERGY LAYER
========================================= */

.cta::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.48),
      rgba(255,255,255,.08)
    );

  opacity: .12;

  pointer-events: none;

  animation:
    circuitGlow 4.5s ease-in-out infinite;
}


/* =========================================
   INNER PANEL
========================================= */

.ctaInner {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  width: 100%;
  height: 100%;

  padding: 7px 19px 7px 10px;

  overflow: hidden;

  clip-path: polygon(
    15px 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 15px
  );

  background:
    radial-gradient(
      120% 180% at 12% 0%,
      rgba(26, 234, 255, .14),
      transparent 48%
    ),

    radial-gradient(
      90% 150% at 100% 100%,
      rgba(255, 42, 187, .13),
      transparent 55%
    ),

    linear-gradient(
      110deg,
      #081b2c 0%,
      #080e1c 53%,
      #1c092a 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -5px 12px rgba(0,0,0,.35);
}


/* =========================================
   CYBER HUD INNER BORDER
========================================= */

.ctaInner::after {
  content: "";

  position: absolute;

  inset: 5px;

  z-index: 1;

  clip-path: polygon(
    11px 0,
    100% 0,
    100% calc(100% - 11px),
    calc(100% - 11px) 100%,
    0 100%,
    0 11px
  );

  border-top:
    1px solid rgba(26,234,255,.20);

  border-bottom:
    1px solid rgba(255,42,187,.20);

  pointer-events: none;
}


/* =========================================
   CYBER SCAN SWEEP
========================================= */

.ctaInner::before {
  content: "";

  position: absolute;

  top: -30%;
  bottom: -30%;

  left: -24%;

  width: 25%;

  z-index: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(26,234,255,.08) 18%,
      rgba(255,255,255,.68) 50%,
      rgba(255,42,187,.14) 78%,
      transparent 100%
    );

  transform:
    skewX(-20deg)
    translateX(-140%);

  opacity: 0;

  pointer-events: none;

  animation:
    cyberScan 4s ease-in-out infinite;
}


/* =========================================
   X ENERGY CORE
========================================= */

.xCore {
  position: relative;

  z-index: 2;

  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: grid;
  place-items: center;

  margin-right: 13px;

  padding: 2px;

  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );

  background:
    linear-gradient(
      135deg,
      #20f0ff,
      #087bff 45%,
      #a044ff 75%,
      #ff2abb
    );

  animation:
    xCorePower 4.5s ease-in-out infinite;
}


/* =========================================
   X SYMBOL
========================================= */

.xSymbol {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  clip-path: polygon(
    9px 0,
    100% 0,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    0 100%,
    0 9px
  );

  background:
    linear-gradient(
      145deg,
      #081b2b,
      #050a17 75%
    );

  color: #26f2ff;

  font-family:
    "Arial Black",
    Arial,
    sans-serif;

  font-size: 29px;
  font-weight: 900;

  font-style: italic;

  text-shadow:
    0 0 6px rgba(26,234,255,.85),
    0 0 15px rgba(26,234,255,.50),
    0 0 24px rgba(255,42,187,.25);
}


/* =========================================
   CTA TEXT
========================================= */

.ctaCopy {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  min-width: 0;

  line-height: 1.08;
}

.ctaCopy small {
  margin-bottom: 4px;

  color: #55d5eb;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: 1.5px;
}

.ctaCopy strong {
  color: #ffffff;

  font-size: 23px;
  font-weight: 950;

  letter-spacing: -.3px;

  text-shadow:
    0 2px 0 rgba(0,0,0,.55),
    0 0 12px rgba(26,234,255,.26);
}


/* =========================================
   CYBER ARROW
========================================= */

.ctaArrow {
  position: relative;

  z-index: 2;

  margin-left: auto;

  color: #ff40c5;

  font-size: 32px;
  font-weight: 800;

  line-height: 1;

  text-shadow:
    0 0 8px rgba(255,42,187,.65),
    0 0 16px rgba(255,42,187,.30);

  animation:
    cyberArrow 2.6s ease-in-out infinite;
}


/* =========================================
   ANIMATION — CYBER SCAN
========================================= */

@keyframes cyberScan {

  0%,
  18% {
    transform:
      skewX(-20deg)
      translateX(-140%);

    opacity: 0;
  }

  25% {
    opacity: .45;
  }

  42% {
    transform:
      skewX(-20deg)
      translateX(620%);

    opacity: .85;
  }

  50%,
  100% {
    transform:
      skewX(-20deg)
      translateX(620%);

    opacity: 0;
  }
}


/* =========================================
   ANIMATION — NEON CIRCUIT
========================================= */

@keyframes circuitGlow {

  0%,
  100% {
    opacity: .10;
  }

  35% {
    opacity: .38;
  }

  55% {
    opacity: .15;
  }
}


/* =========================================
   ANIMATION — X CORE ENERGY
========================================= */

@keyframes xCorePower {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  35% {
    transform: scale(1.07);
    filter: brightness(1.25);
  }

  48% {
    transform: scale(1.02);
    filter: brightness(1.05);
  }
}


/* =========================================
   ANIMATION — BUTTON PULSE
========================================= */

@keyframes cyberPulse {

  0%,
  100% {
    transform:
      translateX(-50%)
      scale(1);
  }

  38% {
    transform:
      translateX(-50%)
      scale(1.015);
  }

  55% {
    transform:
      translateX(-50%)
      scale(1);
  }
}


/* =========================================
   ANIMATION — ARROW
========================================= */

@keyframes cyberArrow {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}


/* =========================================
   INTERACTION
========================================= */

.cta:active {
  animation: none;

  transform:
    translateX(-50%)
    scale(.985);

  filter:
    brightness(1.15)
    drop-shadow(
      0 0 14px rgba(26,234,255,.35)
    )
    drop-shadow(
      0 0 15px rgba(255,42,187,.30)
    );
}

.cta:focus-visible {
  outline: 3px solid #1aeaff;
  outline-offset: 5px;
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .cta {
    width: 94vw;
    height: 70px;
  }

  .ctaInner {
    padding:
      6px 15px 6px 9px;
  }

  .xCore {
    width: 47px;
    height: 47px;

    flex-basis: 47px;

    margin-right: 11px;
  }

  .xSymbol {
    font-size: 26px;
  }

  .ctaCopy small {
    font-size: 8px;
  }

  .ctaCopy strong {
    font-size: 21px;
  }

  .ctaArrow {
    font-size: 28px;
  }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

  .cta,
  .cta::before,
  .ctaInner::before,
  .xCore,
  .ctaArrow {
    animation: none;
  }

  .cta {
    transform: translateX(-50%);
  }
}