/* Local font. */
@font-face {
  font-family: "Space Grotesk Local";
  src: url("./fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: block;
}

/* Base reset. */
* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  background: #000;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Fullscreen centered stage with 3D perspective. */
.page {
  min-height: 100vh;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));

  display: flex;
  align-items: center;
  justify-content: center;

  perspective: 900px;
}

/* Main interactive logo object. */
.signal-logo {
  position: relative;
  margin: 0;

  font-family: "Space Grotesk Local", Arial, sans-serif;
  font-size: clamp(48px, 10vw, 160px);
  font-weight: 2400;
  line-height: 1;

  color: #fff;
  text-align: center;
  letter-spacing: -1px;

  opacity: 0;

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  transform-style: preserve-3d;

  transform:
    rotateX(var(--logo-rotate-x, 0deg))
    rotateY(var(--logo-rotate-y, 0deg))
    scaleY(var(--logo-height-scale, 1));

  transition:
    opacity 0.2s ease,
    transform 0.18s ease-out;

  will-change: transform;
}

/* Show logo only after font loading. */
.fonts-ready .signal-logo {
  opacity: 1;
}

/* Shared layout for generated text layers. */
.logo-layer {
  display: inline-flex;
  white-space: nowrap;
  align-items: baseline;
}

/* Front face. */
.logo-front {
  position: relative;
  color: #fc1380;
  transform: translateZ(0);
  z-index: 10;
}

/* Back depth layers. */
.logo-depth {
  position: absolute;
  inset: 0;
  opacity: 0.75;

  /* color: #39ff74; */
  color: #fc1380;
  pointer-events: none;
}

/* Z-depth stack. */
.depth-1 {
  color: #86f7ff;
  transform: translateZ(-4px);
}

.depth-2 {
  color: #86f7ff;
  transform: translateZ(-8px);
}

.depth-3 {
  color: #86f7ff;
  transform: translateZ(-12px);
}

.depth-4 {
  color: #86f7ff;
  transform: translateZ(-16px);
}

.depth-5 {
  color: #86f7ff;
  transform: translateZ(-20px);
}

.depth-6 {
  color: #86f7ff;
  transform: translateZ(-24px);
}

/* Individual letter unit for glitch distortion. */
.logo-letter {
  display: inline-block;
  transform-origin: center center;

  transform:
    translate(
      var(--letter-x, 0px),
      var(--letter-y, 0px)
    )
    scale(
      var(--letter-scale-x, 1),
      var(--letter-scale-y, 1)
    )
    skewX(var(--letter-skew-x, 0deg));

  transition: transform 0.08s steps(2, end);

  will-change: transform;
}

/* Random temporary letter highlight during glitch. */
.logo-letter.is-strong {
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.75),
    0 0 8px rgba(255, 32, 136, 0.45);
}

/* Slow vertical floating animation. */
.logo-float {
  position: relative;
  max-width: 100%;
  animation: logoFloat 6.2s ease-in-out infinite;
  transform: translateY(0);
  will-change: transform;
}

/* Horizontal interference layer. */
.logo-noise {
  position: absolute;
  inset: 0;

  pointer-events: none;
  transform-style: preserve-3d;
}

/* First horizontal interference layer. */
.noise-a {
  z-index: 20;
}

/* Second horizontal interference layer. */
.noise-b {
  z-index: 21;
}

/* Shared generated horizontal interference slice. */
.noise-slice {
  position: absolute;
  inset: 0;

  font-family: "Space Grotesk Local", Arial, sans-serif;
  font-size: clamp(48px, 10vw, 160px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  white-space: nowrap;

  opacity: 0;

  transform:
    translateX(var(--slice-x, 0px))
    translateY(var(--slice-y, 0px))
    scaleY(var(--logo-height-scale, 1))
    skewX(var(--slice-skew, 0deg));

  clip-path: inset(
    var(--slice-top, 0%)
    0
    var(--slice-bottom, 100%)
    0
  );

  will-change: transform, opacity, clip-path;
}

/* First interference style. */
.noise-slice-a {
  /* color: #fc1380; */
  color: #ff0077;


  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.28),
    0 0 8px rgba(252, 19, 128, 0.24);
}

/* Second interference style. */
.noise-slice-b {
  color: #86f7ff;

  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.28),
    0 0 8px rgba(252, 19, 128, 0.24);
}

/* Small mobile screens. */
@media (max-width: 420px) {
  .signal-logo,
  .noise-slice {
    font-size: clamp(34px, 9.6vw, 48px);
    letter-spacing: -0.6px;
  }
}

/* Landscape phones. */
@media (max-height: 430px) and (orientation: landscape) {
  .page {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .signal-logo,
  .noise-slice {
    font-size: clamp(32px, 8vw, 72px);
  }
}

@keyframes logoFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-28px);
  }

  100% {
    transform: translateY(0);
  }
}