/* LivePaper marketing site.
   Palette mirrors the app's dark theme (LivePaper.Wpf/Resources/Styles/ThemePalettes/DarkPalette.xaml)
   so the page and the product read as one thing. */

:root {
  --bg: #0D0F16;
  --bg-content: #10131A;
  --card: #151820;
  --card-border: #232734;
  --divider: #1B1F2B;
  --hover: #1A1E2A;
  --chip: #171B26;

  --text: #F2F3F7;
  --text-2: #8B90A0;
  --text-3: #5B6070;

  --accent: #8574EE;
  --accent-light: #9B82FF;
  --accent-glow: #7C5CFA;
  --accent-fill: linear-gradient(135deg, #6A48EC 0%, #5334C6 100%);
  --accent-fill-hover: linear-gradient(135deg, #7A58F6 0%, #6242DB 100%);
  --green: #39C277;

  --radius: 10px;
  --radius-lg: 16px;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);

  --font: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-light); text-decoration: none; }
a:hover { color: #B4A4FF; }

h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.narrow { max-width: 780px; }

.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn .icon { width: 16px; height: 16px; flex: none; }
.btn-primary {
  color: #fff;
  background: var(--accent-fill);
  box-shadow: 0 6px 20px -8px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-fill-hover); color: #fff; transform: translateY(-1px); }
.btn-ghost {
  color: var(--text);
  background: rgba(21, 24, 32, .6);
  border-color: var(--card-border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--hover); border-color: #2E3344; color: var(--text); }
.btn-sm { padding: 9px 14px; font-size: 0.875rem; }

.store-badge { display: inline-flex; border-radius: 6px; transition: transform .15s ease, box-shadow .15s ease; }
.store-badge img { width: 234px; height: 64px; }
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px var(--accent-glow); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 15, 22, .72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--divider);
}
.nav { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 1.05rem; }
.brand img { border-radius: 8px; }
.nav-links { display: flex; gap: 22px; margin-left: 8px; }
.nav-links a { color: var(--text-2); font-size: 0.925rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav .btn { margin-left: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: grid; align-items: center;
  padding-block: clamp(72px, 12vh, 140px);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--bg); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 25% 50%, rgba(13, 15, 22, .4) 0%, rgba(13, 15, 22, .7) 60%, rgba(13, 15, 22, .92) 100%),
    linear-gradient(180deg, rgba(13, 15, 22, .45) 0%, rgba(13, 15, 22, 0) 40%, var(--bg) 100%);
}
.hero-content { max-width: 720px; }

/* Entrance: the hero settles into place on load, each line a beat behind the
   one above it. `both` holds the opening frame before the delay elapses, so
   nothing flashes in at full opacity first. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes settle-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-content > * { animation: rise-in .85s cubic-bezier(.21, .6, .35, 1) both; }
.hero-content > :nth-child(1) { animation-delay: .10s; }
.hero-content > :nth-child(2) { animation-delay: .20s; }
.hero-content > :nth-child(3) { animation-delay: .32s; }
.hero-content > :nth-child(4) { animation-delay: .44s; }
.hero-content > :nth-child(5) { animation-delay: .56s; }
.site-header { animation: settle-in .7s ease both; }
.hero-media { animation: settle-in 1.4s ease both; }
.motion-toggle { animation: settle-in .8s ease .7s both; }
.shot .device { animation: rise-in .9s cubic-bezier(.21, .6, .35, 1) .5s both; }

/* Reduced motion means no travel, not no entrance: the same elements arrive on
   the same beats, fading rather than sliding. Windows reports this setting
   whenever Animation effects are off, which is most RDP sessions, so "nothing
   happens at all" would be a lot of people. */
@media (prefers-reduced-motion: reduce) {
  .hero-content > *,
  .shot .device {
    animation-name: settle-in;
    animation-duration: .5s;
    animation-timing-function: ease;
  }
  .site-header,
  .hero-media,
  .motion-toggle { animation-duration: .5s; }
}

/* Lets the visitor start or stop the background wallpaper. Auto-playing motion
   needs a stop control, and visitors whose system asks for reduced motion get
   the poster until they choose otherwise. */
.motion-toggle {
  position: absolute; right: var(--gutter); bottom: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font: inherit; font-size: 0.8rem; font-weight: 500; line-height: 1;
  color: var(--text-2); background: rgba(13, 15, 22, .6);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.motion-toggle:hover { color: var(--text); background: rgba(13, 15, 22, .8); border-color: #2F3447; }
.motion-toggle:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.motion-toggle svg { width: 13px; height: 13px; flex: none; }
.motion-toggle .motion-icon-pause,
.motion-toggle.is-playing .motion-icon-play { display: none; }
.motion-toggle.is-playing .motion-icon-pause { display: block; }
@media (max-width: 560px) {
  .motion-toggle { bottom: 12px; padding: 7px 11px; }
  .motion-toggle span { display: none; }
}
.eyebrow {
  color: var(--accent-light); font-weight: 600; font-size: 0.8rem;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.accent {
  background: linear-gradient(90deg, #B4A4FF 0%, #8574EE 60%, #6A48EC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { color: var(--text-2); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-top: 22px; max-width: 600px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.hero-meta {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--text-2); font-size: 0.875rem;
}
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ---------- Desktop shot ---------- */
.shot { margin-top: -40px; padding-bottom: 20px; }
.device {
  margin: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 40px 100px -40px rgba(124, 92, 250, .45), 0 20px 50px -30px rgba(0, 0, 0, .8);
}
.device img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.device figcaption, .screen figcaption, .video-card figcaption {
  color: var(--text-2); font-size: 0.9rem; padding: 14px 18px;
}
.device figcaption { border-top: 1px solid var(--divider); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-head { max-width: 680px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head .sub { color: var(--text-2); margin-top: 14px; font-size: 1.05rem; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.three { list-style: none; padding: 0; margin: 0; counter-reset: step; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: #2F3447; transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(124, 92, 250, .5); }
.card h3 { margin-top: 14px; }
.card p { color: var(--text-2); margin-top: 8px; font-size: 0.95rem; }
.card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(133, 116, 238, .12);
  border: 1px solid rgba(133, 116, 238, .25);
  display: grid; place-items: center;
}
.card-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.step {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-fill); color: #fff; font-weight: 700; font-size: 0.95rem;
}

/* ---------- Wallpaper gallery ----------
   Mirrors the app's Library: category pills on top, thumbnail cards below. The
   markup between the gallery markers in index.html is generated from the
   catalog by tools/build-gallery.py. */
.wallpapers { background: var(--bg-content); border-block: 1px solid var(--divider); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1;
  background: var(--chip); border: 1px solid var(--card-border); color: var(--text-2);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pill:hover { background: var(--hover); border-color: #2F3447; color: var(--text); }
.pill.is-active { background: var(--accent-fill); border-color: transparent; color: #fff; }
.pill-count { font-size: 0.75rem; opacity: .7; }
.pill.is-active .pill-count { opacity: .85; }
.pill:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

.gallery { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile {
  margin: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.tile:hover { border-color: #2F3447; transform: translateY(-2px); }
.tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Hover preview: the shared <video> is dropped into .tile-media over the
   thumbnail and faded in once it is actually playing (see site.js). */
.tile-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.tile-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.tile.is-previewing .tile-media video { opacity: 1; }
.tile.is-previewing::after {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(13, 15, 22, .6);
}
.tile { position: relative; }
.tile figcaption {
  padding: 9px 12px; font-size: 0.85rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile[hidden] { display: none; }
.gallery-empty { color: var(--text-2); padding: 24px 0; }
.gallery-more { display: flex; justify-content: center; margin-top: 26px; }
.gallery-more .btn[hidden] { display: none; }

/* ---------- Screens ---------- */
.screens { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen {
  margin: 0;
  border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--card);
}
.screen img { width: 100%; }
.screen figcaption { border-top: 1px solid var(--divider); }
.screen strong { color: var(--text); font-weight: 600; }

/* ---------- Trailer ---------- */
.trailer { background: var(--bg-content); border-block: 1px solid var(--divider); }
.videos { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-card { margin: 0; border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-frame .play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(13, 15, 22, .7); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease;
}
.video-frame .play svg { width: 34px; height: 34px; margin-left: 4px; }
.video-frame .play:hover { transform: scale(1.06); background: rgba(106, 72, 236, .85); }
.video-frame.is-playing .play { display: none; }
.video-card figcaption { border-top: 1px solid var(--divider); }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--card-border); border-radius: 12px; background: var(--card);
  padding: 0 20px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent-light); font-size: 1.3rem; line-height: 1; flex: none;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); padding-bottom: 18px; }

/* ---------- Final CTA ---------- */
.final { padding-top: 0; }
.final-card {
  text-align: center;
  padding: clamp(40px, 7vw, 72px) var(--gutter);
  border: 1px solid var(--card-border); border-radius: 24px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(124, 92, 250, .22) 0%, rgba(124, 92, 250, 0) 70%),
    var(--card);
  display: grid; justify-items: center;
}
.final-logo { border-radius: 20px; margin-bottom: 20px; }
.final .sub { color: var(--text-2); margin: 12px 0 28px; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--divider); padding-block: 40px; background: var(--bg-content); }
.footer-grid { display: grid; gap: 20px; grid-template-columns: 1fr auto; align-items: start; }
.footer-brand p { color: var(--text-3); font-size: 0.9rem; margin-top: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.9rem; }
.footer-links a { color: var(--text-2); }
.footer-links a:hover { color: var(--text); }
.copyright { grid-column: 1 / -1; color: var(--text-3); font-size: 0.8rem; margin-top: 8px; }
.copyright a { color: var(--text-2); }
.copyright a:hover { color: var(--text); }
.legal-note { grid-column: 1 / -1; color: var(--text-3); font-size: 0.75rem; }

/* ---------- Legal pages ---------- */
.legal { padding-block: clamp(48px, 7vw, 80px); }
.legal .container { max-width: 780px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal .updated { color: var(--text-3); font-size: 0.9rem; margin-top: 10px; }
.legal h2 { font-size: 1.25rem; margin-top: 40px; }
.legal p, .legal li { color: var(--text-2); margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 0; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal, .no-observer .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 760px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  .nav .btn span { display: none; }
  .grid, .screens, .videos { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-block: 64px 48px; }
  .shot { margin-top: 0; }
  .store-badge img { width: 205px; height: 56px; }
}
@media (max-width: 420px) {
  .btn-sm { padding: 9px 11px; font-size: 0.8rem; }
}