/* ==========================================================================
   amerworks.studio
   A grainient field: the wordmark exists only as the void the light leaves.
   ========================================================================== */

@font-face {
  font-family: 'Syne';
  src: url('fonts/syne-latin-var.woff2') format('woff2-variations'),
       url('fonts/syne-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('fonts/martianmono-latin-var.woff2') format('woff2-variations'),
       url('fonts/martianmono-latin-var.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sampled from the reference frames. The field carries its own grade in the
     shader; these are only what the overlay type and chrome draw from. */
  --void:  #0b0712;
  --ember: #e4472b;
  --flare: #ff9448;
  --bone:  #f2ecee;

  --display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gutter: clamp(1.15rem, 3.4vw, 3.25rem);

  /* Shared by the frame's padding and the glass bar's bleed, so the bar lands
     flush to the viewport edge on notched screens too. */
  --pad-top: max(var(--gutter), env(safe-area-inset-top));
  --pad-bottom: max(var(--gutter), env(safe-area-inset-bottom));
  --pad-x: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));

  /* Dark halo that keeps overlay type readable across the whole grade */
  --halo: 0 0 1px rgba(8, 4, 10, .92), 0 0 9px rgba(8, 4, 10, .8), 0 0 30px rgba(8, 4, 10, .7);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--void);
}

body {
  overflow: hidden;
  color: var(--bone);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   The field
   -------------------------------------------------------------------------- */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Static fallback if WebGL is unavailable: one frame of the field, in CSS */
body.no-gl {
  background:
    radial-gradient(58% 34% at 30% 40%, rgba(255, 233, 206, .5), transparent 70%),
    radial-gradient(75% 45% at 62% 34%, rgba(255, 148, 72, .62), transparent 72%),
    radial-gradient(110% 62% at 45% 30%, rgba(228, 71, 43, .72), transparent 78%),
    linear-gradient(#e4472b 0%, #8c2418 26%, #2a0d16 58%, #0b0712 100%);
}
body.no-gl #field { display: none; }

/* Without the field there is nothing punching the name out of the light, so
   the real text steps forward — the same dark-on-glow read as the shader. */
body.no-gl .wordmark {
  color: #0b0712;
  text-shadow: 0 0 .5em rgba(255, 233, 206, .55), 0 0 1.4em rgba(255, 148, 72, .45);
}

/* Fine film grain sitting over everything, so overlay type belongs to the
   same emulsion as the field rather than floating on top of it. */
#grain {
  position: fixed;
  inset: -60px;
  z-index: 2;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Frame
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  min-height: 100%;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom) var(--pad-x);
}

/* Bottom scrim only — the top is handled by the progressive blur. This keeps
   the footer type readable when the field drifts bright down there. */
.frame::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(90px, 15vh, 190px);
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 4, 10, .58), rgba(8, 4, 10, 0));
}

/* --------------------------------------------------------------------------
   Progressive blur

   The field has no hard edge anywhere in it, so the header cannot introduce
   one. Rather than a pane with a border, the blur itself is masked so it
   fades out downward — the glass has no bottom edge, it just stops being
   glass. That keeps the top type readable without cutting the field in two.
   -------------------------------------------------------------------------- */

header.rail {
  position: relative;
  isolation: isolate;
}

header.rail::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--pad-top));
  left: calc(-1 * var(--pad-x));
  right: calc(-1 * var(--pad-x));
  bottom: calc(-1.9 * var(--gutter));
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(18, 8, 14, .5), rgba(18, 8, 14, .06));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
}

.rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rail p { margin: 0; }

.status,
.credit,
.year {
  font-size: clamp(.5rem, 1.5vw, .6rem);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #d6cbda;
  text-shadow: var(--halo);
}

.status {
  display: flex;
  align-items: center;
  gap: .75em;
}

.dot {
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0 rgba(228, 58, 49, .6);
  animation: pulse 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes pulse {
  0%       { box-shadow: 0 0 0 0 rgba(228, 58, 49, .55); }
  55%,100% { box-shadow: 0 0 0 .85em rgba(228, 58, 49, 0); }
}

.credit span { color: var(--bone); }

/* --------------------------------------------------------------------------
   Log in
   -------------------------------------------------------------------------- */

.login {
  display: inline-flex;
  align-items: center;
  gap: .95em;
  padding: .95em 1.35em;
  font-family: var(--mono);
  font-size: clamp(.5rem, 1.5vw, .6rem);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  color: var(--bone);
  background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border: 1px solid rgba(232, 222, 238, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(8, 4, 10, .3);
  transition: color .45s cubic-bezier(.4, 0, .2, 1),
              border-color .45s cubic-bezier(.4, 0, .2, 1),
              background-color .45s cubic-bezier(.4, 0, .2, 1);
}

/* Light travelling across the face — the one moment the chrome moves. */
.login::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-180%) skewX(-18deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 246, 240, .3),
    rgba(255, 255, 255, 0));
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}
.login:hover::after,
.login:focus-visible::after { transform: translateX(320%) skewX(-18deg); }

.login-arrow {
  overflow: visible;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.login-arrow path { transition: stroke .45s cubic-bezier(.4, 0, .2, 1); }

.login:hover,
.login:focus-visible {
  color: #fff;
  border-color: var(--ember);
  background: linear-gradient(rgba(228, 58, 49, .3), rgba(228, 58, 49, .14));
}
.login:hover .login-arrow,
.login:focus-visible .login-arrow { transform: translateX(4px); }
.login:hover .login-arrow path { stroke: var(--flare); }

.login:active { background: linear-gradient(rgba(228, 58, 49, .42), rgba(228, 58, 49, .24)); }

:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

/* The mark floats in the middle of the frame; the line sits low, down where
   the field has fallen to void and small type can hold its own. */
.stage {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: 0;
}

/* Real text for screen readers and crawlers. It reserves the exact layout box
   the field renders into, but the visible letterforms are punched out of the
   light by the shader rather than painted here. */
.wordmark {
  margin: 0;
  align-self: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 8rem;         /* replaced by field.js to fit the viewport exactly */
  line-height: .82;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-align: center;
  color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Nine characters across a phone leaves the mark too small to carry the page,
   so it stacks. field.js reads these spans' boxes, which keeps the field and
   the layout in agreement at any width. */
@media (max-width: 37.5rem) {
  .wordmark span { display: block; }
}

.lede {
  margin: 0 0 clamp(1.5rem, 7vh, 4.5rem);
  align-self: end;
  width: max-content;
  max-width: 100%;
  text-align: center;
  font-size: clamp(.62rem, 1.75vw, .78rem);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: .06em;
  color: var(--bone);
  text-shadow: var(--halo);
  opacity: 0;
  animation: settle 1.4s cubic-bezier(.16, 1, .3, 1) 1.15s forwards;
}

.rail > * {
  opacity: 0;
  animation: settle 1.2s cubic-bezier(.16, 1, .3, 1) 1.5s forwards;
}
footer.rail > * { animation-delay: 1.65s; }

@keyframes settle {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lede, .rail > * { animation: none; opacity: 1; transform: none; }
  .dot { animation: none; }
  .login, .login-arrow, .login-arrow path, .login::after { transition-duration: .01ms; }
}

@media (max-width: 34rem) {
  .lede { line-height: 1.75; }
  .login { padding: .85em 1.05em; gap: .75em; }
  .login-arrow { width: 15px; height: 9px; }
  .year { display: none; }
  footer.rail { justify-content: center; }
}

@media (prefers-contrast: more) {
  .login { background: rgba(8, 4, 10, .82); border-color: var(--bone); }
  .status, .credit, .year { color: var(--bone); }
  .frame::after { height: clamp(120px, 20vh, 240px); }
  header.rail::before { background: rgba(8, 4, 10, .88); }
}