@import url('./components/ui/tilted-grid-hero.css');

:root {
  /* Match desktop/installer/style.css, including its launch button and wordmark. */
  --neutral-foreground: color-mix(in srgb, #fff 95.4866%, #000);
  --neutral-canvas: color-mix(in srgb, #fff 4.7126%, #000);
  --bg: var(--neutral-canvas);
  --txt: var(--neutral-foreground);
  --line: color-mix(in srgb, var(--neutral-foreground) 6.66667%, transparent);
  --muted: color-mix(in srgb, var(--neutral-foreground) 54.11765%, transparent);
  --accent: #dffe96;
  --sans: Inter, AppleSDGothicNeo, sans-serif;
  --ease: cubic-bezier(.22, .85, .25, 1);
  --wordmark-height: min(28vw, 28svh);
  color-scheme: dark;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-align: center;
  color: var(--txt);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { position: relative; margin: 0; min-width: 280px; min-height: 100svh; overflow-x: clip; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
[hidden] { display: none !important; }
.installer-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .75; isolation: isolate; }
.installer-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.installer-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .21; mix-blend-mode: overlay; }
.landing-hero { position: relative; z-index: 3; height: max(560px, calc(100svh - var(--wordmark-height))); }
.hero-reel { position: absolute; inset: 0; }
.hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; padding: clamp(76px, 9svh, 112px) 20px 24px; pointer-events: none; }
h1 { margin: 0; color: var(--txt); font-size: clamp(5rem, 5.4vw, 8rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.065em; line-height: 1.04; text-wrap: balance; }
.start-wrap { position: relative; isolation: isolate; pointer-events: auto; }
.download-noodle { display: inline-flex; align-items: center; justify-content: center; padding: 15px 25px; border: solid 2px var(--line); border-radius: 100px; background: var(--txt); color: var(--bg); backdrop-filter: blur(1.5rem); -webkit-backdrop-filter: blur(1.5rem); font-size: 24px; font-weight: 700; letter-spacing: -1px; line-height: 1; transition: background 160ms, transform 220ms var(--ease); }
.download-noodle:hover { background: var(--accent); }
.download-noodle:active { transform: scale(.96); }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.download-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.download-options .download-noodle { font-size: 18px; padding: 13px 20px; }
.download-terms { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.download-terms a { color: var(--txt); }
.download-terms a:hover { color: var(--accent); }
.platform-note { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.wordmark { position: relative; z-index: 2; height: var(--wordmark-height); overflow: hidden; color: var(--txt); isolation: isolate; }
.wordmark-backdrop { position: absolute; inset: auto 0 0; z-index: 1; height: min(68svh, 100%); pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 65%, transparent) 55%, var(--bg)); }
.wordmark-backdrop::before, .wordmark-backdrop::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wordmark-backdrop::before { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(to top, #000 40%, transparent); }
.wordmark-backdrop::after { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); mask-image: linear-gradient(to top, #000, transparent 75%); }
.wordmark canvas { display: block; width: 100%; height: 100%; }
.wordmark-label { position: absolute; inset: auto 0 -.2em; font-size: 29vw; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.wordmark.is-ready .wordmark-label { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .hero-content { padding-top: clamp(92px, 13svh, 128px); padding-bottom: 40px; }
  h1 { font-size: clamp(40px, 10.5vw, 62px); }
  .download-noodle { font-size: 21px; }
  .download-options { max-width: 320px; }
  .download-options .download-noodle { font-size: 15px; padding: 12px 16px; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .hero-content { padding-top: 65px; }
  h1 { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { a { transition: none; } }