.the-spark{
  position:relative;
  min-height:118vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(34,211,238,.08),transparent 25%),
    #07111f;
}
.the-spark__stage{
  position:sticky;
  top:0;
  width:100%;
  min-height:100vh;
  display:grid;
  place-items:center;
  align-content:center;
  padding:90px 24px;
  text-align:center;
}
.the-spark__from{
  margin:0 0 52px;
  color:#63778e;
  font-size:clamp(17px,1.6vw,24px);
  line-height:1.45;
  opacity:0;
  transform:translateY(22px);
}
.the-spark__core{
  position:relative;
  width:190px;
  height:190px;
  display:grid;
  place-items:center;
}
.the-spark__dot{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#67e8f9;
  box-shadow:0 0 18px rgba(34,211,238,.95),0 0 60px rgba(34,211,238,.52),0 0 130px rgba(34,211,238,.25);
  opacity:0;
  transform:scale(.35);
}
.the-spark__ring{
  position:absolute;
  inset:50%;
  width:22px;
  height:22px;
  margin:-11px;
  border:1px solid rgba(34,211,238,.48);
  border-radius:50%;
  opacity:0;
}
.the-spark__place{
  display:grid;
  gap:9px;
  margin-top:22px;
  opacity:0;
  transform:translateY(15px);
}
.the-spark__place strong{
  color:#dce8f4;
  font-size:14px;
  letter-spacing:.18em;
}
.the-spark__place span{
  color:#65798f;
  font-size:12px;
  letter-spacing:.06em;
}
.the-spark h2{
  margin:68px 0 0;
  color:#eef6ff;
  font-size:clamp(48px,6.5vw,100px);
  line-height:.92;
  letter-spacing:-.065em;
  opacity:0;
  transform:translateY(28px);
}
.the-spark__continue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:58px;
  color:#6f849b;
  font-size:11px;
  letter-spacing:.12em;
  text-decoration:none;
  opacity:0;
  transform:translateY(18px);
}
.the-spark__continue i{
  color:#67e8f9;
  font-size:18px;
  font-style:normal;
  animation:sparkArrow 1.8s ease-in-out infinite;
}
.the-spark.is-active .the-spark__from{animation:sparkReveal .85s ease .08s forwards}
.the-spark.is-active .the-spark__dot{animation:sparkIgnite .95s cubic-bezier(.22,.8,.2,1) .72s forwards}
.the-spark.is-active .ring-1{animation:sparkRing 2.8s ease-out 1.2s infinite}
.the-spark.is-active .ring-2{animation:sparkRing 2.8s ease-out 1.75s infinite}
.the-spark.is-active .ring-3{animation:sparkRing 2.8s ease-out 2.3s infinite}
.the-spark.is-active .the-spark__place{animation:sparkReveal .75s ease 1.52s forwards}
.the-spark.is-active h2{animation:sparkReveal .95s ease 2.05s forwards}
.the-spark.is-active .the-spark__continue{animation:sparkReveal .75s ease 2.72s forwards}
@keyframes sparkReveal{to{opacity:1;transform:none}}
@keyframes sparkIgnite{55%{opacity:1;transform:scale(1.4)}100%{opacity:1;transform:scale(1)}}
@keyframes sparkRing{0%{opacity:0;transform:scale(.5)}18%{opacity:.42}100%{opacity:0;transform:scale(8.5)}}
@keyframes sparkArrow{50%{transform:translateY(7px)}}
@media(max-width:700px){
  .the-spark{min-height:105vh}
  .the-spark__from{margin-bottom:38px}
  .the-spark h2{margin-top:48px}
}
@media(prefers-reduced-motion:reduce){
  .the-spark__from,.the-spark__dot,.the-spark__place,.the-spark h2,.the-spark__continue{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  .the-spark__ring{display:none}
  .the-spark__continue i{animation:none}
}


/* RC6: accessible journey cue */
.the-spark__continue{
  gap:14px;
  margin-top:52px;
  font-size:12px;
}
.the-spark__continue i{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:2px solid #22d3ee;
  border-radius:50%;
  background:rgba(34,211,238,.055);
  color:#67e8f9;
  font-size:34px;
  line-height:1;
  box-shadow:
    0 0 10px rgba(34,211,238,.65),
    0 0 28px rgba(34,211,238,.28);
}
.the-spark__continue:hover i,
.the-spark__continue:focus-visible i{
  background:rgba(34,211,238,.12);
  box-shadow:
    0 0 12px rgba(103,232,249,.9),
    0 0 42px rgba(34,211,238,.4);
}
.the-spark__continue:focus-visible{
  outline:none;
}
@media(max-width:700px){
  .the-spark__continue i{
    width:58px;
    height:58px;
    font-size:30px;
  }
}


/* RC15.14 — Origin coordinate treatment
   Keep the Spark abstract: no map, only a restrained origin/coordinate cue. */
.the-spark__core{
  width:220px;
  height:220px;
}
.the-spark__axis{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.16) 28%,rgba(103,232,249,.25) 50%,rgba(103,232,249,.16) 72%,transparent);
  opacity:0;
  transform-origin:center;
}
.the-spark__axis--x{
  width:176px;
  height:1px;
  margin-left:-88px;
}
.the-spark__axis--y{
  width:1px;
  height:176px;
  margin-top:-88px;
  background:linear-gradient(180deg,transparent,rgba(103,232,249,.16) 28%,rgba(103,232,249,.25) 50%,rgba(103,232,249,.16) 72%,transparent);
}
.the-spark__origin-circle{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(103,232,249,.15);
  border-radius:50%;
  opacity:0;
}
.the-spark__origin-circle--inner{
  width:62px;
  height:62px;
  margin:-31px;
}
.the-spark__origin-circle--outer{
  width:126px;
  height:126px;
  margin:-63px;
  border-color:rgba(103,232,249,.09);
}
.the-spark.is-active .the-spark__axis{
  animation:sparkCoordinateReveal 1.05s ease 1.08s forwards;
}
.the-spark.is-active .the-spark__origin-circle--inner{
  animation:sparkOriginReveal .95s ease 1.02s forwards;
}
.the-spark.is-active .the-spark__origin-circle--outer{
  animation:sparkOriginReveal 1.15s ease 1.16s forwards;
}
/* Pulse once rather than behaving like a continuously scanning radar. */
.the-spark.is-active .ring-1{
  animation:sparkRingOnce 2.25s ease-out 1.18s 1 forwards;
}
.the-spark.is-active .ring-2{
  animation:sparkRingOnce 2.25s ease-out 1.48s 1 forwards;
}
@keyframes sparkCoordinateReveal{
  from{opacity:0;transform:scale(.7)}
  to{opacity:1;transform:scale(1)}
}
@keyframes sparkOriginReveal{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:scale(1)}
}
@keyframes sparkRingOnce{
  0%{opacity:0;transform:scale(.6)}
  18%{opacity:.34}
  100%{opacity:0;transform:scale(6.4)}
}
@media(prefers-reduced-motion:reduce){
  .the-spark__axis,
  .the-spark__origin-circle{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}