/* Arc's own tokens: protocol navy, validator blue, static ether, sky sync.
   The ground is the night field from their site. */
:root {
  --soft: #d5e0e7;
  --color: #1b3158;
  --color-medium: #2f578c;
  --dark-blue: #12192b;
  --color-soft: #acc6e9;
}

@media screen and (max-width: 991px) {
  body, .cycle {
    --soft: #d5e0e7;
    --color: #1b3158;
    --color-medium: #2f578c;
    --dark-blue: #12192b;
    --color-soft: #acc6e9;
  }
}

@media screen and (max-width: 767px) {
  body, .importance__bottom__left, .cycle__top__parags, .importance__bottom__left-copy {
    --soft: #d5e0e7;
    --color: #1b3158;
    --color-medium: #2f578c;
    --dark-blue: #12192b;
    --color-soft: #acc6e9;
  }
}

@media screen and (max-width: 479px) {
  body, .onclock__pendulum__svg.onclock__lines__opac {
    --soft: #d5e0e7;
    --color: #1b3158;
    --color-medium: #2f578c;
    --dark-blue: #12192b;
    --color-soft: #acc6e9;
  }
}

section.onclock.section-blue {
  background: #12192b;
}

body:has(.is-follow-path) canvas,
body:has(.is-lamp-active) canvas {
  background: #12192b;
}

/* ============================================================================
   ContextLock additions to the landing page
   ----------------------------------------------------------------------------
   Kept in its own file rather than edited into the scraped Webflow stylesheets,
   so what belongs to this product is always separable from what came with the
   template. Loaded last, so it wins on equal specificity without !important.

   Everything here uses the site's own tokens (--color, --soft, --white) and its
   own faces (var(--medium), var(--serif)) — the landing's look is the source of
   truth for the whole product, not the other way round.
   ========================================================================== */

/* --- hero wordmark --------------------------------------------------------
   The template set this at a fixed 5.1rem, which left most of the hero empty
   on a desktop screen. Sized against the viewport instead so it fills the space
   it has, with the letter-spacing scaling alongside — spacing kept at a fixed
   3rem would shred the word on a phone. */
.hero__title__h1 {
  font-size: clamp(3rem, 15vw, 19rem);
  letter-spacing: clamp(0.5rem, 2.6vw, 2.6rem);
  /* Space Grotesk's g descends past a line-height of 1, and the title mask
     clips to that box, which slices the bottom of the letter. */
  line-height: 1.25;
  overflow: visible;
}

/* The eyebrow was left at the template's fixed 1.9rem while the wordmark
   beneath it grew, which made it look like a caption rather than a claim. */
.hero__subt__text {
  font-size: clamp(1.5rem, 2.3vw, 3rem);
  letter-spacing: 0.01em;
}

.hero__title {
  grid-column-gap: clamp(1rem, 3.4vw, 4.4rem);
  grid-row-gap: clamp(0.4rem, 2vw, 1.6rem);
  flex-wrap: wrap;
  margin-top: clamp(1rem, 3vh, 2.5rem);
}

/* The trailing letter-space pushes the word visually off-centre; pulling it
   back by half keeps the pair optically centred at every size. */
.hero__title__h1 { margin-right: calc(clamp(0.7rem, 3vw, 3rem) * -0.5); }


/* ============================================================================
   Word spacing in split headings
   ----------------------------------------------------------------------------
   Every animated heading is exploded one <div> per letter, grouped one
   .js-words per word. In JSX, whitespace between elements on separate lines is
   stripped, so the scrape lost every word break and the page rendered
   "SLEEPISNTALUXURY". The original CSS never spaced them because in the live
   site the split happened at runtime, where the text nodes still carried their
   spaces.

   A margin on each word after the first restores the gap, scales with the type
   because it is in em, and does not disturb the per-letter animation.
   ========================================================================== */
.js-words + .js-words { margin-left: 0.3em; }

/* Uppercase eyebrows already carry wide letter-spacing, so the same em gap
   reads as too tight against it. */
.subtitle__text .js-words + .js-words { margin-left: 0.55em; }

/* ============================================================================
   Arc type
   ----------------------------------------------------------------------------
   Arc sets its headlines in Space Grotesk Light, body in DM Sans and eyebrows
   in Space Mono. The faces are declared in webflow.css in place of the
   template's; this block covers the roles the template left to the browser
   default and the eyebrow labels, which had no face of their own.
   ========================================================================== */
body,
.body {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
}

.hero__title__h1 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: clamp(0.1rem, 0.6vw, 0.6rem);
  text-transform: none;
}

/* The intro timeline still queries a second heading. It stays in the DOM
   and out of the layout so the wordmark is the single name BagFi. */
.hero__title__h1--spare {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.subtitle__text,
.hero__subt__text,
.hero__scroll__text,
.section-index__index,
.onclock__word__text,
.insights__text,
.cl-hero-cta__primary,
.cl-hero-cta__secondary {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-index__index {
  letter-spacing: 0;
}

/* --- hero call to action -------------------------------------------------- */
.cl-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(2.6rem, 6vh, 5.5rem);
}

.cl-hero-cta__primary,
.cl-hero-cta__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05em 2.9em;
  border-radius: 999px;
  font-size: clamp(1.15rem, 1.7vw, 1.85rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* The hero sits on the deep blue 3D scene, not on the cream ground, so these
   take the cream treatment the wordmark above them already uses. Styled blue
   they were blue-on-blue: the primary barely separated and the secondary was
   very nearly invisible. */
.cl-hero-cta__primary {
  background: var(--soft, #fef1d0);
  color: var(--color, #1b3158);
  border: 1px solid var(--soft, #fef1d0);
}
.cl-hero-cta__primary:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: #fff;
}

.cl-hero-cta__secondary {
  background: transparent;
  color: var(--soft, #fef1d0);
  border: 1px solid color-mix(in srgb, var(--soft, #fef1d0) 55%, transparent);
}
.cl-hero-cta__secondary:hover {
  transform: translateY(-2px);
  border-color: var(--soft, #fef1d0);
  background: color-mix(in srgb, var(--soft, #fef1d0) 12%, transparent);
}

.cl-hero-cta__primary:focus-visible,
.cl-hero-cta__secondary:focus-visible {
  outline: 2px solid var(--soft, #fef1d0);
  outline-offset: 3px;
}

/* The hero is centred and vertically tight on short screens; the CTA gives up
   its top margin first rather than pushing the scroll cue off-screen. */
@media (max-height: 760px) {
  .cl-hero-cta { margin-top: 1.8rem; }
}

@media (max-width: 600px) {
  .cl-hero-cta { gap: 10px; width: 100%; }
  .cl-hero-cta__primary,
  .cl-hero-cta__secondary {
    flex: 1 1 auto;
    padding: 0.9em 1.4em;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-hero-cta__primary,
  .cl-hero-cta__secondary { transition: none; }
  .cl-hero-cta__primary:hover,
  .cl-hero-cta__secondary:hover { transform: none; }
}

/* --- USDC coin inside the stats ring -------------------------------------
   The label this replaces was dragged into the ring by two negative offsets
   tuned to a single line of 1.9rem text (margin-top -4.5rem on the wrapper,
   top -5.3rem on the paragraph). A block with different dimensions inherits
   that maths and lands nowhere near the centre — which is exactly what
   happened: the mark rendered roughly 10rem below the ring.

   .stats__stats is the ring container and is already position:relative, so the
   wrapper is centred against it directly and the mark's own height stops
   mattering. */
.stats__stats__minimum {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cl-stats-mark {
  display: block;
  width: clamp(72px, 8vw, 140px);
  height: auto;
  border-radius: 50%;
}

/* --- retired audio affordances --------------------------------------------
   The background loop and the six narration clips are gone, and no element is
   registered as an insight trigger any more, so the sound toggle and the
   "Play insight" cursor have nothing left to control.

   Hidden rather than deleted: the engine holds both by querySelector and calls
   into them, so the nodes have to stay in the DOM. display:none also takes
   them out of the accessibility tree, so they are not announced either. */
.trg-sound,
.cursor-insight,
/* The floating "THE NOTE" trigger. It opened the template author's personal
   letter; the panel itself stays in the DOM because the engine binds to it,
   but nothing reaches it any more. */
.trg-note {
  display: none !important;
}

/* The rotating duration picker that used to sit under "Minimum duration:".
   With the Chainlink mark in the centre the two overlap, and the ring only
   needs to say one thing.

   Hidden rather than removed: the engine holds .stats__stats__ul and
   .stats__stats__number by query and animates them, so the nodes must stay.
   The ring keeps its size from .stats_stats__pattern, which carries its own
   width and aspect-ratio, so nothing collapses. */
.stats__stats__ul {
  display: none;
}


/* ============================================================================
   Retired scenes
   ----------------------------------------------------------------------------
   display:none rather than removing the node: the engine reads
   querySelector(".scene-tunnel").previousElementSibling, and a null there
   throws and takes the whole 3D runtime with it. Hiding also collapses the
   spacer's scroll height, so the section no longer occupies the page.
   ========================================================================== */
.scene-tunnel,
.scene-woman,
/* Everything between the pendulum and the closing CTA. The page now runs
   hero -> the four argument sections -> pendulum -> build -> footer.

   Hidden, never removed: the engine holds most of these by querySelector and
   dereferences the result immediately (.the-balance, .cycle__wrapper,
   .solution__hero, .drop-cans__svg, .typog__words), so a null throws and takes
   the whole 3D runtime with it. Hiding also drops their scroll height, so they
   no longer lengthen the page. */
.drop-cans,
.scene-phone-before,
.scene-phone,
.the-balance,
.scene-lamp,
.cycle,
.solution,
/* The closing block and the footer. Both were still the template's: a sign-off
   telling you to go and sleep, a link to the author's animation course, his
   socials, and the challenge credit. None of it belongs to this product.

   The page now simply ends on the pendulum. */
.ender,
.footer,
.footer-decor-solid {
  display: none;
}

/* The hidden nodes above still register ScrollTriggers. With no box, GSAP
   clamps their start to the end of the page, so reaching the bottom used to
   wake the footer's 3D scene (the ContextLock book) on the fixed canvas
   (z-index 2) and paint it over the pendulum. The last two sections sit above
   the canvas instead; neither uses it. */
.encouter,
.cl-closing {
  position: relative;
  z-index: 3;
}

/* ============================================================================
   Closing section
   ----------------------------------------------------------------------------
   Visible end of the page: the offer, the three tiers, the door to /market.
   Same dark ground as 03, same type roles as the rest of the page.
   ========================================================================== */
.cl-closing {
  background: var(--dark-blue, #12192b);
  color: var(--soft, #d5e0e7);
  padding: clamp(6rem, 14vh, 11rem) clamp(1.5rem, 6vw, 8rem) clamp(3rem, 6vh, 5rem);
}

.cl-closing__hold {
  max-width: 92rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cl-closing__eyebrow {
  color: var(--color-soft, #acc6e9);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.cl-closing__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(1.5rem, 3vh, 2.5rem);
  color: var(--soft, #d5e0e7);
}

.cl-closing__text {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.7rem);
  line-height: 1.5;
  max-width: 56rem;
  margin: 0 0 clamp(2.5rem, 5vh, 4rem);
  color: color-mix(in srgb, var(--soft, #d5e0e7) 82%, transparent);
}

.cl-closing__tiers {
  list-style: none;
  margin: 0 0 clamp(1rem, 2vh, 2rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.5rem);
  width: min(100%, 64rem);
}

.cl-closing__tier {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.2rem, 2vw, 2rem) clamp(1rem, 1.6vw, 1.6rem);
  border: 1px solid rgba(172, 198, 233, 0.35);
  border-radius: 1.25rem;
  /* Literal values: inside .section-blue the template remaps --color to the
     light tone, so var(--color) here would paint the cards light. */
  background: rgba(47, 87, 140, 0.32);
}

.cl-closing__tier-name,
.cl-closing__tier-terms {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-size: clamp(11px, 0.75vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #acc6e9;
}

.cl-closing__tier-ltv {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  line-height: 1;
  color: var(--soft, #d5e0e7);
}

.cl-closing__cta {
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}

.cl-closing__foot {
  margin-top: clamp(4rem, 9vh, 7rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-soft, #acc6e9) 25%, transparent);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: "Space Mono", monospace;
  font-size: clamp(11px, 0.7vw, 14px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(172, 198, 233, 0.8);
}

/* Same remap: the shared primary button reads var(--color) for its text and
   would come out light-on-light here. */
.cl-closing .cl-hero-cta__primary {
  color: #1b3158;
  background: #d5e0e7;
  border-color: #d5e0e7;
}
.cl-closing .cl-hero-cta__primary:hover {
  background: #fff;
  border-color: #fff;
}
.cl-closing .cl-hero-cta__secondary {
  color: #d5e0e7;
  border-color: rgba(213, 224, 231, 0.55);
}
.cl-closing .cl-hero-cta__secondary:hover {
  border-color: #d5e0e7;
  background: rgba(213, 224, 231, 0.12);
}

@media (max-width: 767px) {
  .cl-closing__tiers {
    grid-template-columns: 1fr;
  }
}

/* The ring texture is the template's bright blue and cream cloud pattern.
   Pulled down in saturation and brightness it lands on the palette's
   validator blue and static ether without touching the asset. */
.stats_stats__pattern {
  background: var(--color, #1b3158);
}
.stats_stats__pattern img {
  filter: saturate(0.45) brightness(0.78);
}

/* ============================================================================
   Body copy scale
   ----------------------------------------------------------------------------
   The template set these in fixed rem against its own longer paragraphs. With
   the copy cut back there is room to read them at a size that matches the
   display type around them, instead of a dense block in a narrow column.
   ========================================================================== */
.parag {
  font-size: clamp(1.9rem, 1.55vw, 3.1rem);
  line-height: 1.45;
}

.small-parag {
  font-size: clamp(1.8rem, 1.45vw, 2.9rem);
  line-height: 1.45;
}

/* The template scales the root font-size with the viewport, down to ~5px on
   a phone and ~8.5px on a 768px tablet, so rem sizes collapse with it. These
   are px floors through the tablet range. */
@media (max-width: 1024px) {
  .parag,
  .parag.importance__text {
    font-size: 16px;
    line-height: 1.5;
  }
  .small-parag {
    font-size: 15px;
    line-height: 1.5;
  }
  .hero__subt__text {
    font-size: 12px;
  }
  .hero__scroll__text,
  .insights__text,
  .subtitle__text {
    font-size: 11px;
  }
  .onclock__word__text {
    font-size: 11px;
  }
  .cl-hero-cta__primary,
  .cl-hero-cta__secondary {
    font-size: 13px;
    padding: 13px 22px;
    letter-spacing: 0.04em;
  }
  .cl-closing__eyebrow,
  .cl-closing__tier-name,
  .cl-closing__tier-terms,
  .cl-closing__foot {
    font-size: 11px;
  }
  .cl-closing__text {
    font-size: 16px;
    line-height: 1.5;
  }
  .cl-closing__tier-ltv {
    font-size: 30px;
  }
}

/* Scroll performance on phones and tablets.

   The template paints a full-screen fixed grain (.pattern) over everything
   with mix-blend-mode: luminosity. On a phone that forces the compositor to
   re-blend the whole viewport on every scroll frame, which is the stutter.
   The letter-split titles also put will-change on every letter (hundreds of
   compositor layers), and the paragraphs carry animated gradient masks.
   None of it is legible on a small screen, so it is all turned off there. */
@media (max-width: 1024px) {
  /* Pinch zoom stays at 1. A wider decoration must not widen the page,
     which is what makes Safari shrink the whole layout to fit. */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    touch-action: pan-y;
  }
  /* The page behind the enter screen cannot move. When that screen leaves,
     the hero is what sits at the top. */
  body:has(.preloader) {
    position: fixed;
    inset: 0;
    overflow: hidden;
    height: 100%;
  }
  .pattern {
    display: none !important;
  }
  .js-words div {
    will-change: auto !important;
  }
  p.parag,
  .hero__title__h1,
  .hero__subt,
  .note__video__wrap,
  .stats__spiral,
  .subtitle,
  .description,
  .title_serif,
  .title_sans {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  canvas.webgl {
    /* Once frozen, the canvas is a plain bitmap; keep it off the
       compositor's blend path. */
    mix-blend-mode: normal !important;
  }
  /* On phones and tablets the 3D scene is not started at all (app.module.js
     removes the canvas and adds body.no-webgl). The canvas was the only thing
     painting the dark field behind the light type, so the hero paints that
     field itself: the same flat navy as the quoting section, no per-frame work
     and no terrain. */
  body.no-webgl .hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100svh;
    background-color: #12192b;
    background-image: none;
  }
  /* The pills stay side by side, the way they sit on desktop, instead of
     stretching into two full-width bars. */
  body.no-webgl .cl-hero-cta {
    width: auto;
    flex-wrap: nowrap;
    padding: 0 16px;
  }
  body.no-webgl .cl-hero-cta__primary,
  body.no-webgl .cl-hero-cta__secondary {
    flex: 0 1 auto;
    width: auto;
    font-size: 11px;
    padding: 12px 16px;
  }
  /* Quoting section. Desktop puts the title on the left and the ring on the
     right over this same navy. The template's phone rules stack them and
     shrink the type until the block reads as empty, and GSAP parks the ring
     at scale 0 until its scroll trigger. Both are undone here so the section
     shows the title, the line and the ring immediately. */
  body.no-webgl .stats__hold {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 100svh;
    padding: 16vh 18px 12vh;
    box-sizing: border-box;
  }
  body.no-webgl .stats__text {
    align-items: flex-start;
    flex: 1 1 auto;
    width: auto;
    max-width: 54%;
  }
  body.no-webgl .stats__text__serif,
  body.no-webgl .stats__text__sans,
  body.no-webgl .stats__text__parag {
    text-align: left;
  }
  body.no-webgl .stats .title_serif,
  body.no-webgl .stats .title_sans {
    font-size: 34px;
    line-height: 1.02;
  }
  body.no-webgl .stats__text__sans {
    margin-top: 0;
  }
  body.no-webgl .stats__text__parag {
    width: auto;
    margin-top: 16px;
  }
  body.no-webgl .stats .small-parag {
    font-size: 13px;
    line-height: 1.45;
  }
  body.no-webgl .stats__stats {
    flex: 0 0 auto;
    width: 42vw;
  }
  body.no-webgl .stats_stats__pattern,
  body.no-webgl .stats_stats__pattern img,
  body.no-webgl .stats_stats__solid,
  body.no-webgl .stats_stats__border {
    transform: none !important;
  }
  body.no-webgl .stats_stats__pattern {
    width: 42vw;
    background: #1b3158;
  }
  /* The lines meet on a tiny texture disc that only reads on the desktop
     framing. On a phone it sits as a stray blob above the ring. */
  body.no-webgl .onclock__spiral__center.stats__spiral__center__pattern {
    display: none;
  }
  body.no-webgl .stats_stats__solid {
    width: 34vw;
  }
  body.no-webgl .stats_stats__border {
    width: 30vw;
  }
  body.no-webgl .onclock__spiral.stats__spiral {
    width: 160%;
    margin-top: -6vh;
    left: -30%;
  }
  .cursor-insight,
  .trg-sound,
  .trg-note {
    display: none !important;
  }
}

/* Phones. The insights tab is parked off the left edge and only its tail
   peeks in. There is no hover to slide it open, so the clipped letters stay
   out of the way. The closing block stacks and tightens. */
@media (max-width: 767px) {
  .insigh-pannel {
    display: none;
  }
  .cl-hero-cta {
    gap: 10px;
    margin-top: 28px;
    padding: 0 20px;
  }
  .cl-closing {
    padding: 64px 20px 32px;
  }
  .cl-closing__title {
    font-size: 40px;
    line-height: 1.02;
  }
  .cl-closing__text {
    max-width: 34ch;
  }
  .cl-closing__tier {
    padding: 16px 18px;
    border-radius: 14px;
  }
  .cl-closing__foot {
    margin-top: 40px;
    text-transform: none;
    letter-spacing: 0.02em;
  }
}

/* ============================================================================
   Ledger mark at the centre of the clock
   ----------------------------------------------------------------------------
   The slot was a 5.2rem circle with a border and overflow:hidden, built to clip
   a round texture. A wordmark is 3:1, so the circle has to be undone entirely —
   clipping it to a disc would crop the word.
   ========================================================================== */
.onclock__spiral__center.cl-ledger-center {
  width: clamp(140px, 16vw, 240px);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* The ring's radiating lines converge here, so the coin sits above them. */
  z-index: 3;
}

.cl-ledger {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

/* ============================================================================
   Marks inside the pendulum balls
   ----------------------------------------------------------------------------
   The balls are bordered discs with their texture sized to fill edge to edge.
   A logo cannot fill a circle the same way — square it off and it gets clipped
   at the curve — so each mark is inset and centred instead.

   The wrappers keep their classes untouched: the engine collects
   .pendulum__ball__img with querySelectorAll and animates opacity on them, so
   the swing and fade are unchanged.
   ========================================================================== */
.pendulum__ball__img {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cl-pend-mark {
  display: block;
  height: auto;
  object-fit: contain;
}

/* Memecoin logos from Arc (COOL, LONG, ARCAT). The source art is square with
   its own ground, so each one fills the disc and is clipped to the circle. */
.cl-pend-mark--coin {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* The product mark replaces the LONG coin. The file is a black square with
   the bag centred, so it is scaled up inside the clipped disc. */
.pendulum__ball__img__middle .cl-pend-mark--logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 0;
}

.pendulum__ball__img {
  background-color: var(--white);
}

.pendulum__ball__img.pendulum__ball__img__middle {
  background-color: #000;
}