/* ExperiProto — Experimental Prototype, Inc. · the holding page (Site:Mode=Placeholder) */

:root {
  --bg: #07070c;
  --fg: #ECECF5;
  --muted: #8A8AA8;
  --a1: #14B8A6; /* teal  */
  --a2: #A3E635; /* lime  */
  --a3: #F59E0B; /* amber */
}

/* 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 Experi/Proto highlights share one pulse, driven from .brand. */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #14B8A6; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #A3E635; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #F59E0B; }

* { 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(20, 184, 166, .50), transparent 62%),
    radial-gradient(34% 34% at 80% 22%, rgba(163, 230, 53, .35), transparent 62%),
    radial-gradient(46% 46% at 62% 82%, rgba(245, 158, 11, .40), 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: #14B8A6; --c2: #A3E635; --c3: #F59E0B; } /* base    */
  to   { --c1: #2DD4BF; --c2: #BEF264; --c3: #FBBF24; } /* brighter */
}

/* ExperiProto — the wordmark. Eleven letters, so it is set smaller than a short
   abbreviation would be: it fits a phone's width at 12vw. Colors pulse in place. */
.mark {
  font-weight: 800;
  font-size: clamp(2.75rem, 12vw, 8rem);
  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;
}

/* Experimental Prototype, Inc. — the name; Experi + Proto take the brand
   gradient to spell the mark and tie back to it. */
.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); } }

/* The one line under the rule — the office's city. */
.place {
  margin-top: 1.4rem;
  font-size: clamp(.8rem, 2.6vw, 1rem);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: .28em; /* optical centering for tracked uppercase */
}

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