/* =============================================================================
   The Infinity Rift — the hero.

   One lemniscate drawn as a single continuous stroke. Energy runs the loop as
   dashed overlays whose dash period divides the path length exactly, so the
   circuit never seams. Bloom is faked with stacked strokes of decreasing width
   rather than a per-frame blur filter, which keeps the animation cheap.

   Selecting a waypoint slides a brass riser along under the loop and unfolds the
   record cartouche beneath it.
   ========================================================================== */

/* Narrower than the shell so the outermost waypoint labels, which sit beyond
   the tips of the loop, have somewhere to go. The cartouche shares this width
   so its notch and the riser measure against the same box. */
.rift {
  position: relative;
  width: min(100%, 1060px);
  margin: var(--sp-10) auto 0;
}

/* ------------------------------------------------------------- the stage -- */

.rift__stage {
  position: relative;
  aspect-ratio: 1000 / 385;
  width: 100%;
}

.rift__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The halo blur and the sunburst rays are drawn outside the viewBox. */
  overflow: visible;
  /* And because they are, they hang roughly 280px below the stage and would
     otherwise swallow hovers and clicks meant for the prompt and the top of the
     record panel. Nothing in here is interactive; the waypoints are HTML
     buttons in the layer above. */
  pointer-events: none;
}

/* --- deco fan behind the loop ------------------------------------------- */

.rift__burst line {
  stroke: var(--brass);
  stroke-width: 0.75;
}

.rift__burst {
  opacity: 0.16;
}

/* --- the loop itself ----------------------------------------------------- */

.rift__halo {
  fill: none;
  stroke: var(--violet);
  stroke-width: 16;
  opacity: 0.22;
  filter: blur(22px);
}

.rift__base {
  fill: none;
  stroke: url(#riftGrad);
  stroke-width: 1.25;
  opacity: 0.4;
}

/* Each stream group carries the dash pattern and the moving offset; the <use>
   layers inside inherit both, so one animation drives the whole bloom stack. */
.rift__stream {
  fill: none;
  stroke: url(#riftGrad);
  stroke-linecap: round;
  animation: rift-flow var(--flow) linear infinite;
}

.rift__stream--wide {
  animation-duration: var(--flow);
}

.rift__stream--fine {
  animation-duration: calc(var(--flow) * 0.55);
  opacity: 0.7;
}

/* The fine layer is a two-strand shimmer, so it overrides the wide stack. The
   doubled class is load-bearing: at equal specificity the generic
   `.rift__stream use:nth-child()` rules below would win on source order. */
.rift__stream--fine.rift__stream use:nth-child(1) {
  stroke-width: 3;
  opacity: 0.22;
}

.rift__stream--fine.rift__stream use:nth-child(2) {
  stroke: #fff;
  stroke-width: 0.9;
  opacity: 0.8;
}

.rift__stream use:nth-child(1) {
  stroke-width: 13;
  opacity: 0.1;
}

.rift__stream use:nth-child(2) {
  stroke-width: 7;
  opacity: 0.2;
}

.rift__stream use:nth-child(3) {
  stroke-width: 3.4;
  opacity: 0.62;
}

.rift__stream use:nth-child(4) {
  stroke: #fff5fb;
  stroke-width: 1.3;
  opacity: 0.95;
}

@keyframes rift-flow {
  to {
    stroke-dashoffset: calc(var(--period, 200px) * -1);
  }
}

/* --- the lap fired when a waypoint is selected --------------------------- */

.rift__pulse {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
}

.rift__pulse.is-firing {
  animation: rift-lap 1500ms var(--ease-deco) 1;
}

@keyframes rift-lap {
  0% {
    opacity: 0;
    stroke-dashoffset: var(--lap-from, 0);
  }
  12% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: var(--lap-to, -1000px);
  }
}

/* --- shimmer ------------------------------------------------------------- */

.rift__motes circle {
  fill: #ffe9fb;
}

/* --- the label inside each lobe ------------------------------------------ */

/* Dimmed by mixing the colour down rather than by opacity, which would drag it
   under the contrast floor. */
.rift__lobe-label {
  fill: #a08a52;
  font-family: var(--data);
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-anchor: middle;
}

.rift__lobe-note {
  fill: var(--faint);
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-anchor: middle;
}

/* --------------------------------------------------------- the waypoints -- */

.rift__nodes {
  position: absolute;
  inset: 0;
}

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

/* A four-point star in a brass ring. The star repeats the flourishes cut into
   the wordmark, which is why it is four points and not five. */
.node__mark {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--brass-deep);
  border-radius: 50%;
  background: rgba(5, 6, 15, 0.75);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease-deco);
}

/* The star itself. Centred by translate rather than by negative margins, which
   is what lets the shared shine in base.css add a scale to it without having to
   know how big it is. Its flare comes from the same place. */
.node__mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: var(--violet);
  clip-path: var(--star);
  transition:
    background var(--dur) var(--ease),
    filter var(--dur) var(--ease),
    transform var(--dur) var(--ease-deco);
}

.node__label {
  position: absolute;
  font-family: var(--data);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.node[data-anchor='top'] .node__label {
  bottom: calc(100% - 4px);
}
.node[data-anchor='bottom'] .node__label {
  top: calc(100% - 4px);
}
.node[data-anchor='left'] .node__label {
  right: calc(100% - 2px);
}
.node[data-anchor='right'] .node__label {
  left: calc(100% - 2px);
}

.node:hover .node__mark,
.node:focus-visible .node__mark {
  border-color: var(--brass);
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(203, 167, 91, 0.09);
}

/* The star catching the light — brighter violet, a bloom, the rays opening out —
   is the shared shine in base.css. Nothing about it lives here any more. */

.node:hover .node__label,
.node:focus-visible .node__label {
  color: var(--brass-bright);
}

.node[aria-expanded='true'] .node__mark {
  border-color: var(--brass-bright);
  transform: scale(1.32);
  box-shadow:
    0 0 0 1px rgba(235, 212, 160, 0.35),
    0 0 22px 3px rgba(240, 79, 212, 0.4);
}

/* Open: the same shine held on, one notch hotter. */
.node[aria-expanded='true'] .node__mark::after {
  background: var(--star-lit-hot);
  transform: translate(-50%, -50%) scale(1.35);
  filter: var(--star-bloom-hot);
}

.node[aria-expanded='true'] .node__mark::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
}

.node[aria-expanded='true'] .node__label {
  color: var(--brass-bright);
}

/* Everything dims a little while one waypoint holds the floor — but not so far
   that the labels stop being readable, and never while one is being used. */
.rift.is-open .node:not([aria-expanded='true']) {
  opacity: 0.8;
}

.rift.is-open .node:not([aria-expanded='true']):hover,
.rift.is-open .node:not([aria-expanded='true']):focus-visible {
  opacity: 1;
}

.node {
  transition: opacity var(--dur) var(--ease);
}

/* ------------------------------------------------------------- the riser -- */

/* A brass hairline dropped from the active waypoint to the cartouche. It slides
   horizontally when the selection moves, which is the connective tissue between
   the loop and the record. */
/* It runs from below the loop down to the cartouche notch, not from the
   waypoint itself: the lobes are mirrored top to bottom, so a plumb line from
   any upper waypoint would pass straight through its lower twin's mark and
   label. Starting under the foot of the stage clears the bottom labels too. */
/* Above the cartouche, because half of the star at its foot hangs over the
   cartouche's top edge. Without this the cartouche — a later sibling with a
   background — paints over that half and the star reads as cut off. */
.rift__riser {
  position: absolute;
  z-index: 2;
  left: var(--riser-x, 50%);
  top: calc(100% + var(--sp-6));
  width: 1px;
  height: var(--sp-6);
  background: linear-gradient(180deg, transparent, var(--brass));
  opacity: 0;
  pointer-events: none;
  transition:
    left var(--dur-slow) var(--ease-deco),
    opacity var(--dur) var(--ease);
}

/* The star that lands on the cartouche edge is a child of the riser, not of the
   cartouche. Positioned on the cartouche it would resolve its percentage
   against that box's *padding* box, and the 1px border alone put it out of true
   with the riser. Hanging it off the riser leaves one x-coordinate to disagree
   about. */
.rift__riser::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 14px;
  transform: translate(-50%, 50%);
  background: var(--brass-bright);
  clip-path: var(--star);
  filter: var(--star-bloom);
}

/* Its flare. Anchored to the riser's foot like the star, not to its centre, so
   it cannot use the shared block in base.css — but it is the same rays. The
   riser takes no pointer events, so this is lit whenever a record is open
   rather than on hover. */
.rift__riser::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  height: 44px;
  pointer-events: none;
  background: var(--star-flare);
  opacity: 0;
  transform: translate(-50%, 50%) scale(0.45);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease-deco);
}

.rift.is-open .rift__riser {
  opacity: 1;
}

.rift.is-open .rift__riser::before {
  opacity: 1;
  transform: translate(-50%, 50%) scale(1);
}

/* ------------------------------------------------------------ the prompt -- */

.rift__prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding: var(--sp-2);
  font-family: var(--data);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--faint);
  transition: opacity var(--dur) var(--ease);
}

.prompt-star {
  width: 13px;
  height: 13px;
  flex: none;
  background: var(--brass);
  clip-path: var(--star);
  transition:
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease-deco),
    filter var(--dur) var(--ease);
}

.rift__prompt:hover .prompt-star {
  background: #e8cdff;
  transform: scale(1.3);
  filter: drop-shadow(0 0 7px rgba(178, 120, 255, 0.95)) drop-shadow(0 0 16px rgba(240, 79, 212, 0.6));
}

.rift.is-open .rift__prompt {
  display: none;
}

/* ---------------------------------------------------------- the cartouche -- */

.rift__cartouche {
  position: relative;
  z-index: 1; /* under the riser, whose star straddles this box's top edge */
  /* Leaves room for the riser to be a visible connector rather than a nub. */
  margin-top: var(--sp-12);
  padding: var(--sp-8) clamp(var(--sp-5), 4vw, var(--sp-10)) var(--sp-8);
  background: linear-gradient(180deg, rgba(23, 27, 56, 0.86), rgba(16, 19, 42, 0.9));
  border: 1px solid var(--brass-deep);
  border-top-color: var(--brass);
}

.rift__cartouche[hidden] {
  display: none;
}

.rift__cartouche.is-entering {
  animation: cartouche-unfold var(--dur-slow) var(--ease-deco);
}

@keyframes cartouche-unfold {
  from {
    opacity: 0;
    transform: scaleY(0.86);
    transform-origin: top center;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.record__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(107, 87, 48, 0.4);
}

.record__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.1;
}

.record__name:focus-visible {
  outline-offset: 6px;
}

.record__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-right: auto;
}

.record__close {
  display: grid;
  place-items: center;
  align-self: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--brass-deep);
  color: var(--muted);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.record__close:hover,
.record__close:focus-visible {
  color: var(--brass-bright);
  border-color: var(--brass);
}

.tag {
  font-family: var(--data);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.32em 0.7em;
  border: 1px solid var(--brass-deep);
  color: var(--brass);
  white-space: nowrap;
}

.tag--status {
  border-color: transparent;
  background: rgba(111, 59, 238, 0.18);
  color: #c9b6ff;
}

.tag--status[data-status='Running'],
.tag--status[data-status='Ongoing'] {
  background: rgba(240, 79, 212, 0.15);
  color: #ffb9ef;
}

.tag--status[data-status='Released'] {
  background: rgba(203, 167, 91, 0.16);
  color: var(--brass-bright);
}

.record__body {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .record__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--sp-12);
  }
}

.record__summary {
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--parchment);
  max-width: 46ch;
}

.record__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-6);
}

.record__stat {
  display: grid;
  gap: 2px;
}

.record__stat b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--brass-bright);
  line-height: 1;
}

.record__stat span {
  font-family: var(--data);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.record__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* `fit-content` on the group plus stretched cells: both slabs take the width of
   the longer label, so a stack of two reads as one control. */
.record__buttons {
  display: grid;
  gap: var(--sp-3);
  width: fit-content;
  max-width: 100%;
}

/* The Visit button: a brass-edged slab with a chevron that steps out on hover. */
.visit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.82em 1.5em;
  border: 1px solid var(--brass);
  color: var(--brass-bright);
  font-family: var(--data);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(203, 167, 91, 0.12), rgba(240, 79, 212, 0.08));
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.visit svg {
  transition: transform var(--dur) var(--ease-deco);
}

.visit:hover,
.visit:focus-visible {
  background: linear-gradient(135deg, rgba(203, 167, 91, 0.26), rgba(240, 79, 212, 0.18));
  border-color: var(--brass-bright);
}

.visit:hover svg {
  transform: translateX(4px);
}

.link-quiet {
  font-family: var(--data);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.82em 0.9em;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.link-quiet:hover,
.link-quiet:focus-visible {
  color: var(--brass-bright);
  border-bottom-color: var(--brass-deep);
}

/* --- the milestone rail inside a record ---------------------------------- */

.track {
  display: grid;
  gap: 0;
  position: relative;
}

.track__head {
  font-family: var(--data);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-5);
}

.track__item {
  /* The rail geometry is derived from these rather than eyeballed, so the line
     starts below one star and stops above the next whatever the row height. */
  --pad: 0.42rem;
  --mark: 12px;
  --mark-gap: 0.36rem; /* the mark's own margin-top */
  --mark-top: calc(var(--pad) + var(--mark-gap));

  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: start;
  gap: var(--sp-3);
  padding-block: var(--pad);
  position: relative;
}

/* `.track__item` sets display, so it beats the browser's own `[hidden]` rule
   and a collapsed row would otherwise stay on screen. */
.track__item[hidden] {
  display: none;
}

/* The rail: a hairline running between consecutive markers. It clears the star
   above it, and `bottom` reaches exactly into the next row's marker. */
.track__item:not(:last-child):not([data-tail])::before {
  content: '';
  position: absolute;
  left: 8.5px; /* the marker is 12px wide at margin-left 3px, so centre is 9px */
  top: calc(var(--mark-top) + var(--mark) + 3px);
  bottom: calc(3px - var(--mark-top));
  width: 1px;
  background: rgba(107, 87, 48, 0.55);
}

/* The same star the roadmap marks milestones with — this rail is the same
   information, just read one initiative at a time. */
.track__mark {
  width: 12px;
  height: 12px;
  margin-top: 0.36rem;
  margin-left: 3px;
  background: var(--violet);
  clip-path: var(--star);
}

.track__item[data-done='true'] .track__mark {
  background: var(--brass);
}

.track__label {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.45;
}

.track__link {
  border-bottom: 1px solid rgba(107, 87, 48, 0.5);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.track__link:hover,
.track__link:focus-visible {
  color: var(--brass-bright);
  border-bottom-color: var(--brass);
}

.track__item[data-done='true'] .track__label {
  color: var(--parchment);
}

.track__date {
  font-family: var(--data);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--faint);
  white-space: nowrap;
  margin-top: 0.34rem;
}

/* The fold. Sits under the rail on the marker's own column, so it reads as the
   list continuing rather than as a control bolted underneath it. */
.track__more {
  justify-self: start;
  margin-top: var(--sp-3);
  /* Its star sits on the marker column: markers are 12px at margin-left 3px,
     so their centre is 9px in — and a 9px star needs 4.5px to land there. */
  margin-left: 4.5px;
  padding: 0.3rem 0.7rem 0.3rem 0;
  font-family: var(--data);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brass);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.track__more::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: var(--sp-3);
  vertical-align: -1px;
  background: currentColor;
  clip-path: var(--star);
  transition: transform var(--dur) var(--ease);
}

.track__more[aria-expanded='true']::before {
  transform: rotate(45deg);
}

.track__more:hover,
.track__more:focus-visible {
  color: var(--brass-bright);
}

/* ------------------------------------------------------- the narrow list -- */

/* Below the breakpoint the loop stays as artwork and the waypoints become a
   plain list, because a 12px star is not a tap target. */
.rift__list {
  display: none;
  margin-top: var(--sp-10);
}

.rift__group + .rift__group {
  margin-top: var(--sp-8);
}

.rift__group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-family: var(--data);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brass);
}

.rift__group-head::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--brass-deep), transparent);
}

.stop {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-2);
  text-align: left;
  border-bottom: 1px solid rgba(107, 87, 48, 0.28);
  transition: background var(--dur) var(--ease);
}

.stop:hover,
.stop:focus-visible {
  background: rgba(23, 27, 56, 0.7);
}

/* Same star as the waypoints, so the list reads as the loop rearranged. */
.stop__gem {
  width: 13px;
  height: 13px;
  background: var(--violet);
  clip-path: var(--star);
  transition:
    background var(--dur) var(--ease),
    filter var(--dur) var(--ease),
    transform var(--dur) var(--ease-deco);
}

.stop:hover .stop__gem,
.stop:focus-visible .stop__gem {
  background: #c9a2ff;
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(178, 120, 255, 0.9));
}

.stop[aria-expanded='true'] .stop__gem {
  background: #ffd9f6;
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(240, 79, 212, 1)) drop-shadow(0 0 16px rgba(240, 79, 212, 0.6));
}

.stop__name {
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.stop__status {
  font-family: var(--data);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 820px) {
  .rift__nodes,
  .rift__riser,
  .rift__prompt {
    display: none;
  }

  .rift__list {
    display: block;
  }

  .rift__stage {
    opacity: 0.9;
  }

  /* SVG text scales with the viewBox, so at phone widths 13px would paint at
     about 4px. The lobe name is reprinted as a list heading below; the note
     is not, so it is the one thing dropped. */
  .rift__lobe-label {
    font-size: 30px;
    letter-spacing: 0.3em;
  }

  .rift__lobe-note {
    display: none;
  }

  .rift__cartouche {
    margin-top: var(--sp-4);
  }
}

/* ------------------------------------------------------- reduced motion --- */

/* A second, unanimated bloom stack that only appears under reduced motion.
   Declared BEFORE the media query: both selectors are (0,1,0), so whichever
   comes last wins and the override has to be the later one. */
.rift__still {
  display: none;
}

/* Freeze the circuit into a single continuous, evenly lit rift and drop the
   shimmer entirely. The loop still glows; it just stops travelling. */
@media (prefers-reduced-motion: reduce) {
  .rift__stream,
  .rift__pulse,
  .rift__motes {
    display: none;
  }

  .rift__base {
    stroke-width: 3.2;
    opacity: 1;
  }

  .rift__halo {
    opacity: 0.34;
  }

  .rift__still {
    display: block;
  }
}

.rift__still use:nth-child(1) {
  fill: none;
  stroke: var(--violet);
  stroke-width: 9;
  opacity: 0.16;
}

.rift__still use:nth-child(2) {
  fill: none;
  stroke: url(#riftGrad);
  stroke-width: 4.5;
  opacity: 0.4;
}

.rift__still use:nth-child(3) {
  fill: none;
  stroke: #fff5fb;
  stroke-width: 1.1;
  opacity: 0.75;
}