/* torpenhow.ai: a small split-T pulsing in white above the TORPENHOW TECHNOLOGIES wordmark in
   Michroma, both glowing over the colorful WebGL fluid (/fluid.js). The lockup is sized in the
   wordmark's own em, so the T keeps its proportion at every width. Every pointer event passes
   through to the fluid. */
@font-face {
  font-family: "Display";
  src: url("/fonts/display.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --mark: #eceef4;
  --ink: #f5f7fc;
  --glow-core: rgb(255 255 255 / 0.55);
  --glow-mid: rgb(170 195 255 / 0.45);
  --glow-far: rgb(37 99 235 / 0.5);
}

* {
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #000;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

main {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

h1 {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The lockup's unit: everything below is in em of the wordmark size. */
  font-family: "Display", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 3.25rem);
  gap: 0.75em;
}

/* A soft dark pool behind the lockup: a bright splat drifting behind it dims instead of
   swallowing it, so the mark and wordmark always read. */
h1::before {
  content: "";
  position: absolute;
  inset: -60% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.35) 55%, transparent);
}

/* The T at about two cap-heights of the wordmark: present, but the name leads. */
svg {
  display: block;
  width: clamp(52px, 2em, 112px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 0.45)) drop-shadow(0 0 12px rgb(255 255 255 / 0.25));
  animation: pulse 3.2s ease-in-out infinite alternate;
}

path {
  fill: var(--mark);
}

@keyframes pulse {
  to {
    filter: drop-shadow(0 0 7px rgb(255 255 255 / 0.9)) drop-shadow(0 0 28px rgb(255 255 255 / 0.55));
  }
}

.wordmark {
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  text-shadow:
    0 0 0.08em var(--glow-core),
    0 0 0.3em var(--glow-mid),
    0 0 0.9em var(--glow-far);
  animation: breathe 5s ease-in-out infinite alternate;
  user-select: none;
}

.wordmark span {
  white-space: nowrap;
}

@keyframes breathe {
  to {
    text-shadow:
      0 0 0.1em var(--glow-core),
      0 0 0.45em var(--glow-mid),
      0 0 1.4em var(--glow-far);
  }
}

@media (prefers-reduced-motion: reduce) {
  svg,
  .wordmark {
    animation: none;
  }
}