/* Главная lorrr.app: слово «lorrr», где «o» — аура, одна фраза и кнопки скачивания на чёрном.
   Аура зажигается, буквы проступают из темноты — сначала ближние к свету, — потом «o» дышит и медленно проходит
   по кругу цветов состояния (тон --h, как шкала в приложении), подсвечивая соседние буквы своим цветом. */
@font-face {
  font-family: Geist;
  src: url("/static/geist.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Тон ауры в OKLCH: 75 — янтарь иконки. Зарегистрирован, чтобы анимироваться плавно, а не скачком. */
@property --h {
  syntax: "<number>";
  inherits: true;
  initial-value: 75;
}

:root {
  --bg: #09090a;
  --ink: #f3eee4;
  --ink2: rgba(243, 238, 228, 0.56);
  --ink3: rgba(243, 238, 228, 0.36);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

main {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100svh;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(6vh + env(safe-area-inset-bottom));
  text-align: center;
}

/* Слово: буквы — SVG, «o» — круг с градиентом поверх, в тех же долях рамки 1623×684. */
.mark {
  --h: 75;
  --glow: oklch(0.86 0.14 var(--h));
  position: relative;
  width: min(54vw, 296px);
  margin: 0;
  animation: drift 72s linear 3s infinite;
}

.mark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Свет «o» на буквах: чем ближе к ней, тем больше её цвета; дальние чуть гаснут. */
.s0,
.s1 {
  stop-color: color-mix(in oklab, var(--glow) 38%, var(--ink));
}
.s2 {
  stop-color: color-mix(in oklab, var(--glow) 24%, var(--ink));
}
.s3 {
  stop-color: color-mix(in oklab, var(--glow) 12%, var(--ink));
}
.s4 {
  stop-color: color-mix(in oklab, var(--glow) 4%, var(--ink));
}
.s5 {
  stop-color: color-mix(in oklab, var(--ink) 90%, var(--bg));
}

/* Буквы проступают по расстоянию до света: правая соседка, «l», потом дальние «r». */
.mark path {
  animation: appear 1.1s var(--ease) both;
}
.mark .r1 {
  animation-delay: 0.35s;
}
.mark .l {
  animation-delay: 0.5s;
}
.mark .r2 {
  animation-delay: 0.7s;
}
.mark .r3 {
  animation-delay: 0.9s;
}

/* Профиль ауры — тот же, что у иконки приложения (свёрнутый с гауссианой), радиус круга — 2,6 видимых. */
.o {
  position: absolute;
  left: 28.85%;
  top: 60.96%;
  width: 62.55%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    oklch(0.969 0.051 calc(var(--h) + 23)) 0%,
    oklch(0.96 0.057 calc(var(--h) + 20)) 7.7%,
    oklch(0.935 0.074 calc(var(--h) + 14)) 13.5%,
    oklch(0.892 0.104 calc(var(--h) + 8) / 0.999) 19.2%,
    oklch(0.857 0.128 calc(var(--h) + 4) / 0.991) 23.8%,
    oklch(0.836 0.141 calc(var(--h) + 2) / 0.967) 27.7%,
    oklch(0.824 0.147 calc(var(--h) + 1) / 0.916) 31.5%,
    oklch(0.814 0.149 calc(var(--h) - 1) / 0.824) 35.4%,
    oklch(0.8 0.149 calc(var(--h) - 3) / 0.689) 39.2%,
    oklch(0.778 0.148 calc(var(--h) - 6) / 0.526) 43.1%,
    oklch(0.739 0.148 calc(var(--h) - 11) / 0.341) 48.1%,
    oklch(0.708 0.15 calc(var(--h) - 16) / 0.218) 53.8%,
    oklch(0.7 0.15 calc(var(--h) - 17) / 0.128) 61.5%,
    oklch(0.7 0.15 calc(var(--h) - 17) / 0.076) 71.2%,
    oklch(0.7 0.15 calc(var(--h) - 17) / 0.042) 82.7%,
    oklch(0.7 0.15 calc(var(--h) - 17) / 0) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation:
    ignite 1.6s var(--ease) both,
    breathe 7s ease-in-out 1.6s infinite alternate;
}

.line {
  margin: 30px 0 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink2);
  animation: rise 0.9s 1s var(--ease) both;
}

.get {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  animation: rise 0.9s 1.15s var(--ease) both;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 0.15s var(--ease),
    border-color 0.2s,
    background 0.2s;
}

.btn span {
  font-weight: 400;
  color: var(--ink3);
}

.btn svg {
  width: 17px;
  height: 17px;
  margin-left: -3px;
}

.btn[href]:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.07);
}

.btn[href]:active {
  transform: scale(0.97);
}

.btn[aria-disabled="true"] {
  color: var(--ink2);
  cursor: default;
}

/* На Android-телефоне его кнопка — главная. */
html.android #android[href] {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}

html.android #android[href] span {
  color: rgba(9, 9, 10, 0.5);
}

.btn:focus-visible {
  outline: 2px solid var(--glow, var(--ink));
  outline-offset: 3px;
}

/* Плёночное зерно, как в приложении, — заодно убирает полосы в градиенте ауры. */
.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.24;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@keyframes drift {
  to {
    --h: -285;
  }
}

@keyframes ignite {
  from {
    opacity: 0;
    scale: 0.35;
  }
}

@keyframes breathe {
  to {
    scale: 1.07;
    opacity: 0.9;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Телефон: кнопки одной ширины друг под другом. */
@media (max-width: 480px) {
  .line {
    margin-top: 24px;
    font-size: 16px;
  }
  .get {
    flex-direction: column;
    width: min(100%, 272px);
    margin-top: 36px;
  }
  .btn {
    justify-content: center;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .mark path,
  .o,
  .line,
  .get {
    animation: none;
  }
}