/* sterso.ly coming-soon page. Colours and proportions from the Continuum brand package (BRAND.md v1.0, 2026-11):
   signature colourway on Sterso Black; no glow, shadow or gradient on the mark; the name is the delivered
   wordmark at the lockup's proportion (293 : 173 of the mark), 0.30 x the mark away from it.
   The owner asked (2026-11-07) that visitors can turn the mark like a steering wheel; at rest it is upright. */
:root {
  --black: #121110;   /* Sterso Black: the ground */
  --white: #f5f1e6;   /* Warm White: text on dark */
  --silver: #b3ada0;  /* Silver: the rim segments, reused for the quiet text */
  --mark: clamp(132px, 36vw, 208px);
  --s-length: 518;    /* the S stroke's length, 517.52 by getTotalLength(), rounded up, in mark units */
  --steer: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  color-scheme: dark;
  background: var(--black);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  background: var(--black);
  color: var(--white);
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wheel-area {
  position: relative;
  width: var(--mark);
  aspect-ratio: 1;
}

/* The turn hint: two silver arrows around the wheel for a few seconds after the logo is drawn, while the
   wheel turns a little twice. It goes as soon as the visitor turns the wheel (wheel.js adds .is-touched). */
.hint {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--mark) * 1.36);
  height: calc(var(--mark) * 1.36);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  animation: hint-life 3.6s ease-out 2.6s both;
}

.hint path {
  fill: none;
  stroke: var(--silver);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hint-arc {
  stroke-dasharray: 121;
  stroke-dashoffset: 121;
  animation: draw 0.6s ease-out 2.6s forwards;
}

.hint-head {
  animation: appear 0.25s ease-out 3.1s both;
}

.is-touched .hint {
  animation: none;
  opacity: 0;
}

.is-touched .mark {
  animation: none;
}

/* The wheel: wheel.js sets its rotation while it is turned and springs it back to upright. */
.wheel {
  position: relative;
  width: var(--mark);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wheel.is-turning {
  cursor: grabbing;
}

.wheel:focus {
  outline: none;
}

/* The ring is for keyboard users only; wheel.js marks a wheel taken by mouse or finger. */
.wheel:focus-visible:not(.by-pointer) {
  outline: 2px solid var(--silver);
  outline-offset: 10px;
}

.mark {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  /* With the arrows: two small turns the way they point, each settling back. */
  animation: nudge 2.6s var(--steer) 3.1s both;
}

/* The S is drawn as one continuous line (the wheel's load path); then the silver rim segments close the circle. */
.mark-s {
  stroke-dasharray: var(--s-length);
  stroke-dashoffset: var(--s-length);
  animation: draw 1.7s var(--steer) 0.3s forwards;
}

.mark-rim {
  animation: appear 0.7s ease-out 1.9s both;
}

.name {
  margin: calc(var(--mark) * 0.3) 0 0;
  line-height: 0;
  animation: appear 0.9s ease-out 2.1s both;
}

.name img {
  display: block;
  width: calc(var(--mark) * 293 / 173);
  height: auto;
}

.line {
  margin: clamp(16px, 3vh, 24px) 0 0;
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--silver);
  animation: appear 0.9s ease-out 2.4s both;
}

/* «قريبًا» is a status, so it is drawn as one: a quiet pill under the line. */
.soon {
  margin: clamp(24px, 4vh, 36px) 0 0;
  padding: 6px 20px 8px;
  border: 1px solid rgb(179 173 160 / 0.45);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  animation: appear 0.9s ease-out 2.7s both;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes nudge {
  0%,
  36%,
  50%,
  86%,
  100% {
    transform: none;
  }
  14%,
  64% {
    transform: rotate(28deg);
  }
  26%,
  76% {
    transform: rotate(-5deg);
  }
}

@keyframes hint-life {
  0%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark-s,
  .hint-arc {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  .mark,
  .mark-rim,
  .hint-head,
  .name,
  .line,
  .soon {
    animation: none;
  }

  /* The arrows still show for a few seconds, without moving, then fade. */
  .hint {
    animation: hint-life 4s ease-out 0.5s both;
  }
}