/* Peak's room: a cream key light, the amber bounce, the falling corners and film grain,
   the same recipe as the app's AppBackground. */
html, body { overflow-x: clip; }
body { position: relative; isolation: isolate; }
.room { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.room::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at -8% -10%, rgba(245, 238, 228, 0.075) 0%, rgba(245, 238, 228, 0.03) 40%, rgba(245, 238, 228, 0) 72%),
    radial-gradient(ellipse 80% 55% at 108% 110%, rgba(224, 164, 88, 0.055) 0%, rgba(224, 164, 88, 0.02) 42%, rgba(224, 164, 88, 0) 75%),
    radial-gradient(ellipse 120% 100% at 50% 45%, rgba(3, 2, 2, 0) 55%, rgba(3, 2, 2, 0.55) 100%);
}
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.5s steps(3) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; }
  33% { background-position: -71px 43px; }
  66% { background-position: 57px -89px; }
  100% { background-position: 0 0; }
}
.logo { display: block; width: 104px; height: auto; }
header.top .logo, .wrap > .logo { margin-bottom: 0.25rem; }

/* Glass, as in the app: the ground lit by cream, a cream edge, no shadow. */
.card {
  background: rgba(34, 30, 27, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  backdrop-filter: blur(22px) saturate(115%);
  border: 1px solid rgba(245, 238, 228, 0.17);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(245, 238, 228, 0.06);
}
h2 { letter-spacing: 0.005em; }

/* The headline emerges out of the dark, like the app's .emerge entrance. */
@keyframes emerge {
  from { opacity: 0; filter: blur(14px); transform: scale(1.06); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.logo { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
h1 { transform-origin: left center; animation: emerge 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both; }
h1 + .meta, .meta { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
.lead { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.84s both; }
main > .card:first-of-type, .wrap > .card:first-of-type { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.98s both; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .logo, h1, .meta, .lead, .card { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .card { background: #221E1B; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .card { border-color: rgba(245, 238, 228, 0.4); }
  .grain { display: none; }
}