/*
 * EasyLearning coming-soon page (COMING_SOON CS-02). Static, self-contained: no web fonts, no
 * scripts, no third-party requests. Colours come from the EasyLearning palette (DESIGN_SYSTEM):
 * a white page carries the light-background logo, and the path's blues are the logo's own.
 */
:root {
  --paper: #ffffff;
  --ink: #162556;
  --mark: #00468d;
  --mark-soft: #3a78b5;
  --text-soft: #4a5565;
  --text-quiet: #5b6472;
  --rule: #e5e7eb;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100svh;
  background: var(--paper);
  color: var(--ink);
  /* Rounded system faces echo the logo's lettering; no font is downloaded. */
  font-family: ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}

/* DS-04: desktop content centred at a usable width of min(1344px, available - 96px). */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  inline-size: 100%;
  max-inline-size: 1440px;
  min-block-size: 100vh;
  min-block-size: 100svh;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 64rem) {
  .page {
    padding-inline: 48px;
  }
}

.top {
  padding-block: 28px 0;
}

.logo {
  /* The source keeps transparent margins: about 25% of its height above and below the mark and 14.5%
     of its height on the left (measured). They are pulled back so the visible mark aligns with the
     gutter and its height is about half of --logo-h. The image itself is not cropped or changed. */
  --logo-h: 64px;
  display: block;
  inline-size: auto;
  block-size: var(--logo-h);
  margin-block: calc(var(--logo-h) * -0.25);
  margin-inline-start: calc(var(--logo-h) * -0.145);
}

@media (min-width: 64rem) {
  .top {
    padding-block-start: 40px;
  }

  .logo {
    --logo-h: 88px;
  }
}

.hero {
  display: grid;
  align-content: center;
  gap: 40px;
  padding-block: 56px;
}

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
  }
}

.hero__text {
  min-inline-size: 0;
}

.title {
  margin: 0;
  font-size: clamp(3.25rem, 10vw, 8.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lead {
  max-inline-size: 30ch;
  margin: 28px 0 0;
  color: var(--text-soft);
  font-size: clamp(1.125rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* The rising path: a line through three points to a spark, drawn once when the page opens. */
.path {
  display: block;
  inline-size: 100%;
  max-inline-size: 360px;
  block-size: auto;
  justify-self: end;
  overflow: visible;
}

@media (min-width: 64rem) {
  .path {
    max-inline-size: 520px;
  }
}

.path__line {
  fill: none;
  stroke: var(--mark-soft);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 0;
  animation: draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.path__dot {
  fill: var(--mark);
  animation: appear 0.4s ease-out both;
}

.path__dot:nth-of-type(1) {
  animation-delay: 0.1s;
}

.path__dot--mid {
  fill: var(--mark-soft);
  animation-delay: 0.7s;
}

.path__dot:nth-of-type(3) {
  animation-delay: 1.3s;
}

.path__spark {
  fill: var(--mark-soft);
  transform-box: fill-box;
  transform-origin: center;
  animation: spark 0.6s ease-out 1.6s both;
}

@keyframes draw {
  from {
    stroke-dashoffset: 620;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spark {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .path__line,
  .path__dot,
  .path__spark {
    animation: none;
  }
}

.foot {
  padding-block: 20px 28px;
  border-block-start: 1px solid var(--rule);
  color: var(--text-quiet);
  font-size: 0.875rem;
}

.foot p {
  margin: 0;
}