/* Landing motion language adapted from the supplied React Bits references. */
.intro-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.intro-logo.sticker-peel {
  position: relative;
  width: 124px;
  height: 44px;
  overflow: visible;
  cursor: grab;
  transform: translateZ(0);
}

.sticker-peel-main,
.sticker-peel-flap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: clip-path .58s cubic-bezier(.22,.75,.22,1), transform .58s cubic-bezier(.22,.75,.22,1), filter .3s ease;
  will-change: clip-path, transform;
}

.sticker-peel-main {
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(2px 5px 5px rgba(39, 22, 94, .22));
}

.sticker-peel-flap {
  z-index: 1;
  transform-origin: bottom left;
  transform: translateY(-8px) scaleY(-1);
  opacity: .48;
  filter: saturate(.65) brightness(1.1);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.sticker-peel:hover .sticker-peel-main,
.sticker-peel.is-active .sticker-peel-main {
  clip-path: polygon(0 0, 100% 0, 100% 58%, 0 58%);
  transform: translateY(2px);
}

.sticker-peel:hover .sticker-peel-flap,
.sticker-peel.is-active .sticker-peel-flap {
  top: 42%;
  transform: translateY(0) scaleY(-1);
  clip-path: polygon(0 0, 100% 0, 100% 58%, 0 58%);
  opacity: .32;
}

.sticker-peel:active { cursor: grabbing; }
.sticker-peel img { pointer-events: none; }

.shiny-brand {
  display: inline-block;
  max-width: 210px;
  color: rgba(23, 21, 31, .54);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .095em;
  line-height: 1.45;
  white-space: normal;
  background-image: linear-gradient(115deg, currentColor 0%, currentColor 38%, #fff 50%, currentColor 62%, currentColor 100%);
  background-size: 240% auto;
  background-position: 150% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kairosShine 3.8s ease-in-out infinite;
}

.gradient-title {
  display: flex !important;
  justify-content: center;
  align-items: baseline;
  width: max-content;
  max-width: 100%;
  margin-inline: auto !important;
  white-space: nowrap;
  background-image: linear-gradient(110deg, #17131f 10%, #6141ed 39%, #b36cff 57%, #64dfff 72%, #17131f 95%);
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kairosGradient 7s ease-in-out infinite alternate;
}

.text-pressure > span {
  display: inline-block;
  min-width: .04em;
  color: transparent;
  font-variation-settings: 'wght' 520, 'wdth' 100, 'ital' 0;
  transform-origin: center bottom;
  transition: font-variation-settings .12s ease, transform .12s ease;
  will-change: font-variation-settings, transform;
}

.text-pressure .title-gap {
  min-width: .26em;
}

@keyframes kairosShine {
  0%, 24% { background-position: 150% center; }
  62%, 100% { background-position: -50% center; }
}

@keyframes kairosGradient {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (max-width: 720px) {
  .intro-brand-lockup { gap: 8px; }
  .intro-logo.sticker-peel { width: 96px; height: 36px; }
  .shiny-brand { max-width: 140px; font-size: 7px; }
  .gradient-title { font-size: clamp(34px, 10vw, 72px) !important; letter-spacing: -.09em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .shiny-brand, .gradient-title { animation: none; }
  .sticker-peel-main, .sticker-peel-flap, .text-pressure > span { transition: none; }
}