@import "/static/css/common";

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #05000d;
  height: 100%;
  width: 100%;
  font-family: 'Courier New', monospace;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}

#hiveCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(1.12) contrast(1.08);
  touch-action: none;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, rgba(5,0,13,0) 35%, rgba(5,0,13,0.55) 75%, rgba(5,0,13,0.97) 100%);
}

#scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.4;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.center-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: safe center;
  overflow-y: auto;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(78, 20, 130, .05),
      transparent 98%
    ),
    rgba(2, 1, 12, .28);

  backdrop-filter: blur(1px);
  pointer-events: none;

  .wrapper {
    --card-width: 560px;
    --input-width: 100%;
    container: card / inline-size;

    position: relative;
    pointer-events: all;
    width: min(var(--card-width), calc(100vw - 32px));
    box-sizing: border-box;
    padding: 2px;
    margin: 6px;

    .content {
      text-align: center;
      position: relative;
      z-index: 1;
      padding: 28px 24px 24px;

      svg { width: 75%; }

      h2 {
        margin: 0;
        color: var(--text);
        font: 800 26px/1.2 system-ui, sans-serif;
        letter-spacing: -0.8px;
      }

      .message {
        margin-top: 28px;
        font: 800 clamp(22px, 6vw, 34px)/1.2 system-ui, sans-serif;
        letter-spacing: .04em;
        text-transform: uppercase;
      }

      .catchphrase {
        margin: 9px 0 38px;
        text-align: center;
        color: var(--muted);
        font-family: system-ui, sans-serif;
        font-size: clamp(10px, 3.2cqi, 16px);
      }

      .text-input {
        position: relative;
        display: flex;
        width: min(100%, var(--input-width));
        box-sizing: border-box;
        padding: 1px;
        border-radius: 10px;
        background:
          linear-gradient(
            90deg,
            var(--cyan),
            var(--blue),
            var(--pink),
            var(--orange)
          );
        background-size: 300% 100%;
        animation: border-flow 6s linear infinite;
        box-shadow: 0 0 8px rgba(0, 234, 255, .25);

        &:focus-within {
          box-shadow:
            0 0 8px rgba(0, 234, 255, .7),
            0 0 25px rgba(255, 0, 212, .25);
        }

        input {
          flex: 1;
          min-width: 0;
          width: 100%;
          height: 50px;
          box-sizing: border-box;
          border: 0;
          outline: 0;
          border-radius: 9px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          padding: 0 16px;
          color: white;
          font: 600 15px/1 system-ui, sans-serif;

          background:
            repeating-linear-gradient(
              0deg,
              rgba(255,255,255,.015) 0px,
              rgba(255,255,255,.015) 1px,
              transparent 1px,
              transparent 4px
            ),
            #0b0723;

          box-shadow: inset 0 0 25px rgba(30, 60, 255, .08);

          &::placeholder { color: #514c70; }
          &:focus        { background-color: #0e092d; }
          &::selection   { background: var(--pink); color: white; }
        }

        .btn {
          flex: none;
          height: 50px;
          padding: 0 18px;
          margin-right: 1px;
          border: 0;
          border-radius: 0 8px 8px 0;
          cursor: pointer;

          font: 700 13px/1 system-ui, sans-serif;
          letter-spacing: .06em;
          text-transform: uppercase;
          color: #fff;

          background:
            linear-gradient(180deg, var(--cyan), var(--purple) 55%, var(--pink));

          box-shadow:
            0 0 10px rgba(139, 44, 255, .45),
            inset 0 1px rgba(255, 255, 255, .25),
            0 0 0 rgba(255, 0, 212, 0);

          text-shadow:
            0 1px 1px rgba(30, 0, 80, .5),
            0 0 8px  rgba(255, 255, 255, .35),
            0 0 18px rgba(139, 44, 255, .6);

          transition:
            box-shadow 200ms ease-in-out,
            text-shadow 200ms ease-in-out;

          &:hover {
            box-shadow:
              0 0 12px rgba(0, 234, 255, .4),
              inset 0 1px rgba(255, 255, 255, .25),
              0 0 25px rgba(255, 0, 212, .25);
            text-shadow:
              0 1px 1px rgba(30, 0, 80, .5),
              0 0 8px  rgba(255, 255, 255, .5),
              0 0 20px rgba(0, 234, 255, .6);
          }
        }

        @container flip (max-width: 420px) {
          flex-direction: column;

          input {
            border-radius: 9px 9px 0 0;
            line-height: 50px;
          }

          .btn {
            width: calc(100% - 2px);
            margin: 0 1px 1px;
            border-radius: 0 0 8px 8px;
          }
        }
      }
    }
  }
}

.neon {
  --neon: var(--pink);
  --neon-far: color-mix(in srgb, var(--neon) 55%, var(--purple));

  margin: 0;
  text-align: center;
  color: color-mix(in srgb, var(--neon) 18%, #fff);

  text-shadow:
    0 0 2px  #fff,
    0 0 6px  var(--neon),
    0 0 14px var(--neon),
    0 0 30px var(--neon),
    0 0 60px var(--neon-far),
    0 0 100px var(--neon-far);

  &.-error   { --neon: var(--pink);   animation: flicker 3.2s infinite; }
  &.-warning { --neon: var(--orange); animation: pulse 2.4s ease-in-out infinite; }
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55%                     { opacity: .35; }
}

@keyframes pulse {
  0%, 100% {
    text-shadow:
      0 0 2px #fff, 0 0 5px var(--neon),
      0 0 12px var(--neon), 0 0 24px var(--neon-far);
  }
  50% {
    text-shadow:
      0 0 2px #fff, 0 0 8px var(--neon),
      0 0 20px var(--neon), 0 0 44px var(--neon),
      0 0 80px var(--neon-far), 0 0 120px var(--neon-far);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon, .text-input { animation: none !important; }
}

.flip {
  container: flip / inline-size;
  perspective: 800px;
  width: 100%;
  min-width: 0;

  .inner {
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(.4, .2, .2, 1);

    .face {
      grid-area: 1 / 1;
      display: grid;
      place-items: center;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 8px;

      &.front {
        transition: visibility 0s 0.3s;
      }

      &.back {
        transform: rotateX(180deg);
        visibility: hidden;
        transition: visibility 0s 0.3s;
      }
    }
  }

  &.-flipped {
    .inner { transform: rotateX(180deg); }
    .inner .face.front { visibility: hidden; }
    .inner .face.back  { visibility: visible; }
  }
}

@keyframes border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.home-nav,
.home-footer {
  position: fixed;
  z-index: 10;
  display: flex;
  gap: 18px;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;

  a {
    color: var(--muted);
    text-decoration: none;
    transition: color .15s ease, text-shadow .15s ease;
  }

  a:hover {
    color: var(--cyan);
    text-shadow: 0 0 8px var(--cyan);
  }
}

.home-nav {
  top: max(16px, env(safe-area-inset-top));
  right: 20px;

  a { color: var(--text); padding: 8px 4px; }
}

.home-footer {
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  justify-content: center;
}


.center-backdrop .content {
  .lock-step,
  .lock-status,
  .lock-text {
    margin: 8px 0 0;
    color: var(--muted);
    font: 14px/1.5 system-ui, sans-serif;
  }

  .lock-text { margin-bottom: 20px; color: var(--text); }
  .lock-text strong { color: #fff; }
  .lock-status { margin-top: 20px; }
  .lock-flash { margin: 14px 0 0; font: 700 14px/1.4 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
  .lock-form { margin-top: 24px; }
  .lock-question { margin: 18px 0 8px; text-align: left; font: 600 15px/1.4 system-ui, sans-serif; }
  .lock-submit { margin-top: 20px; }

  .text-input.solo input { border-radius: 9px; }
}