/* wwwroot/css/public.css
   Public marketing pages — Home, About.
   Depends on mp-tokens.css being loaded first.
   Uses 62.5% base font-size (1rem = 10px) matching the auth layout. */

/* ── Reset & base ───────────────────────────────────────── */

html { font-size: 62.5%; height: 100%; }

body {
  margin:      0;
  font-family: Roboto, sans-serif;
  font-size:   1.6rem;
  line-height: 1.6;
  background:  var(--mp-surface);
  color:       var(--mp-text-primary);
  overflow-x:  hidden;
}

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

h1, h2, h3, h4 { line-height: 1.2; margin: 0; }

a {
  color:           var(--mp-accent-violet);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

p { margin: 0; }

ol, ul { margin: 0; padding-left: 2rem; }

/* ── Shell ──────────────────────────────────────────────── */

.pub-shell {
  display:        flex;
  flex-direction: column;
  min-height:     100dvh;
}

.pub-main {
  flex: 1;
  width:         min(92%, 110rem);
  margin-inline: auto;
  padding-block: clamp(4rem, 8vh, 8rem);
  display:       flex;
  flex-direction: column;
  gap:           clamp(6rem, 10vh, 10rem);
}

/* ── Nav ────────────────────────────────────────────────── */

.pub-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.6rem clamp(2rem, 5vw, 6rem);
  background:      var(--mp-card);
  border-bottom:   1px solid var(--mp-border);
  position:        sticky;
  top:             0;
  z-index:         100;
}

.pub-nav__brand {
  font-size:   clamp(1.8rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color:       var(--mp-accent-emerald);
  text-decoration: none;
}

.pub-nav__links {
  display:     flex;
  align-items: center;
  gap:         clamp(1.6rem, 3vw, 3.2rem);
  font-size:   1.5rem;
}

.pub-nav__links a {
  color:           var(--mp-text-secondary);
  text-decoration: none;
}

.pub-nav__links a:hover { color: var(--mp-text-primary); }

.pub-nav__cta {
  padding:       0.8rem 2rem;
  border-radius: 999px;
  background:    var(--mp-elevated);
  border:        1px solid var(--mp-accent-emerald);
  color:         var(--mp-accent-emerald) !important;
  font-weight:   600;
}

.pub-nav__cta:hover {
  background:      color-mix(in srgb, var(--mp-accent-emerald) 12%, var(--mp-elevated));
  text-decoration: none;
}

/* ── Buttons ────────────────────────────────────────────── */

.pub-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         1.2rem 3.2rem;
  border-radius:   999px;
  font-size:       1.6rem;
  font-weight:     600;
  text-decoration: none;
  transition:      background 0.2s ease, border-color 0.2s ease;
  cursor:          pointer;
}

.pub-btn--primary {
  background: var(--mp-accent-emerald);
  color:      var(--mp-void);
  border:     2px solid var(--mp-accent-emerald);
}

.pub-btn--primary:hover {
  background:      color-mix(in srgb, var(--mp-accent-emerald) 85%, white);
  border-color:    color-mix(in srgb, var(--mp-accent-emerald) 85%, white);
  text-decoration: none;
  color:           var(--mp-void);
}

/* ── Hero (Home) ────────────────────────────────────────── */

.pub-hero {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            clamp(3rem, 5vw, 6rem);
  align-items:    center;
}

.pub-hero__text {
  display:        flex;
  flex-direction: column;
  gap:            2.4rem;
}

.pub-hero__heading {
  font-size:   clamp(3.2rem, 4vw + 1rem, 5.6rem);
  font-weight: 700;
  color:       var(--mp-text-primary);
}

.pub-hero__sub {
  font-size:   clamp(1.6rem, 1.8vw, 2rem);
  color:       var(--mp-text-secondary);
  max-width:   52ch;
}

.pub-hero__images {
  display:        flex;
  flex-direction: column;
  gap:            1.6rem;
}

.pub-hero__images img {
  width:         100%;
  height:        auto;
  border-radius: 1.2rem;
  border:        1px solid var(--mp-border);
}

.pub-hero__img--secondary {
  display: none;
}

/* ── Features (Home) ────────────────────────────────────── */

.pub-features__heading {
  font-size:     clamp(2.4rem, 3vw, 3.6rem);
  font-weight:   600;
  margin-bottom: clamp(3rem, 4vh, 4.8rem);
  color:         var(--mp-text-primary);
}

.pub-feature-list {
  list-style: none;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap:        2.4rem;
}

.pub-feature-list__item {
  background:    var(--mp-card);
  border:        1px solid var(--mp-border);
  border-radius: 1.2rem;
  padding:       2.4rem;
  display:       flex;
  flex-direction: column;
  gap:           1rem;
}

.pub-feature-list__item h3 {
  font-size:   1.8rem;
  font-weight: 600;
  color:       var(--mp-accent-emerald);
}

.pub-feature-list__item p {
  font-size: 1.5rem;
  color:     var(--mp-text-secondary);
}

/* ── Orbit showcase (Home) ──────────────────────────────── */

@keyframes pub-orbit-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2);   opacity: 0;   }
  100% { transform: scale(2);   opacity: 0;   }
}

@keyframes pub-orbit-chroma {
  0%   { background: var(--mp-accent-rose);   box-shadow: 0 0 2.4rem 0.6rem color-mix(in srgb, var(--mp-accent-rose)   40%, transparent); }
  33%  { background: var(--mp-accent-violet); box-shadow: 0 0 2.4rem 0.6rem color-mix(in srgb, var(--mp-accent-violet) 40%, transparent); }
  66%  { background: var(--mp-accent-blue);   box-shadow: 0 0 2.4rem 0.6rem color-mix(in srgb, var(--mp-accent-blue)   40%, transparent); }
  100% { background: var(--mp-accent-rose);   box-shadow: 0 0 2.4rem 0.6rem color-mix(in srgb, var(--mp-accent-rose)   40%, transparent); }
}

@keyframes pub-orbit-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  300% center; }
}

@keyframes pub-orbit-1 {
  from { transform: rotate(0deg)   translateY(-3.6rem); }
  to   { transform: rotate(360deg) translateY(-3.6rem); }
}
@keyframes pub-orbit-2 {
  from { transform: rotate(120deg) translateY(-3.6rem); }
  to   { transform: rotate(480deg) translateY(-3.6rem); }
}
@keyframes pub-orbit-3 {
  from { transform: rotate(240deg) translateY(-3.6rem); }
  to   { transform: rotate(600deg) translateY(-3.6rem); }
}

.pub-orbit {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         clamp(3rem, 5vw, 6rem);
  align-items: center;
}

.pub-orbit__demo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      24rem;
}

.pub-orbit__wrap {
  position: relative;
  width:    6.4rem;
  height:   6.4rem;
}

.pub-orbit__fab {
  width:         100%;
  height:        100%;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  animation:     pub-orbit-chroma 8s ease-in-out infinite;
  position:      relative;
  overflow:      visible;
}

.pub-orbit__fab::before {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  50%;
  border:         0.25rem solid currentColor;
  opacity:        0;
  animation:      pub-orbit-pulse 2.8s ease-out infinite;
  pointer-events: none;
}

.pub-orbit__fab::after {
  content:             '';
  position:            absolute;
  inset:               0;
  border-radius:       50%;
  background:          linear-gradient(
                         105deg,
                         transparent 30%,
                         color-mix(in srgb, white 28%, transparent) 50%,
                         transparent 70%
                       );
  background-size:     300% 100%;
  background-position: -200% center;
  animation:           pub-orbit-shimmer 3.5s ease-in-out infinite;
  pointer-events:      none;
}

.pub-orbit__dot {
  position:       absolute;
  width:          0.8rem;
  height:         0.8rem;
  border-radius:  50%;
  background:     white;
  opacity:        0.75;
  top:            50%;
  left:           50%;
  margin:         -0.4rem 0 0 -0.4rem;
  pointer-events: none;
}

.pub-orbit__dot--1 { animation: pub-orbit-1 4s linear infinite; }
.pub-orbit__dot--2 { animation: pub-orbit-2 4s linear infinite; }
.pub-orbit__dot--3 { animation: pub-orbit-3 4s linear infinite; }

.pub-orbit__text {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
}

.pub-orbit__heading {
  font-size:   clamp(2.4rem, 3vw, 3.6rem);
  font-weight: 600;
  color:       var(--mp-text-primary);
}

.pub-orbit__sub {
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  color:     var(--mp-text-secondary);
  max-width: 52ch;
}

.pub-orbit__list {
  list-style: none;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
}

.pub-orbit__list li {
  font-size:   1.5rem;
  color:       var(--mp-text-secondary);
  padding-left: 2rem;
  position:    relative;
}

.pub-orbit__list li::before {
  content:  '→';
  position: absolute;
  left:     0;
  color:    var(--mp-accent-violet);
}

.pub-orbit__hint {
  font-size:   1.5rem;
  font-weight: 600;
  color:       var(--mp-accent-emerald);
  font-style:  italic;
}

@media (max-width: 640px) {
  .pub-orbit {
    grid-template-columns: 1fr;
  }

  .pub-orbit__demo {
    min-height: 16rem;
  }
}

/* ── Install (Home) ─────────────────────────────────────── */

.pub-install__heading {
  font-size:     clamp(2.4rem, 3vw, 3.6rem);
  font-weight:   600;
  margin-bottom: clamp(2.4rem, 4vh, 4rem);
}

.pub-install__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap:     2.4rem;
}

.pub-install__card {
  background:    var(--mp-card);
  border:        1px solid var(--mp-border);
  border-radius: 1.2rem;
  padding:       2.4rem;
  display:       flex;
  flex-direction: column;
  gap:           1.6rem;
}

.pub-install__card h3 {
  font-size:   1.8rem;
  font-weight: 600;
  color:       var(--mp-text-primary);
}

.pub-install__card ol {
  display:       flex;
  flex-direction: column;
  gap:           0.8rem;
  color:         var(--mp-text-secondary);
  font-size:     1.5rem;
}

/* ── CTA strip (shared) ─────────────────────────────────── */

.pub-cta {
  text-align:    center;
  background:    var(--mp-card);
  border:        1px solid var(--mp-border);
  border-radius: 1.6rem;
  padding:       clamp(4rem, 6vh, 6.4rem) clamp(2.4rem, 5vw, 4.8rem);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           1.6rem;
}

.pub-cta h2 {
  font-size:   clamp(2.4rem, 3vw, 3.6rem);
  font-weight: 700;
}

.pub-cta p {
  font-size: 1.6rem;
  color:     var(--mp-text-secondary);
}

/* ── About hero ─────────────────────────────────────────── */

.pub-about-hero {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
  max-width:      72ch;
}

.pub-about-hero h1 {
  font-size:   clamp(3.2rem, 4vw + 1rem, 5.2rem);
  font-weight: 700;
}

.pub-about-hero__sub {
  font-size: clamp(1.7rem, 2vw, 2rem);
  color:     var(--mp-text-secondary);
}

/* ── About sections ─────────────────────────────────────── */

.pub-about-section {
  display:        flex;
  flex-direction: column;
  gap:            1.6rem;
  max-width:      72ch;
}

.pub-about-section h2 {
  font-size:   clamp(2.2rem, 2.5vw, 3rem);
  font-weight: 600;
  color:       var(--mp-accent-violet);
}

.pub-about-section p {
  font-size: 1.6rem;
  color:     var(--mp-text-secondary);
}

.pub-condition-list {
  display:        flex;
  flex-wrap:      wrap;
  gap:            1rem;
  list-style:     none;
  padding:        0;
}

.pub-condition-list li {
  background:    var(--mp-elevated);
  border:        1px solid var(--mp-border);
  border-radius: 999px;
  padding:       0.6rem 1.6rem;
  font-size:     1.4rem;
  font-weight:   500;
  color:         var(--mp-text-primary);
}

/* ── Track list (About) ─────────────────────────────────── */

.pub-track-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
  margin:         0;
}

.pub-track-list__item {
  display:     grid;
  grid-template-columns: 16rem 1fr;
  gap:         1.6rem;
  padding:     1.8rem 0;
  border-bottom: 1px solid var(--mp-border);
  align-items: start;
}

.pub-track-list__item:first-child { border-top: 1px solid var(--mp-border); }

.pub-track-list__item dt {
  font-size:   1.5rem;
  font-weight: 600;
  color:       var(--mp-accent-emerald);
  padding-top: 0.2rem;
}

.pub-track-list__item dd {
  margin:    0;
  font-size: 1.5rem;
  color:     var(--mp-text-secondary);
}

/* ── Footer ─────────────────────────────────────────────── */

.pub-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             1.2rem;
  padding:         2.4rem clamp(2rem, 5vw, 6rem);
  border-top:      1px solid var(--mp-border);
  background:      var(--mp-card);
  font-size:       1.3rem;
  color:           var(--mp-text-muted);
}

.pub-footer__links {
  display: flex;
  gap:     2.4rem;
}

.pub-footer__links a {
  color:           var(--mp-text-muted);
  text-decoration: none;
  font-size:       1.3rem;
}

.pub-footer__links a:hover { color: var(--mp-text-secondary); }

/* ── Responsive ─────────────────────────────────────────── */

@media (min-width: 900px) {
  .pub-hero__img--secondary { display: block; }
}

@media (max-width: 680px) {
  .pub-hero {
    grid-template-columns: 1fr;
  }

  .pub-track-list__item {
    grid-template-columns: 1fr;
    gap:                   0.6rem;
  }
}