/* Stable entry preview v10: loaded after the main stylesheet on purpose. */
.entry-splash,
.entry-splash * {
  box-sizing: border-box !important;
}

.entry-splash .entry-splash__reel {
  position: relative !important;
  z-index: 3 !important;
  width: min(1180px, 94vw) !important;
  min-height: 0 !important;
  height: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  contain: layout paint !important;
  isolation: isolate !important;
  font-size: clamp(50px, 8.4vw, 138px) !important;
  line-height: .9 !important;
}

.entry-splash .entry-splash__reel > span,
.entry-splash .entry-splash__reel > span.is-visible {
  animation: none !important;
  transition: none !important;
}

.entry-splash .entry-splash__reel > span:not(#entrySplashWord),
.entry-splash .entry-splash__reel > :not(#entrySplashWord),
.entry-splash .entry-splash__reel > span:not(#entrySplashWord) * {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}

.entry-splash .entry-splash__reel > #entrySplashWord,
.entry-splash .entry-splash__reel > #entrySplashWord.is-visible {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: min(1180px, 94vw) !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: .012em !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  color: #050505 !important;
  text-align: center !important;
  letter-spacing: .005em !important;
  overflow: hidden !important;
}

.entry-splash .entry-splash__reel > #entrySplashWord i {
  display: inline-block !important;
  flex: 0 0 auto !important;
  min-width: .12em !important;
  font: inherit !important;
  font-style: normal !important;
  color: currentColor !important;
  opacity: 0;
  transform: translate3d(0, .5em, 0) rotateX(62deg);
  filter: blur(10px);
  animation: entryLetterWriteStable .62s cubic-bezier(.18, .82, .22, 1) calc(.12s + var(--letter-index, 0) * .052s) both !important;
  will-change: opacity, transform, filter;
}

.entry-splash .entry-splash__mark {
  margin-top: 0 !important;
  background: #fff !important;
}

.entry-splash .entry-splash__mark::before {
  animation: entryCenterLineClean .42s cubic-bezier(.22, 1, .36, 1) .22s both !important;
}

.entry-splash .entry-splash__stroke {
  animation-duration: .24s !important;
  animation-delay: var(--delay) !important;
}

.entry-splash .entry-splash__stroke:nth-of-type(1) { animation-delay: .08s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(2) { animation-delay: .13s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(3) { animation-delay: .18s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(4) { animation-delay: .23s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(5) { animation-delay: .28s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(6) { animation-delay: .33s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(7) { animation-delay: .38s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(8) { animation-delay: .43s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(9) { animation-delay: .48s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(10) { animation-delay: .53s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(11) { animation-delay: .58s !important; }
.entry-splash .entry-splash__stroke:nth-of-type(12) { animation-delay: .63s !important; }

.entry-splash .entry-splash__pen {
  animation: entryLogoPenClean 1s cubic-bezier(.2, .82, .22, 1) .22s forwards !important;
}

.entry-splash .entry-splash__logo {
  mix-blend-mode: multiply !important;
  animation: entryLogoSettleClean .36s cubic-bezier(.22, 1, .36, 1) 1.34s forwards !important;
}

.entry-splash .entry-splash__meta {
  animation-delay: 1.42s !important;
}

.entry-splash .entry-splash__meta i {
  animation-delay: 1.5s !important;
}

@keyframes entryLetterWriteStable {
  0% {
    opacity: 0;
    transform: translate3d(0, .5em, 0) rotateX(62deg);
    filter: blur(10px);
  }
  54% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0);
    filter: blur(0);
  }
}

@media (max-width: 768px) {
  .entry-splash .entry-splash__reel {
    width: 96vw !important;
    min-height: 0 !important;
    height: 0 !important;
    font-size: clamp(32px, 9.6vw, 60px) !important;
  }

  .entry-splash .entry-splash__reel > #entrySplashWord,
  .entry-splash .entry-splash__reel > #entrySplashWord.is-visible {
    max-width: 96vw !important;
    letter-spacing: 0 !important;
  }
}

/* Clean handwritten logo reveal 2026-07-06.
   This file loads after styles.css, so the final loader fix must live here too. */
.entry-splash,
.entry-splash__panel,
.entry-splash__mark {
  background: #fff !important;
}

.entry-splash__panel {
  box-shadow: none !important;
}

.entry-splash__mark {
  overflow: hidden !important;
  isolation: isolate !important;
}

.entry-splash__mark::before {
  display: none !important;
  content: none !important;
}

.entry-splash__stroke,
.entry-splash__pen {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.entry-splash__logo {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  clip-path: inset(0 100% 0 0);
  animation:
    entryCleanLogoWrite 1.18s steps(18, end) .1s forwards,
    entryCleanLogoSettle .34s cubic-bezier(.22, 1, .36, 1) 1.28s both !important;
  will-change: clip-path, transform;
}

@keyframes entryCleanLogoWrite {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes entryCleanLogoSettle {
  0% { transform: translate3d(0, 2px, 0) scale(.995); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .entry-splash__logo {
    clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }
}

/* Entry logo-only guard 2026-07-06.
   The intro must show the handwritten logo, not a text wordmark/title. */
.entry-splash .entry-splash__reel,
.entry-splash .entry-splash__meta {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.entry-splash .entry-splash__panel {
  display: grid !important;
  place-items: center !important;
}

.entry-splash .entry-splash__mark {
  display: grid !important;
  place-items: center !important;
  width: min(920px, 92vw) !important;
  max-width: 92vw !important;
  min-height: min(620px, 72vh) !important;
  margin: 0 !important;
  background: #fff !important;
}

.entry-splash .entry-splash__logo {
  display: block !important;
  width: min(780px, 86vw) !important;
  height: auto !important;
  max-height: 54vh !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  clip-path: inset(0 100% 0 0);
  animation:
    entryCleanLogoWrite 1.18s steps(22, end) .1s forwards,
    entryCleanLogoSettle .34s cubic-bezier(.22, 1, .36, 1) 1.28s both !important;
}

@media (max-width: 768px) {
  .entry-splash .entry-splash__mark {
    width: 94vw !important;
    min-height: min(560px, 74vh) !important;
  }

  .entry-splash .entry-splash__logo {
    width: min(620px, 90vw) !important;
    max-height: 48vh !important;
  }
}

/* Entry logo centering fix 2026-07-06.
   styles.css still contains the old absolute centered logo rules; reset every
   positional property here so the transparent handwritten logo cannot drift. */
.entry-splash .entry-splash__mark {
  position: relative !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

.entry-splash .entry-splash__logo {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: min(860px, 82vw) !important;
  max-width: 82vw !important;
  max-height: 34vh !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  clip-path: inset(0 100% 0 0);
  animation:
    entryCenteredLogoWrite 1.08s steps(24, end) .08s forwards,
    entryCenteredLogoSettle .36s cubic-bezier(.22, 1, .36, 1) 1.18s both !important;
}

@keyframes entryCenteredLogoWrite {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes entryCenteredLogoSettle {
  0% { transform: translate3d(0, 2px, 0) scale(.99); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 768px) {
  .entry-splash .entry-splash__mark {
    width: 94vw !important;
    min-height: min(520px, 72vh) !important;
  }

  .entry-splash .entry-splash__logo {
    width: min(620px, 88vw) !important;
    max-width: 88vw !important;
    max-height: 28vh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-splash .entry-splash__logo {
    clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }
}

/* Lightweight entry preview 2026-07-06.
   Keep the intro premium, readable and cheap to render on mobile browsers. */
.entry-splash {
  display: grid !important;
  place-items: center !important;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
  background: #fff !important;
  background-image: none !important;
  transform: none !important;
  contain: layout paint !important;
}

.entry-splash::before,
.entry-splash::after,
.entry-splash__panel::before,
.entry-splash__panel::after,
.entry-splash__mark::before,
.entry-splash__mark::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.entry-splash .entry-splash__panel {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: 1fr auto auto 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  width: min(1180px, 94vw) !important;
  min-height: min(720px, calc(100svh - 32px)) !important;
  padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 64px) !important;
  background: #fff !important;
  border: 1px solid rgba(5, 5, 5, .08) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.entry-splash .entry-splash__panel {
  background-image:
    linear-gradient(#050505, #050505),
    linear-gradient(#050505, #050505) !important;
  background-repeat: no-repeat !important;
  background-size:
    calc(100% - clamp(36px, 8vw, 128px)) 1px,
    calc(100% - clamp(36px, 8vw, 128px)) 1px !important;
  background-position:
    center clamp(18px, 4vw, 56px),
    center calc(100% - clamp(18px, 4vw, 56px)) !important;
}

.entry-splash .entry-splash__mark {
  grid-row: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: min(860px, 88vw) !important;
  max-width: 88vw !important;
  min-height: clamp(170px, 30vh, 300px) !important;
  height: auto !important;
  margin: 0 !important;
  background: #fff !important;
  border: 0 !important;
  overflow: hidden !important;
}

.entry-splash .entry-splash__logo {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: min(720px, 80vw) !important;
  max-width: 80vw !important;
  max-height: 28vh !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  clip-path: inset(0 100% 0 0);
  animation:
    entryLightLogoWrite .72s steps(16, end) .08s forwards,
    entryLightLogoSettle .18s ease-out .82s both !important;
  will-change: clip-path;
}

.entry-splash .entry-splash__meta {
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: auto minmax(40px, 88px) auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: min(680px, 78vw) !important;
  margin-top: clamp(12px, 2vw, 22px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #050505 !important;
  font: 700 11px/1.3 "Inter", Arial, sans-serif !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  animation: entryLightMetaIn .24s ease-out .86s both !important;
}

.entry-splash .entry-splash__meta i {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: #050505 !important;
  transform: none !important;
  animation: none !important;
}

.entry-splash .entry-splash__reel,
.entry-splash .entry-splash__stroke,
.entry-splash .entry-splash__pen {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

@keyframes entryLightLogoWrite {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes entryLightLogoSettle {
  from { transform: translate3d(0, 1px, 0) scale(.998); }
  to { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes entryLightMetaIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .entry-splash .entry-splash__panel {
    width: 94vw !important;
    min-height: min(640px, calc(100svh - 24px)) !important;
    padding: 26px 16px !important;
    background-size:
      calc(100% - 36px) 1px,
      calc(100% - 36px) 1px !important;
    background-position:
      center 18px,
      center calc(100% - 18px) !important;
  }

  .entry-splash .entry-splash__mark {
    width: 90vw !important;
    min-height: clamp(150px, 27vh, 240px) !important;
  }

  .entry-splash .entry-splash__logo {
    width: min(560px, 86vw) !important;
    max-width: 86vw !important;
    max-height: 24vh !important;
  }

  .entry-splash .entry-splash__meta {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 86vw !important;
    margin-top: 10px !important;
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: .2em !important;
  }

  .entry-splash .entry-splash__meta i {
    width: 88px !important;
    justify-self: center !important;
  }
}

/* Futuristic entry preview v11 2026-07-09.
   Final owner for the intro: faster, smoother, logo-first, and cheap to render. */
.entry-splash {
  display: grid !important;
  place-items: center !important;
  padding:
    max(14px, env(safe-area-inset-top, 0px))
    max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px))
    max(14px, env(safe-area-inset-left, 0px)) !important;
  background:
    radial-gradient(780px 360px at 50% 46%, rgba(5, 5, 5, .045), transparent 72%),
    linear-gradient(180deg, #fff 0%, #fafafa 100%) !important;
  opacity: 1 !important;
  transition: opacity .26s ease-out, transform .26s cubic-bezier(.22, 1, .36, 1) !important;
}

.entry-splash.is-hidden {
  opacity: 0 !important;
  transform: scale(1.006) !important;
  pointer-events: none !important;
}

.entry-splash .entry-splash__panel {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 1fr auto auto 1fr !important;
  place-items: center !important;
  width: min(1180px, 94vw) !important;
  min-height: min(700px, calc(100svh - 28px)) !important;
  padding: clamp(26px, 5vw, 70px) clamp(18px, 4vw, 64px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(5, 5, 5, .08) !important;
  border-radius: clamp(18px, 2.6vw, 34px) !important;
  background:
    linear-gradient(#050505, #050505) center clamp(18px, 4vw, 54px) / calc(100% - clamp(48px, 8vw, 136px)) 1px no-repeat,
    linear-gradient(#050505, #050505) center calc(100% - clamp(18px, 4vw, 54px)) / calc(100% - clamp(48px, 8vw, 136px)) 1px no-repeat,
    linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.86) 50%, transparent 58%),
    #fff !important;
  box-shadow: 0 28px 90px rgba(5, 5, 5, .08) !important;
  transform: translateZ(0) !important;
  contain: layout paint !important;
}

.entry-splash .entry-splash__panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .75 !important;
  background:
    linear-gradient(100deg, transparent 0%, transparent 38%, rgba(5,5,5,.035) 47%, rgba(255,255,255,.95) 50%, rgba(5,5,5,.035) 53%, transparent 62%, transparent 100%) !important;
  transform: translateX(-58%) !important;
  animation: entryFutureSweep .96s cubic-bezier(.16, 1, .3, 1) .1s both !important;
}

.entry-splash .entry-splash__mark {
  position: relative !important;
  z-index: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: min(900px, 88vw) !important;
  max-width: 88vw !important;
  min-height: clamp(170px, 28vh, 300px) !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  contain: layout paint !important;
}

.entry-splash .entry-splash__logo {
  position: static !important;
  display: block !important;
  width: min(780px, 82vw) !important;
  max-width: 82vw !important;
  max-height: 30vh !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 18px 34px rgba(5, 5, 5, .08)) !important;
  mix-blend-mode: multiply !important;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0, 4px, 0) scale(.992);
  animation:
    entryFutureLogoWrite .82s cubic-bezier(.2, .86, .2, 1) .08s both,
    entryFutureLogoSettle .32s cubic-bezier(.16, 1, .3, 1) .72s both !important;
  will-change: clip-path, transform, opacity !important;
}

.entry-splash .entry-splash__meta {
  position: relative !important;
  z-index: 1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: auto minmax(42px, 92px) auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: min(720px, 80vw) !important;
  margin-top: clamp(12px, 2vw, 22px) !important;
  opacity: 0 !important;
  visibility: visible !important;
  color: #050505 !important;
  font: 750 11px/1.3 "Inter", Arial, sans-serif !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  animation: entryFutureMetaIn .24s ease-out .78s both !important;
}

.entry-splash .entry-splash__meta i {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: #050505 !important;
}

.entry-splash .entry-splash__reel,
.entry-splash .entry-splash__stroke,
.entry-splash .entry-splash__pen {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes entryFutureLogoWrite {
  0% {
    opacity: .96;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-5px, 4px, 0) scale(.992);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 2px, 0) scale(.998);
  }
}

@keyframes entryFutureLogoSettle {
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes entryFutureSweep {
  0% {
    opacity: 0;
    transform: translateX(-62%);
  }
  24% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translateX(62%);
  }
}

@keyframes entryFutureMetaIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .entry-splash .entry-splash__panel {
    width: 94vw !important;
    min-height: min(610px, calc(100svh - 22px)) !important;
    padding: 24px 16px !important;
    border-radius: 24px !important;
    background-size:
      calc(100% - 38px) 1px,
      calc(100% - 38px) 1px,
      auto,
      auto !important;
    background-position:
      center 18px,
      center calc(100% - 18px),
      center,
      center !important;
  }

  .entry-splash .entry-splash__mark {
    width: 90vw !important;
    min-height: clamp(150px, 25vh, 230px) !important;
  }

  .entry-splash .entry-splash__logo {
    width: min(560px, 86vw) !important;
    max-width: 86vw !important;
    max-height: 23vh !important;
  }

  .entry-splash .entry-splash__meta {
    grid-template-columns: 1fr !important;
    width: 86vw !important;
    gap: 7px !important;
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  .entry-splash .entry-splash__meta i {
    width: 88px !important;
    justify-self: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-splash .entry-splash__panel::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .entry-splash .entry-splash__logo,
  .entry-splash .entry-splash__meta {
    clip-path: inset(0 0 0 0) !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Sonic logo preview v12 2026-07-09.
   A musical/equalizer layer around the handwritten logo, without autoplay audio
   and without expensive canvas/video work. */
.entry-splash .entry-splash__panel::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: clamp(28px, 8vw, 128px) !important;
  right: clamp(28px, 8vw, 128px) !important;
  bottom: clamp(30px, 6vw, 86px) !important;
  z-index: 1 !important;
  height: 34px !important;
  pointer-events: none !important;
  opacity: .62 !important;
  background:
    linear-gradient(90deg, transparent, rgba(5,5,5,.22), transparent) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      rgba(5,5,5,.78) 9px 11px,
      transparent 11px 20px
    ) !important;
  clip-path: polygon(
    0 58%, 3% 54%, 6% 72%, 9% 32%, 12% 66%, 15% 44%,
    18% 76%, 21% 26%, 24% 61%, 27% 38%, 30% 72%, 33% 48%,
    36% 83%, 39% 22%, 42% 56%, 45% 34%, 48% 70%, 51% 42%,
    54% 78%, 57% 28%, 60% 63%, 63% 40%, 66% 74%, 69% 46%,
    72% 81%, 75% 30%, 78% 60%, 81% 36%, 84% 69%, 87% 52%,
    90% 76%, 93% 44%, 96% 64%, 100% 58%,
    100% 100%, 0 100%
  ) !important;
  transform-origin: 50% 100% !important;
  animation: entrySonicBars 1.1s cubic-bezier(.16, 1, .3, 1) .14s both !important;
}

.entry-splash .entry-splash__mark::before,
.entry-splash .entry-splash__mark::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  transform: translate3d(-50%, -50%, 0) scale(.88) !important;
}

.entry-splash .entry-splash__mark::before {
  width: min(760px, 82vw) !important;
  aspect-ratio: 4 / 1 !important;
  border: 1px solid rgba(5, 5, 5, .12) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(5, 5, 5, .07), transparent 42%),
    linear-gradient(90deg, transparent 0 14%, rgba(5, 5, 5, .12) 50%, transparent 86%) !important;
  opacity: 0 !important;
  animation: entrySonicHalo .92s cubic-bezier(.16, 1, .3, 1) .08s both !important;
}

.entry-splash .entry-splash__mark::after {
  width: min(560px, 70vw) !important;
  aspect-ratio: 5 / 1 !important;
  border-top: 1px solid rgba(5, 5, 5, .34) !important;
  border-bottom: 1px solid rgba(5, 5, 5, .08) !important;
  opacity: 0 !important;
  animation: entrySonicWave .82s cubic-bezier(.2, .82, .22, 1) .28s both !important;
}

.entry-splash .entry-splash__logo {
  z-index: 2 !important;
}

@keyframes entrySonicBars {
  0% {
    opacity: 0;
    transform: scaleY(.12) translateY(8px);
  }
  38% {
    opacity: .74;
    transform: scaleY(1.05) translateY(0);
  }
  72% {
    opacity: .56;
    transform: scaleY(.72) translateY(0);
  }
  100% {
    opacity: .34;
    transform: scaleY(.48) translateY(0);
  }
}

@keyframes entrySonicHalo {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.82);
  }
  48% {
    opacity: .62;
  }
  100% {
    opacity: .22;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes entrySonicWave {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scaleX(.55) scaleY(.82);
  }
  54% {
    opacity: .7;
  }
  100% {
    opacity: .18;
    transform: translate3d(-50%, -50%, 0) scaleX(1.05) scaleY(1);
  }
}

@media (max-width: 768px) {
  .entry-splash .entry-splash__panel::after {
    left: 26px !important;
    right: 26px !important;
    bottom: 48px !important;
    height: 28px !important;
    opacity: .48 !important;
  }

  .entry-splash .entry-splash__mark::before {
    width: 86vw !important;
  }

  .entry-splash .entry-splash__mark::after {
    width: 72vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-splash .entry-splash__panel::after,
  .entry-splash .entry-splash__mark::before,
  .entry-splash .entry-splash__mark::after {
    animation: none !important;
    opacity: .14 !important;
    transform: translate3d(-50%, -50%, 0) !important;
  }

  .entry-splash .entry-splash__panel::after {
    transform: none !important;
  }
}