@font-face {
  font-family: "Ketchup Manis";
  src: url("../assets/fonts/Ketchup Manis Demo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --font-ui: "Crimson Pro", Georgia, serif;
  --font-display: "Ketchup Manis", Arial, sans-serif;

  /* Kometa tezligini faqat mana shu joydan o‘zgartirasan. */
  --comet-duration: 0.20s;
}

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: #fff9ee;
  background: #062550;
  font-family: var(--font-ui);
}

body.is-loading {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #e9bb66;
  outline-offset: 5px;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Sahna */

.landing {
  --scene-deep: #062550;
  --scene-light: #245ca7;
  --ink: #082b57;
  --paper: #fff9ee;
  --cream: #faead2;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);

  background:
    radial-gradient(
      ellipse at 77% 40%,
      var(--scene-light),
      transparent 60%
    ),
    var(--scene-deep);
}

/* Yuqori panel va logo */

.header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px clamp(24px, 3vw, 60px);
}

.brand {
  justify-self: start;
  color: #fff;
  text-decoration: none;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-logo {
  display: block;
  width: 74px;
  height: 49px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.brand-divider {
  width: 1px;
  height: 31px;
  background: rgb(255 246 231 / 45%);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1;

  background: linear-gradient(
    125deg,
    #fff 12%,
    #fff8ec 45%,
    var(--cream) 88%
  );

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-slogan {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 1.3px;
  text-align: center;
  opacity: 0.85;
}

/* Menyu */

.navigation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 999px;
}

.navigation,
.register {
  background: linear-gradient(
    135deg,
    var(--paper),
    var(--cream)
  );

  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--paper) 94%, transparent),
    color-mix(in srgb, var(--cream) 94%, transparent)
  );

  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 95%),
    inset 0 -1px 0 rgb(192 167 125 / 18%),
    0 8px 24px rgb(0 15 40 / 15%);
}

.nav-item {
  position: relative;
  z-index: 1;
  padding: 11px 17px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 300ms ease;
}

.nav-item[aria-pressed="true"],
.nav-item.is-highlighted {
  color: #fff;
}

.navigation.is-previewing
  .nav-item[aria-pressed="true"]:not(.is-highlighted) {
  color: var(--ink);
}

.nav-indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: var(--scene-deep);
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}

.navigation.is-ready .nav-indicator {
  opacity: 1;

  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    width 520ms cubic-bezier(0.22, 1, 0.36, 1),
    height 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tillar va kirish */

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-picker {
  position: relative;
}

.language-toggle,
.login,
.register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 999px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;

  transition:
    background 180ms,
    box-shadow 180ms,
    transform 180ms;
}

.language-toggle,
.login {
  color: #fff;

  background: linear-gradient(
    145deg,
    rgb(255 255 255 / 17%),
    rgb(255 255 255 / 5%)
  );

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 35%),
    0 7px 18px rgb(0 15 40 / 12%);
}

.language-toggle {
  padding-inline: 14px;
}

.register {
  color: var(--ink);
  border-color: rgb(255 255 255 / 78%);
}

.language-toggle:hover,
.language-toggle[aria-expanded="true"],
.login:hover {
  background: rgb(255 255 255 / 20%);
}

.register:hover {
  transform: translateY(-2px);

  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 28px rgb(0 15 40 / 20%);
}

.chevron {
  width: 15px;
  height: 15px;
  transition: transform 220ms;
}

.language-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.language-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 248px;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 23px;
  color: var(--ink);

  background: linear-gradient(
    145deg,
    rgb(246 250 255 / 96%),
    rgb(222 233 247 / 94%)
  );

  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);

  box-shadow:
    inset 0 1px 0 #fff,
    0 20px 45px rgb(0 14 39 / 25%);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px) scale(0.98);
  transform-origin: top right;

  transition:
    opacity 180ms,
    transform 220ms,
    visibility 220ms;
}

.language-picker.is-open .language-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.language-heading {
  margin: 4px 10px 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.65;
}

.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border: 0;
  border-radius: 13px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-size: 21px;
  font-weight: 600;
}

.language-option > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-option small {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.65;
}

.language-option:hover {
  background: var(--cream);
}

.language-option[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
}

.language-check {
  opacity: 0;
}

.language-option[aria-pressed="true"] .language-check {
  opacity: 1;
}

.language-flag {
  display: inline-flex;
  width: 24px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 25%);
}

.language-flag img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bosh ekran */

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 60px);
  min-width: 0;
  padding: 24px clamp(32px, 5vw, 100px) 140px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero-intro {
  margin: 0 0 15px;
  color: #fff;
  font-size: calc(clamp(38px, 3.4vw, 58px) + 8px);
  font-weight: 500;
  line-height: 1.15;
}

.hero-description {
  max-width: 680px;
  margin: 25px 0 0;
  color: #fff;
  font-size: calc(clamp(34px, 3vw, 50px) + 8px);
  font-weight: 500;
  line-height: 1.2;
}

.hero-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: min(64svh, 660px);
  min-width: 0;
}

.subject-object {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 650px;
  object-fit: contain;
  animation: hero-float 6s ease-in-out infinite;
}

@keyframes hero-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

/* Asosiy tugma */

.start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  padding: 10px 10px 10px 27px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 999px;
  color: #fff;

  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 24%),
    rgb(255 255 255 / 7%) 70%
  );

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 55%),
    0 12px 30px rgb(0 13 38 / 20%);

  font-size: 23px;
  font-weight: 600;
  transition: transform 180ms, box-shadow 180ms;
}

.start-button:hover {
  transform: translateY(-2px);

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 65%),
    0 16px 34px rgb(0 13 38 / 26%);
}

.start-arrow {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 50%;
  color: #fff;

  background: linear-gradient(
    145deg,
    rgb(255 255 255 / 27%),
    rgb(255 255 255 / 8%)
  );
}

.start-arrow .icon {
  width: 23px;
  height: 23px;
  transition: transform 200ms;
}

.start-button:hover .icon {
  transform: translateX(3px);
}

/* To‘lqin va Telegram */

.bottom-wave {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 215px;
  fill: var(--cream);
  pointer-events: none;
}

.telegram-link {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 3vw, 60px);
  bottom: 34px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 50%;
  color: var(--paper);

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 10%),
      transparent 60%
    ),
    var(--ink);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 38%),
    0 7px 20px rgb(0 0 0 / 18%);

  transition: transform 180ms;
}

.telegram-link svg {
  width: 25px;
  height: 25px;
}

.telegram-link:hover {
  transform: translateY(-3px);
}

.preview-status {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  max-width: calc(100% - 180px);
  margin: 0;
  padding: 12px 19px;
  border-radius: 16px;
  color: var(--paper);
  background: var(--ink);
  font-size: 16px;
  text-align: center;
}

.preview-status:empty {
  display: none;
}

/* Fan nomi */

.title-stage {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  padding: 12px 0;
}

.hero h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #eee;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 106px);
  font-weight: 400;
  line-height: 1.15;

  background-image:
    linear-gradient(
      115deg,
      transparent 38%,
      rgb(255 255 255 / 45%) 46%,
      #fff 49%,
      #fff 52%,
      rgb(255 255 255 / 45%) 56%,
      transparent 64%
    ),
    linear-gradient(
      135deg,
      #fff 0%,
      #eee 22%,
      #c1c1c1 40%,
      #fefefe 62%,
      #dedede 82%,
      #bdbdbd 100%
    );

  background-size: 240% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 45%))
    drop-shadow(0 3px 2px rgb(0 0 0 / 18%));

  animation: silver-brilliance 1.8s ease-in-out infinite;
}

@keyframes silver-brilliance {
  0%,
  10% {
    background-position: 120% 50%, 0 0;
  }

  72%,
  100% {
    background-position: -120% 50%, 0 0;
  }
}

.title-depth {
  position: absolute;
  z-index: 1;
  margin: 0;
  color: #858585;
  transform: translate(2px, 3px);

  text-shadow:
    1px 1px 0 #707070,
    2px 2px 0 #606060,
    0 7px 12px rgb(0 0 0 / 19%);

  pointer-events: none;
  user-select: none;
}

/* Bitta shakldan olinadigan shisha fon va ramka */

.title-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3% -3%;
  clip-path: var(--panel-clip);

  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 17%),
    rgb(255 255 255 / 3%) 48%,
    rgb(216 233 255 / 9%)
  );

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transform: rotate(-3deg);
  pointer-events: none;
}

.title-sky,
.title-orbit {
  position: absolute;
  z-index: 1;
  inset: 3% -3%;
  transform: rotate(-3deg);
  pointer-events: none;
}

.title-sky {
  overflow: hidden;
  clip-path: var(--panel-clip);
}

.title-orbit {
  z-index: 3;
  overflow: visible;
}

.title-orbit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit-track {
  fill: none;
  stroke: #c0c9d5;
  stroke-width: 1;
  opacity: 0.42;
}

.orbit-tail {
  fill: #c8d0dc;
  opacity: 0.7;
}

.orbit-head {
  fill: #e2e8f0;
  opacity: 0.85;
}

/* Yulduzlar */

.title-star {
  position: absolute;
  left: var(--x);
  top: -10px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #eef1f6;
  box-shadow: 0 0 4px rgb(255 255 255 / 30%);
  opacity: 0;

  animation:
    star-fall
    var(--duration)
    linear
    var(--delay)
    infinite;
}

.title-star:nth-child(4n) {
  border-radius: 0;
  clip-path: polygon(
    50% 0,
    62% 38%,
    100% 50%,
    62% 62%,
    50% 100%,
    38% 62%,
    0 50%,
    38% 38%
  );
}

@keyframes star-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.8);
  }

  25% {
    opacity: 0.5;
  }

  65% {
    opacity: 0.35;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(7px, var(--fall-distance, 160px), 0)
      scale(0.4);
  }
}

/* Kumushdagi kichik chaqnash */

.title-glint {
  position: absolute;
  z-index: 3;
  left: 76%;
  top: 23%;
  width: 22px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
}

.title-glint::before,
.title-glint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;

  clip-path: polygon(
    50% 0,
    57% 43%,
    100% 50%,
    57% 57%,
    50% 100%,
    43% 57%,
    0 50%,
    43% 43%
  );
}

.title-glint::after {
  transform: rotate(45deg) scale(0.55);
}

.title-stage.is-revealed .title-glint {
  animation: silver-glint 1.8s ease-in-out infinite;
}

@keyframes silver-glint {
  0%,
  35%,
  75%,
  100% {
    opacity: 0;
    transform: scale(0.35);
  }

  52% {
    opacity: 1;
    transform: scale(1);
  }

  60% {
    opacity: 0.6;
    transform: scale(0.7);
  }
}

.title-stage:not(.is-revealed) h1,
.title-stage:not(.is-revealed) .title-depth {
  visibility: hidden;
}

.title-stage:not(.is-revealed)::before,
.title-stage:not(.is-revealed) .title-orbit,
.title-stage:not(.is-revealed) .title-sky {
  opacity: 0;
}

/* Kometa */

.comet-flight {
  position: absolute;
  z-index: 4;
  inset: 3% -3%;
  transform: rotate(-3deg);
  pointer-events: none;
  overflow: visible;
}

.title-comet {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;

  transform: translate(
    var(--comet-from-x),
    var(--comet-from-y)
  );
}

.comet-body {
  position: absolute;
  width: 0;
  height: 0;
  transform: rotate(var(--comet-angle));
}

.comet-dust {
  position: absolute;
  right: 0;
  top: calc(var(--comet-halo) * -0.725);
  width: calc(var(--comet-tail) * 1.25);
  height: calc(var(--comet-halo) * 1.45);

  background: linear-gradient(
    90deg,
    transparent,
    rgb(213 157 62 / 12%) 35%,
    rgb(244 194 101 / 42%) 70%,
    rgb(255 224 158 / 75%) 96%
  );

  clip-path: polygon(
    0 30%,
    18% 28%,
    40% 33%,
    65% 37%,
    100% 44%,
    100% 56%,
    68% 63%,
    40% 72%,
    17% 78%,
    0 85%
  );

  filter: blur(3px);
}

.comet-dust::after {
  content: "";
  position: absolute;
  inset: 30% 0 24%;

  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 215 126 / 12%) 35%,
    rgb(255 242 197 / 80%)
  );

  clip-path: polygon(
    0 35%,
    100% 44%,
    100% 56%,
    0 80%
  );
}

.comet-core {
  position: absolute;
  left: calc(var(--comet-halo) * -0.5);
  top: calc(var(--comet-halo) * -0.5);
  width: var(--comet-halo);
  height: var(--comet-halo);
  border-radius: 50%;
  transform: scale(1.35);

  background: radial-gradient(
    ellipse at 51% 50%,
    #fffef1 0%,
    #fff9dc 5%,
    #ffe6a4 11%,
    rgb(255 205 107 / 65%) 22%,
    rgb(240 166 52 / 21%) 43%,
    transparent 70%
  );

  filter: blur(0.3px);
}

.comet-core::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 46%;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: #fffef4;

  box-shadow:
    0 0 6px #fff2c9,
    0 0 15px rgb(255 218 135 / 60%);
}

.title-stage.is-entering .title-comet {
  animation: comet-entry var(--comet-duration) linear both;
}

@keyframes comet-entry {
  0% {
    opacity: 0;
    transform: translate(
      var(--comet-from-x),
      var(--comet-from-y)
    );
  }

  12% {
    opacity: 1;
  }

  75% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate(
      var(--comet-to-x),
      var(--comet-to-y)
    );
  }
}

.title-stage.is-paused .title-star,
.title-stage.is-paused .title-comet {
  animation-play-state: paused;
}

body.is-loading .subject-object,
body.is-loading .hero h1 {
  animation-play-state: paused;
}

/* Ekranga moslashuv */

@media (max-width: 1500px) {
  .header {
    grid-template-columns: 1fr auto;
    gap: 20px;
  }

  .navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .hero-art {
    height: min(58svh, 560px);
  }
}

@media (min-width: 701px) and (max-height: 800px) {
  .header {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .hero {
    padding-top: 16px;
    padding-bottom: 145px;
  }

  .hero-art {
    height: min(52svh, 520px);
  }

  .hero-intro {
    font-size: calc(clamp(34px, 4.8svh, 46px) + 8px);
  }

  .hero-description {
    font-size: calc(clamp(30px, 4.4svh, 42px) + 8px);
    margin-top: 22px;
  }

  .hero h1 {
    font-size: clamp(44px, min(6vw, 11svh), 94px);
  }

  .start-button {
    margin-top: 32px;
  }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .navigation {
    flex-wrap: wrap;
    max-width: 100%;
    border-radius: 28px;
  }

  .nav-item {
    font-size: 18px;
    padding-inline: 12px;
  }

  .hero {
    gap: 24px;
    padding-inline: 30px;
  }

  .hero h1 {
    font-size: clamp(36px, 5.8vw, 60px);
  }
}

@media (max-width: 700px) {
  .header {
    padding: 22px;
    gap: 18px;
  }

  .brand-row {
    gap: 9px;
  }

  .brand-logo {
    width: 59px;
    height: 39px;
  }

  .brand-name {
    font-size: 27px;
  }

  .brand-slogan {
    font-size: 13px;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .language-toggle,
  .login,
  .register {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 16px;
  }

  .navigation {
    max-width: 100%;
    flex-wrap: wrap;
    border-radius: 25px;
  }

  .nav-item {
    padding: 11px 12px;
    font-size: 17px;
    white-space: normal;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 45px 24px 145px;
    text-align: center;
  }

  .hero-art {
    height: min(54svh, 430px);
  }

  .title-stage {
    margin-inline: auto;
  }

  .hero-intro {
    font-size: 47px;
  }

  .hero-description {
    font-size: 42px;
    margin-inline: auto;
  }

  .hero h1 {
    font-size: clamp(32px, 8.5vw, 58px);
  }

  .bottom-wave {
    height: 140px;
  }

  .telegram-link {
    right: 24px;
    bottom: 25px;
  }
}

@media (max-width: 420px) {
  .header {
    grid-template-columns: 1fr;
  }

  .header-actions {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: center;
  }

  .navigation {
    grid-column: 1;
    grid-row: 3;
  }

  .language-panel {
    right: auto;
    left: 0;
    transform-origin: top left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .title-star {
    top: var(--rest-y);
    opacity: 0.25;
  }

  .title-comet,
  .orbit-tail,
  .orbit-head,
  .title-glint {
    display: none;
  }
}