/* The landing page: one mark, floating in the dark, over its own reflection.
   Everything here is CSS - no image files, so there is nothing to 404, nothing
   to wait on, and it stays sharp on any display. */

.landing {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 42%, #1a0b2e 0%, #0c0714 46%, var(--void) 100%);
  overflow: hidden;
  position: relative;
}

/* Two slow-drifting clouds of purple. The blur is what turns two circles into
   atmosphere; the drift keeps the page from looking like a screenshot. */
.fog {
  position: fixed;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 32% 40%, rgba(150, 50, 255, 0.20), transparent 70%),
    radial-gradient(34% 28% at 68% 58%, rgba(90, 30, 200, 0.16), transparent 70%);
  filter: blur(48px);
  animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

/* A whisper of noise over the top. Flat gradients on a dark page band badly on
   cheap panels; a little grain hides it completely. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 2rem;
}

/* -------------------------------------------------------------- the mark -- */

.mark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(46vw, 300px);
  aspect-ratio: 71 / 55;
  text-decoration: none;
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* The glow behind the glyph, rather than on it. A drop-shadow on the path alone
   traces the outline; a soft disc behind it lights the room. */
.halo {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 75, 255, 0.42) 0%, rgba(123, 31, 212, 0.16) 42%, transparent 68%);
  filter: blur(26px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.glyph {
  position: relative;
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--neon);
  stroke-width: 1.6;
  stroke-linejoin: round;
  /* Three shadows at increasing spread: the tight one is the tube, the wide
     ones are the light it throws. One shadow reads as a blur, three read as
     neon. */
  filter:
    drop-shadow(0 0 2px rgba(216, 150, 255, 0.95))
    drop-shadow(0 0 10px rgba(182, 75, 255, 0.75))
    drop-shadow(0 0 34px rgba(140, 40, 230, 0.55));
  transition: filter 320ms ease, stroke 320ms ease;
}

.mark:hover .glyph,
.mark:focus-visible .glyph {
  stroke: var(--neon-soft);
  filter:
    drop-shadow(0 0 3px rgba(235, 200, 255, 1))
    drop-shadow(0 0 16px rgba(200, 110, 255, 0.9))
    drop-shadow(0 0 54px rgba(160, 60, 255, 0.7));
}
.mark:hover .halo,
.mark:focus-visible .halo { opacity: 1; transform: scale(1.12); }

/* --------------------------------------------------------- the reflection - */

.reflection {
  width: min(46vw, 300px);
  margin-top: 1.4rem;
  transform: scaleY(-1);
  opacity: 0.22;
  filter: blur(3px);
  /* Fades out downward, so it reads as a reflection on a wet floor rather than
     a second copy of the logo. */
  -webkit-mask-image: linear-gradient(to top, transparent 8%, #000 92%);
  mask-image: linear-gradient(to top, transparent 8%, #000 92%);
  pointer-events: none;
}
.reflection .glyph { animation: shimmer 5.5s ease-in-out infinite; }

@keyframes shimmer {
  0%, 100% { opacity: 0.85; transform: scaleX(1); }
  50%      { opacity: 0.55; transform: scaleX(1.02); }
}

/* ------------------------------------------------------------- the whisper - */

/* Bottom left, and only just there. It brightens on hover so it is findable
   once you know, and it is a real link with real text, so a keyboard and a
   screen reader both get to it. */
.whisper {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #26263a;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  transition: color 260ms ease, text-shadow 260ms ease;
}
.whisper:hover,
.whisper:focus-visible {
  color: var(--neon-soft);
  text-shadow: 0 0 12px rgba(182, 75, 255, 0.7);
}

@media (max-width: 480px) {
  .mark, .reflection { width: 62vw; }
}