/* Tokens from the iOS redesign build's Theme.swift (design/ios-redesign on the
   design/ios-redesign branch): the always-dark Feed palette. */
:root {
  --bg: #060416;
  --glow-pink: #ff00a2;
  --glow-red: #ff002b;

  color-scheme: dark;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--bg);
  color: #fff;
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The feed's lights (FeedGlow): the pink ellipse behind Followed and the red one behind
   Popular, sized on the app's 390pt frame (--u is one point). Here nobody switches tabs,
   so they take turns being the strong one, as on a switch but slowly, and drift around
   behind the glass on their own. Different loop lengths keep the pattern from repeating
   soon. Phones get them a little larger, since here they light the whole screen. */
.glow {
  --u: clamp(1.3px, 100vw / 300, 2.6px);
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.glow span {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  filter: blur(calc(var(--u) * 70));
  will-change: translate, opacity;
}

.glow-pink {
  width: calc(var(--u) * 302);
  height: calc(var(--u) * 254);
  margin: calc(var(--u) * -127) 0 0 calc(var(--u) * -151);
  background: var(--glow-pink);
  translate: -26vw -24vh;
  animation:
    drift-pink 26s ease-in-out infinite,
    turn-pink 9s ease-in-out infinite alternate;
}

.glow-red {
  width: calc(var(--u) * 258);
  height: calc(var(--u) * 302);
  margin: calc(var(--u) * -151) 0 0 calc(var(--u) * -129);
  background: var(--glow-red);
  opacity: 0.35;
  translate: 24vw -28vh;
  animation:
    drift-red 33s ease-in-out infinite,
    turn-red 9s ease-in-out infinite alternate;
}

/* Pink circles clockwise and red counter-clockwise, so they cross and blend. */
@keyframes drift-pink {
  0%, 100% { translate: -26vw -24vh; }
  25% { translate: 20vw -30vh; }
  50% { translate: 26vw 22vh; }
  75% { translate: -18vw 28vh; }
}

@keyframes drift-red {
  0%, 100% { translate: 24vw -28vh; }
  25% { translate: -22vw -20vh; }
  50% { translate: -26vw 26vh; }
  75% { translate: 18vw 24vh; }
}

/* Followed selected (pink 1, red 0.35) to Popular selected (pink 0.35, red 1). */
@keyframes turn-pink {
  0%, 15% { opacity: 1; }
  85%, 100% { opacity: 0.35; }
}

@keyframes turn-red {
  0%, 15% { opacity: 0.35; }
  85%, 100% { opacity: 1; }
}

/* Liquid Glass stand-in: a translucent fill over a blurred backdrop with a lit top edge.
   It fills the window, inset by the gutter, with the text in its middle. */
.card {
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05));
  border: 1px solid rgb(255 255 255 / 0.18);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    0 30px 80px rgb(0 0 0 / 0.4);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
}

h1 {
  margin: 0;
  font-size: clamp(36px, 9vw, 88px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-align: center;
  text-shadow: 0 2px 24px rgb(6 4 22 / 0.35);
}

@media (min-width: 768px) {
  body {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow span {
    animation: none;
  }
}