/* rempace intro — the front door: one screen split into the two worlds of Rempace.
   Development (the metaballs of rempace.com) beside Business (attention turning into revenue),
   with the Rempace logo on the seam. Same visual language as the two sites; the shared pieces
   (tokens, pill, EN button) are copied from their styles.css unchanged. */

:root {
  --bg: #000;
  --fg: #fff;
  --muted: #7d8490;
  --soft: #d4d4d8;
  --pill-border: #9ca3af;
  --accent: #6200ff;
  --violet-2: #b266ff;
  --violet-3: #e066ff;
  --gutter: 24px;   /* the same side margins as the two sites: 24 / 28 / 32 / 48 px */
  --maxw: 1200px;   /* content width */
  --wrap: max(var(--gutter), calc((100% - var(--maxw)) / 2));   /* side padding that lines things up with the content */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
@media (min-width: 375px) { :root { --gutter: 28px; } }
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared pieces (as on the two sites) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 32px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  white-space: nowrap;   /* a label never breaks onto two lines; with too little room the whole button moves down */
  transition: transform .35s var(--ease-back), background-color .3s;
}
@media (hover: hover) { .pill:hover { transform: scale(1.05); background: rgba(255, 255, 255, .05); } }
.pill .arrow { transition: transform .3s var(--ease-out); }

.lang {
  position: fixed;
  top: 16px;
  right: var(--wrap);
  z-index: 60;
  padding: 8px 16px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 14px;
  font-weight: 500;
  transition: transform .25s var(--ease-back), background-color .25s;
}
@media (hover: hover) { .lang:hover { background: rgba(0, 0, 0, .4); transform: scale(1.05); } }
.lang:active { transform: scale(.95); }
@media (max-width: 767px) { .lang { position: absolute; } }   /* on phones it stays at the top instead of covering content */
@media (min-width: 1024px) { .lang { top: 24px; } }

/* ---------- The split: Development | Business ---------- */
.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100svh;
}
.split::before {   /* the seam between the two worlds */
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .14) 22%, rgba(178, 102, 255, .7) 50%, rgba(255, 255, 255, .14) 78%, transparent);
  pointer-events: none;
}

.side {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 112px var(--gutter) 104px;
  overflow: hidden;
  text-align: center;
  container-type: inline-size;
  outline-offset: -14px;
}

.side__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.side__art canvas { width: 100%; height: 100%; opacity: .75; transition: opacity .6s ease; }
.side__art.no-webgl {   /* without WebGL the logo stands in for the metaballs, as on the sites */
  background: url("assets/logo.webp") center / min(70%, 520px) no-repeat;
  opacity: .25;
}
.side__art::after {   /* keeps the words readable over the motion */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .5) 55%, transparent);
  background-size: 96% 64%;
  background-position: center;
  background-repeat: no-repeat;
}

.side__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: opacity .5s ease;
}
.side__brand {
  margin-right: -.42em;   /* the tracking would push the word off-centre */
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--soft);
}
.side__word {
  display: block;
  margin: -4px 0 -.1em;
  padding: 0 .06em .1em;   /* the gradient also covers the tail of the "p" and the edges of the letters */
  font-size: clamp(52px, 8vw, 164px);
  font-size: clamp(52px, 17cqi, 164px);   /* "development" fills most of its half on every screen */
  line-height: .95;
  letter-spacing: -.045em;
  background: linear-gradient(to bottom right, #fff 35%, var(--violet-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter .5s ease;
}
.side__line { max-width: 22ch; font-size: 18px; line-height: 1.35; color: #e4e4e7; text-wrap: balance; }
.side__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
  max-width: 44ch;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9a9fab;
}
.side__tags > span { white-space: nowrap; }
.side__tags > span::before {   /* each item carries its own dot */
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--violet-2);
  vertical-align: middle;
}
.side__go { margin-top: 10px; }
@media (min-width: 1024px) {
  .side__inner { gap: 22px; }
  .side__line { font-size: 22px; }
  .side__tags { font-size: 12px; }
}

.hub {   /* Rempace in the middle: both divisions come from here */
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 1px solid rgba(156, 163, 175, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  pointer-events: none;
}
.hub img { width: 62%; }
.hub::before {   /* a light running round the ring */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(transparent 0 60%, var(--violet-2) 80%, #fff 86%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: spin 6s linear infinite;
}

/* Pointer: the side under the mouse lights up, the other one steps back */
@media (hover: hover) {
  .split:hover .side:not(:hover) .side__inner { opacity: .35; }
  .split:hover .side:not(:hover) canvas { opacity: .22; }
  .side:hover canvas { opacity: 1; }
  .side:hover .side__word { filter: drop-shadow(0 0 36px rgba(178, 102, 255, .45)); }
  .side:hover .pill { transform: scale(1.05); background: rgba(255, 255, 255, .05); }
  .side:hover .arrow { transform: translateX(4px); }
}

/* Touch: a short press instead of hover */
@media (hover: none) {
  html { -webkit-tap-highlight-color: transparent; }
  .side:active .side__inner { transform: scale(.98); transition: transform .2s ease; }
  .side:active canvas { opacity: 1; }
  .foot__gdpr:active { transform: scale(.97); }
}

/* Phones: Development on top, Business below, the logo on the seam between them */
@media (max-width: 767px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: max(100svh, 620px); }
  .split::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .14) 22%, rgba(178, 102, 255, .7) 50%, rgba(255, 255, 255, .14) 78%, transparent);
  }
  .side { padding: 64px var(--gutter) 52px; }
  .side--biz { padding-bottom: 72px; }   /* room for the footer */
  .side__inner { gap: 12px; }
  .side__line { font-size: 16px; }
  .side__go { margin-top: 6px; }
  .hub { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
@media (max-width: 767px) and (max-height: 760px) {   /* short phones: the essentials only, both halves on one screen */
  .side__tags { display: none; }
  .side { padding-top: 52px; padding-bottom: 40px; }
  .side--biz { padding-bottom: 60px; }
}

/* Tablets upright: narrow halves, so the words keep clear of the logo on the seam */
@media (min-width: 768px) and (max-width: 1023px) {
  .side { padding-inline: 48px; }
  .hub { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}

/* ---------- Footer over the bottom corners ---------- */
.foot {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--wrap) max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.foot > * { pointer-events: auto; }
.foot__copy { font-size: 12px; color: rgba(255, 255, 255, .6); }
.foot__gdpr { padding: 8px 16px; border-radius: 8px; font-size: 14px; color: rgba(255, 255, 255, .8); transition: background-color .2s, transform .25s var(--ease-back); }
@media (hover: hover) { .foot__gdpr:hover { background: #262626; } }

/* ---------- Arrival ---------- */
html.js .side__art { animation: fade-in 1.8s ease .2s backwards; }
html.js .side__brand, html.js .side__line, html.js .side__tags, html.js .side__go { animation: rise-in .9s var(--ease-out) backwards; }
html.js .side__word { animation: word-in 1.3s var(--ease-out) backwards; }
html.js .side--dev .side__brand { animation-delay: .1s; }
html.js .side--dev .side__word { animation-delay: .2s; }
html.js .side--dev .side__line { animation-delay: .55s; }
html.js .side--dev .side__tags { animation-delay: .65s; }
html.js .side--dev .side__go { animation-delay: .75s; }
html.js .side--biz .side__brand { animation-delay: .25s; }
html.js .side--biz .side__word { animation-delay: .35s; }
html.js .side--biz .side__line { animation-delay: .7s; }
html.js .side--biz .side__tags { animation-delay: .8s; }
html.js .side--biz .side__go { animation-delay: .9s; }
html.js .hub { animation: hub-in .9s var(--ease-back) .45s backwards; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } }
@keyframes word-in { from { opacity: 0; filter: blur(18px); letter-spacing: .12em; } }
@keyframes hub-in { from { opacity: 0; transform: scale(.4); } }
@keyframes spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}