/* Beis Group holding page. Colors from the Beis Group palette:
   Navy #003E72, Royal #1E57B7, Steel #4884C3, Sky #7CB7FF. */

@font-face {
  font-family: "BG Web Sans";
  src: url("assets/fonts/bg-web-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #020814;
  --ink: #d9e8ff;
  --ink-bright: #eaf3ff;
  --sky: #7cb7ff;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --logo-h: clamp(46px, 5.2vw, 84px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "BG Web Sans", Calibri, Carlito, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#scene,
.poster {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#scene {
  display: block;
  touch-action: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.gl #scene { opacity: 1; }

.poster {
  background: var(--bg) center bottom / cover no-repeat;
}
.no-gl .poster { background-image: url("assets/poster.jpg"); }
.no-gl #scene { display: none; }

/* ---------- logo and line ---------- */

.stage {
  position: fixed;
  left: 0;
  right: 0;
  top: 33%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--logo-h) * 0.62);
  padding: 0 24px;
  pointer-events: none;
  text-align: center;
}

.logo {
  margin: 0;
  display: flex;
  align-items: center;
  /* symbol, gap and wordmark in the proportions of the original logo (332 : 84 : 1335) */
  gap: calc(var(--logo-h) * 84 / 332);
  height: var(--logo-h);
}
.logo img {
  display: block;
  height: 100%;
  width: auto;
}
.line {
  margin: 0;
  font-size: clamp(12.5px, 0.5vw + 9.5px, 17px);
  font-weight: 400;
  /* --ls is set by app.js so the line is as wide as the logo */
  letter-spacing: var(--ls, 0.42em);
  margin-right: calc(var(--ls, 0.42em) * -1); /* keeps the tracked line optically centered */
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.contact {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom));
  text-align: center;
}
.contact a {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 10px 14px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--sky);
  text-decoration: none;
  text-shadow: 0 0 12px rgba(2, 8, 20, 0.9), 0 0 3px rgba(2, 8, 20, 0.9);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 50% calc(100% - 8px);
  background-repeat: no-repeat;
  transition: color 0.3s ease, background-size 0.4s var(--ease-out);
}
/* a soft dark shade under the email, no lighter than the planet's darkest tone: the planet's
   brightest points behind the text are dimmed to a tenth of their brightness, so the email keeps
   at least 4.5 : 1 contrast at all times; it fades out over its outer third */
.contact a::before {
  content: "";
  position: absolute;
  inset: -22px -48px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 2, 6, 0.9) 0%, rgba(0, 2, 6, 0.9) 66%, rgba(0, 2, 6, 0) 100%);
  pointer-events: none;
}
.contact a:hover,
.contact a:focus-visible {
  color: var(--ink-bright);
  background-size: calc(100% - 28px) 1px;
}
.contact a:focus-visible {
  outline: 1px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- reveal (only when JavaScript runs) ---------- */

.js .logo__symbol,
.js .logo__word,
.js .line,
.js .contact { opacity: 0; }

.go .logo__symbol { animation: symbol-in 2s var(--ease-out) 2s both; }
.go .logo__word { animation: word-in 0.5s var(--ease-out) 2.5s both; }
.go .line { animation: line-in 0.8s var(--ease-out) 2.95s both; }
.go .contact { animation: fade-in 1.6s ease 4s both; }

/* over the still image (no WebGL) there is no intro to wait for: same reveal, 1.7 s sooner */
.no-gl.go .logo__symbol { animation-delay: 0.3s; }
.no-gl.go .logo__word { animation-delay: 0.8s; }
.no-gl.go .line { animation-delay: 1.25s; }
.no-gl.go .contact { animation-delay: 2.3s; }

@keyframes symbol-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes word-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(calc(var(--logo-h) * -0.15)); }
  20% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes line-in {
  from { opacity: 0; letter-spacing: calc(var(--ls, 0.42em) + 0.3em); margin-right: calc(var(--ls, 0.42em) * -1 - 0.3em); filter: blur(6px); }
  to { opacity: 1; letter-spacing: var(--ls, 0.42em); margin-right: calc(var(--ls, 0.42em) * -1); filter: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- screen shapes ---------- */

@media (max-aspect-ratio: 17/20) {
  :root { --logo-h: clamp(40px, 10.5vw, 72px); }
  .stage { top: 27%; }
  .line { font-size: clamp(11.5px, 3vw, 15px); }
  /* a larger tap area for the email on phones (at least 48 px high) */
  .contact a { padding: 15px 22px; }
  /* the still image framed for upright screens */
  .no-gl .poster { background-image: url("assets/poster-portrait.jpg"); }
}

/* large screens: the email one step larger, in proportion to the logo */
@media (min-width: 1440px) {
  .contact a { font-size: 16px; }
}

/* very large screens (1954 px and wider, where 4.3vw reaches the 84 px cap): logo, line and email grow without a step */
@media (min-width: 1954px) {
  :root { --logo-h: clamp(84px, 4.3vw, 112px); }
  .line { font-size: calc(var(--logo-h) * 0.215); }
  .contact a { font-size: 18px; }
}

@media (max-height: 420px) and (min-aspect-ratio: 17/20) {
  :root { --logo-h: 40px; }
  .stage { top: 32%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .logo__symbol,
  .js .logo__word,
  .js .contact { opacity: 1; animation: none; }
  .js .line { opacity: 1; animation: none; }
  #scene { transition: none; }
}