/* OPST — Operational Streamlining · corporate surface (dev.opst.com) */

:root {
  --bg: #07070c;
  --fg: #ECECF5;
  --muted: #8A8AA8;
  --a1: #6366F1; /* indigo */
  --a2: #22D3EE; /* cyan   */
  --a3: #A855F7; /* violet */
}

/* Registered, animatable brand colors — let the gradient *colors* pulse
   directly (no filter, so the clipped text stays crisp). inherits:true so the
   wordmark AND the OP/ST highlights share one pulse, driven from .brand. */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #6366F1; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #22D3EE; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #A855F7; }

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

body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* slow-drifting aurora */
.aurora {
  position: fixed; inset: -25%;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(99, 102, 241, .55), transparent 62%),
    radial-gradient(34% 34% at 80% 22%, rgba(34, 211, 238, .45), transparent 62%),
    radial-gradient(46% 46% at 62% 82%, rgba(168, 85, 247, .45), transparent 62%);
  filter: blur(64px);
  animation: drift 22s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.18); }
}

/* faint, vignetted tech grid */
.grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 72%);
  z-index: 0;
}

.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  text-align: center; padding: 6vw 2rem;
  z-index: 1;
}

/* entrance + the shared color pulse (drives --c1/--c2/--c3 for mark & highlights) */
.brand {
  animation: rise 1s cubic-bezier(.2, .8, .2, 1) both,
             pulse 6s ease-in-out infinite alternate;
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pulse {
  from { --c1: #6366F1; --c2: #22D3EE; --c3: #A855F7; } /* base    */
  to   { --c1: #818CF8; --c2: #67E8F9; --c3: #C084FC; } /* brighter */
}

/* OPST — the wordmark (abbreviation as brand mark). Colors pulse in place. */
.mark {
  font-weight: 800;
  font-size: clamp(4rem, 17vw, 11rem);
  letter-spacing: -.05em;
  line-height: .9;
  background: linear-gradient(120deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Operational Streamlining — the name; OP + ST take the brand gradient to
   spell OPST and tie back to the wordmark. */
.name {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 4.4vw, 2.1rem);
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #C9C9E0;
  padding-left: .34em; /* optical centering for tracked uppercase */
}
.name .hl {
  font-weight: 600;
  background: linear-gradient(120deg, var(--c1), var(--c3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.rule {
  width: 0; height: 1px; margin: 2.2rem auto 0;
  background: linear-gradient(90deg, transparent, var(--a2), transparent);
  animation: grow 1.4s .5s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes grow { to { width: min(280px, 62vw); } }

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  .brand { animation: none; opacity: 1; }
  .rule { animation: none; width: min(280px, 62vw); }
}