/* nmnet.co.uk holding page — external stylesheet (CSP: default-src 'self') */

:root { --ease: cubic-bezier(0.22, 0.61, 0.36, 1); }

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-extrabold.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 6vmin 5vw;
  background: radial-gradient(ellipse 95% 75% at 50% 44%, #0f1a12 0%, #060a07 44%, #000 80%);
  overflow: hidden;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
               "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rotor {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.rotor::before {
  content: "";
  position: absolute;
  inset: -220% -25%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 60% at 50% 50%,
              rgba(47,208,106,0.26) 0%,
              rgba(23,176,80,0.11) 36%,
              transparent 70%);
  filter: blur(18px);
  animation: bloom 1.6s var(--ease) both;
}

.wordmark {
  font-size: clamp(3rem, 16vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;

  /* anodized emerald: light mint -> green -> deep, with a lower reflection */
  background: linear-gradient(174deg,
              #d6ffe0 0%,
              #7fe6a0 18%,
              #2fd06a 42%,
              #17b050 60%,
              #0a7a38 80%,
              #52e08a 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  animation:
    reveal 1.25s var(--ease) both,
    sheen 7.5s ease-in-out 1.25s infinite;
}

.wordmark .tld {
  background: linear-gradient(174deg,
              #a0d8b4 0%, #4f9e6a 42%, #2c6e42 70%, #7dbf95 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (orientation: portrait) {
  .rotor {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .wordmark { font-size: clamp(2.4rem, 13vh, 9rem); }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(10px); }
  to   { opacity: 1; transform: none;                          filter: blur(0);   }
}
@keyframes sheen {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes bloom {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .rotor::before { animation-duration: 0.01ms; animation-iteration-count: 1; }
  .wordmark { background-position: 30% 50%; }
}