/* Verus.deals. One screen: the lockup on black, lit by the cursor.
   Lockup proportions come from lockup.css (measured from the logo file), so everything
   scales together from one value, the wordmark width. */

:root {
  color-scheme: dark;
  --silver: 214 218 228;                                     /* the wordmark's mid tone */
  --lockup-w: min(clamp(260px, 54vw, 680px), 150vh);        /* wordmark width; the one number the layout hangs on */
  --wordmark-size: calc(var(--lockup-w) * var(--lk-wordmark-font-size));
  --descriptor-size: max(0.72rem, calc(var(--wordmark-size) * var(--lk-descriptor-em)));   /* spec: 11px at a 72px wordmark */
  --invite-size: max(0.66rem, calc(var(--descriptor-size) * 0.72));
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html, body { height: 100%; }
html { background: #000; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #000;
  color: rgb(var(--silver));
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding-bottom: 6vh;                                        /* sits a touch above centre; the footer holds the bottom */
}

.hero { display: flex; flex-direction: column; align-items: center; }

.lockup {
  position: relative;
  width: calc(var(--lockup-w) * var(--lk-canvas-w));
  aspect-ratio: var(--lk-canvas-w) / var(--lk-canvas-h);
  min-height: 0;                                              /* the box follows the ratio, never the canvas's own size */
  margin-bottom: calc(var(--lockup-w) * 0.034);               /* the descriptor hangs just below the canvas */
}
#logo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* The lockup's descriptor, set exactly as the brand spec has it and where the logo file has it. */
.descriptor {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--lockup-w) * (var(--lk-descriptor-cap-top) - var(--lk-canvas-y0)) - var(--lk-descriptor-cap-offset));
  margin: 0;
  text-align: center;
  font-size: var(--descriptor-size);
  line-height: 1;
  letter-spacing: var(--lk-descriptor-ls);
  text-indent: var(--lk-descriptor-ls);                       /* spec: balances the trailing letter-space so the ink is centred */
  text-transform: uppercase;
  color: #fff;                                                /* spec: white on black */
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
html.intro-descriptor .descriptor { opacity: 1; }

/* A separate line, quieter than the logo, with a clear pause above it. */
.invite {
  margin: calc(var(--lockup-w) * 0.105) 0 0;
  font-size: var(--invite-size);
  line-height: 1;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: rgb(var(--silver) / 0.62);
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out);
}
html.intro-invite .invite { opacity: 1; transform: none; }

.foot {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(1.6rem + env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--silver) / 0.36);
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
html.intro-footer .foot { opacity: 1; }
.foot a {
  color: rgb(var(--silver) / 0.55);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}
.foot a:hover { color: #fff; }
.foot a:active { color: #fff; transition: none; }              /* feedback on the press, instantly */
.foot a:focus-visible { outline: 1px solid rgb(var(--silver) / 0.8); outline-offset: 4px; border-radius: 2px; }

/* Static lockup, used only when WebGL is unavailable: the brand spec's own CSS lockup. */
.lockup-static { display: none; position: absolute; inset: 0; }
html.no-webgl .lockup-static { display: block; }
html.no-webgl #logo, html.no-webgl #bg { display: none; }
.static-wordmark {
  position: absolute;
  left: calc((0 - var(--lk-canvas-x0)) / var(--lk-canvas-w) * 100%);
  top: calc(var(--lockup-w) * (0 - var(--lk-canvas-y0)) - var(--lk-wordmark-cap-offset));
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-weight: 500;
  font-size: var(--wordmark-size);
  line-height: 1;
  letter-spacing: var(--lk-wordmark-ls);
  white-space: nowrap;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 12%, #C3C8D2 30%, #FFFFFF 45%, #FFFFFF 51%, #DDE1E8 58%, #A3A9B4 74%, #E7E9EE 88%, #FFFFFF 100%);
  background-size: 100% 170%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.static-rule {
  position: absolute;
  top: calc((var(--lk-rule-y) - var(--lk-canvas-y0)) / var(--lk-canvas-h) * 100%);
  height: max(1px, calc(var(--lockup-w) * var(--lk-rule-thickness)));
  transform: translateY(-50%);
  background: #fff;
}
.static-rule-left {
  left: calc((var(--lk-rule-l0) - var(--lk-canvas-x0)) / var(--lk-canvas-w) * 100%);
  width: calc((var(--lk-rule-l1) - var(--lk-rule-l0)) / var(--lk-canvas-w) * 100%);
}
.static-rule-right {
  left: calc((var(--lk-rule-r0) - var(--lk-canvas-x0)) / var(--lk-canvas-w) * 100%);
  width: calc((var(--lk-rule-r1) - var(--lk-rule-r0)) / var(--lk-canvas-w) * 100%);
}
.static-diamond {
  position: absolute;
  left: calc((var(--lk-diamond-cx) - var(--lk-canvas-x0)) / var(--lk-canvas-w) * 100%);
  top: calc((var(--lk-diamond-cy) - var(--lk-canvas-y0)) / var(--lk-canvas-h) * 100%);
  width: calc(var(--lockup-w) * var(--lk-diamond-r) * 1.41421);
  height: calc(var(--lockup-w) * var(--lk-diamond-r) * 1.41421);
  transform: translate(-50%, -50%) rotate(45deg);
  background-image:
    linear-gradient(135deg, transparent 42%, #FFFFFF 47% 53%, transparent 58%),
    conic-gradient(from 45deg, #E7E9EE 0deg 90deg, #9EA4AF 90deg 180deg, #F7F9FB 180deg 270deg, #B4B9C2 270deg 360deg);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: the same reveal as a plain cross-fade. Reduced transparency and high contrast: solid text. */
@media (prefers-reduced-motion: reduce) {
  .invite { transform: none; transition: opacity 500ms ease; }
  .descriptor, .foot { transition: opacity 500ms ease; }
  .foot a { transition: none; }
}
@media (prefers-contrast: more) {
  .invite { color: #fff; }
  .foot, .foot a { color: rgb(var(--silver) / 0.9); }
}