/* OSY - coming soon page for /staging. Tokens from CLIENTS/Osy-Group/DESIGN.md; spacing = the Marbl scale. */

@font-face {
  font-family: "Inter Tight";
  src: url("inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --osy-navy: #2B3990;
  --osy-cyan: #29AAE1;
  --osy-green: #2FB67C;
  --osy-deep: #0B1433;
  --osy-paper: #FFFFFF;
  --osy-on-deep-soft: #A9B3D6;
  --osy-line-on-deep: rgba(255, 255, 255, 0.12);

  --gap-tight: 6px;
  --gap-2xs: 8px;
  --gap-xs: 10px;
  --gap-sm: 20px;
  --gap-md: 40px;
  --gap-xl: 80px;

  --shell-max: 1400px;
  --shell-pad: 40px;
  --rounded-full: 100px;

  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-title: clamp(40px, 1.4rem + 3.6vw, 80px);
  --text-lede: 20px;
  --text-sm: 16px;
  --text-label: 12px;
  --logo-width: 170px;
  --mark-size: 600px;

  --button-height: 52px;
  --circle-size: 40px;
  --light-size: 60vmax;
  --light-blur: 80px;
  --mote-size: 6px;
  --peaks-height: 60px;
  --rise: 20px;
  --focus-offset: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background: var(--osy-deep);
  color: var(--osy-paper);
  font-family: var(--font);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-x: clip;
  position: relative;
  isolation: isolate;
}

p { margin: 0; text-wrap: pretty; }

.cs-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* The light in the dark: blurred radial colour, never a flat fill. */
.cs-lights {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.cs-light {
  position: absolute;
  width: var(--light-size);
  height: var(--light-size);
  border-radius: var(--rounded-full);
  filter: blur(var(--light-blur));
  opacity: 0.4;
  will-change: transform;
}

.cs-light--cyan {
  background: radial-gradient(circle, var(--osy-cyan), transparent 60%);
  top: -30vmax;
  right: -20vmax;
  animation: cs-drift-a 24s var(--ease) infinite alternate;
}

.cs-light--blue {
  background: radial-gradient(circle, var(--osy-navy), transparent 60%);
  bottom: -30vmax;
  left: -20vmax;
  opacity: 0.8;
  animation: cs-drift-b 30s var(--ease) infinite alternate;
}

.cs-light--green {
  background: radial-gradient(circle, var(--osy-green), transparent 60%);
  bottom: -40vmax;
  right: 10vmax;
  opacity: 0.2;
  animation: cs-drift-c 36s var(--ease) infinite alternate;
}

@keyframes cs-drift-a { to { transform: translate(-10vmax, 8vmax) scale(1.1); } }
@keyframes cs-drift-b { to { transform: translate(8vmax, -6vmax) scale(1.2); } }
@keyframes cs-drift-c { to { transform: translate(-12vmax, -8vmax) scale(0.9); } }

.cs-header { padding-block: var(--gap-md); }

.cs-logo { display: block; width: var(--logo-width); height: auto; }

.cs-main {
  position: relative;
  display: grid;
  align-items: center;
  padding-block: var(--gap-md) var(--gap-xl);
}

/* Their ring mark, large and quiet, balancing the copy on wide screens. */
.cs-mark {
  position: absolute;
  top: 50%;
  right: calc(var(--shell-pad) * 2);
  width: var(--mark-size);
  height: var(--mark-size);
  margin-top: calc(var(--mark-size) / -2);
  opacity: 0.2;
  animation: cs-turn 120s linear infinite;
  display: none;
}

@keyframes cs-turn { to { transform: rotate(360deg); } }

@media (min-width: 1200px) { .cs-mark { display: block; } }

.cs-main__inner > * {
  opacity: 0;
  transform: translateY(var(--rise));
  animation: cs-rise 1s var(--ease) forwards;
}
.cs-main__inner > :nth-child(2) { animation-delay: 0.1s; }
.cs-main__inner > :nth-child(3) { animation-delay: 0.2s; }
.cs-main__inner > :nth-child(4) { animation-delay: 0.3s; }

@keyframes cs-rise { to { opacity: 1; transform: none; } }

.cs-label {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--osy-on-deep-soft);
  margin-bottom: var(--gap-sm);
}

.cs-label__dot {
  width: var(--gap-2xs);
  height: var(--gap-2xs);
  border-radius: var(--rounded-full);
  background: var(--osy-green);
  animation: cs-pulse 2s ease-in-out infinite;
}

@keyframes cs-pulse { 50% { opacity: 0.4; } }

.cs-title {
  margin: 0 0 var(--gap-sm);
  max-width: 16ch;
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 1;
  text-wrap: balance;
}

.cs-lede {
  max-width: 44ch;
  font-size: var(--text-lede);
  color: var(--osy-on-deep-soft);
  margin-bottom: var(--gap-md);
}

.cs-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.cs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  height: var(--button-height);
  padding-inline: var(--gap-sm) var(--gap-tight);
  border-radius: var(--rounded-full);
  background: var(--osy-paper);
  color: var(--osy-navy);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}

.cs-button__text { padding-left: var(--gap-2xs); }

.cs-button__circle {
  display: grid;
  place-items: center;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: var(--rounded-full);
  background: var(--osy-navy);
  color: var(--osy-paper);
}

/* The arrow turns; the circle never moves. */
.cs-button__arrow { transition: transform 0.4s var(--ease); }
.cs-button:hover .cs-button__arrow,
.cs-button:focus-visible .cs-button__arrow { transform: rotate(45deg); }

.cs-button:focus-visible {
  outline: 2px solid var(--osy-cyan);
  outline-offset: var(--focus-offset);
}

.cs-button:active { background: var(--osy-on-deep-soft); }

.cs-note { color: var(--osy-on-deep-soft); }

/* The surface: a textured line the motes drift above and never settle on. */
.cs-surface {
  position: relative;
  height: var(--gap-xl);
  display: flex;
  align-items: flex-end;
  opacity: 0.6;
}

.cs-surface__peaks { display: block; height: var(--peaks-height); }
.cs-peaks__line { stroke: url(#cs-peaks-ink); }
.cs-peaks__stop-a { stop-color: var(--osy-cyan); }
.cs-peaks__stop-b { stop-color: var(--osy-green); }

.cs-mote {
  position: absolute;
  bottom: var(--peaks-height);
  width: var(--mote-size);
  height: var(--mote-size);
  border-radius: var(--rounded-full);
  background: var(--osy-paper);
  opacity: 0.6;
  animation: cs-float 8s ease-in-out infinite alternate;
}

.cs-mote--1 { left: 12%; animation-duration: 7s; }
.cs-mote--2 { left: 31%; animation-duration: 9s; animation-delay: -2s; }
.cs-mote--3 { left: 54%; animation-duration: 8s; animation-delay: -4s; }
.cs-mote--4 { left: 73%; animation-duration: 10s; animation-delay: -1s; }
.cs-mote--5 { left: 90%; animation-duration: 7s; animation-delay: -3s; }

@keyframes cs-float {
  from { transform: translate(0, calc(var(--gap-tight) * -1)); }
  to { transform: translate(var(--gap-sm), calc(var(--gap-sm) * -1)); }
}

.cs-footer {
  border-top: 1px solid var(--osy-line-on-deep);
  color: var(--osy-on-deep-soft);
}

.cs-footer__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-xs) var(--gap-md);
  padding-block: var(--gap-sm);
}

@media (max-width: 640px) {
  :root { --shell-pad: 20px; --text-lede: 18px; --logo-width: 136px; }
  .cs-header { padding-block: var(--gap-sm); }
  .cs-actions { flex-direction: column; align-items: stretch; }
  .cs-button { width: 100%; justify-content: center; position: relative; }
  .cs-button__circle { position: absolute; right: var(--gap-tight); }
  .cs-button__text { padding-left: 0; }
  .cs-note { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-light, .cs-mote, .cs-label__dot, .cs-mark { animation: none; }
  .cs-button__arrow { transition: none; }
  .cs-main__inner > * { animation: none; opacity: 1; transform: none; }
}