/* Detox AI — feature atlas: one chapter per feature, each with a live 3D view.
   Views are drawn by js/gl/gl.js (one shared WebGL renderer) into .view-canvas. */

.atlas {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(2rem, 5vw, 4rem);
}

.atlas-intro {
  max-width: 860px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.atlas-title {
  margin: 0.4rem 0 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--mist50);
}

.atlas-intro p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--mist300);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.atlas-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: 0.5rem;
  font: 600 0.74rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist300);
}

.atlas-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(159, 176, 201, 0.3), transparent);
}

.atlas-group-num { color: var(--teal); }

/* ---------- chapter ---------- */
.chapter {
  /* clears the fixed chapter rail on the left at desktop widths */
  width: min(var(--max-w), calc(100% - clamp(2.5rem, 12vw, 10rem)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.5rem, 4.5vw, 5rem);
  align-items: center;
  min-height: min(88vh, 780px);
  padding: clamp(2rem, 6vh, 4.5rem) 0;
}

.chapter-flip .chapter-copy { order: 2; }

.chapter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.7rem;
  margin-bottom: 1.1rem;
}

.chapter-num {
  padding: 0.38rem 0.62rem;
  border: 1px solid rgba(47, 212, 198, 0.4);
  border-radius: 999px;
  font: 700 0.86rem/1 var(--font-head);
  color: var(--teal);
  box-shadow: 0 0 18px rgba(47, 212, 198, 0.12);
}

.chapter-kicker {
  font: 600 0.76rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist200);
}

.chapter-tier {
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--mist300);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chapter h3 {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 3.7vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--mist50);
}

.chapter-copy p {
  max-width: 46ch;
  margin: 0 0 1.4rem;
  color: var(--mist300);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

.chapter-facts {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-facts li {
  position: relative;
  padding-left: 1.55rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mist200);
}

.chapter-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 2px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

/* ---------- the 3D window ---------- */
.chapter-view {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.25;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 75% 65% at 50% 46%, rgba(47, 212, 198, 0.09), transparent 72%),
    linear-gradient(160deg, rgba(18, 28, 44, 0.78), rgba(5, 9, 15, 0.94));
  border: 1px solid rgba(159, 176, 201, 0.13);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* faint blueprint grid + HUD corner ticks */
.chapter-view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(159, 176, 201, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 176, 201, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
}

.chapter-view::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(var(--teal), var(--teal)) top left / 18px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) top left / 1px 18px no-repeat,
    linear-gradient(var(--teal), var(--teal)) top right / 18px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) top right / 1px 18px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom left / 18px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom left / 1px 18px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) bottom right / 1px 18px no-repeat;
}

.view-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}

.chapter-view.gl-on .view-canvas { opacity: 1; }

/* ---------- entrance choreography (only when JS is running) ---------- */
html.exp-pc .chapter-copy > *,
html.exp-mobile .chapter-copy > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

html.exp-pc .chapter.is-in .chapter-copy > *,
html.exp-mobile .chapter.is-in .chapter-copy > * {
  opacity: 1;
  transform: none;
}

.chapter.is-in .chapter-copy > :nth-child(2) { transition-delay: 0.08s; }
.chapter.is-in .chapter-copy > :nth-child(3) { transition-delay: 0.16s; }
.chapter.is-in .chapter-copy > :nth-child(4) { transition-delay: 0.24s; }

html.exp-pc .chapter .chapter-view,
html.exp-mobile .chapter .chapter-view,
html.exp-pc .privacy-gl .chapter-view,
html.exp-mobile .privacy-gl .chapter-view {
  transform: translateY(40px) scale(0.97);
  opacity: 0.001;
  transition: transform 1.1s var(--ease-out), opacity 1s var(--ease-out);
}

html.exp-pc .chapter.is-in .chapter-view,
html.exp-mobile .chapter.is-in .chapter-view,
html.exp-pc .privacy-block.is-in .chapter-view,
html.exp-mobile .privacy-block.is-in .chapter-view {
  transform: none;
  opacity: 1;
}

/* hero: the real 3D phone replaces the CSS mockup once WebGL is running */
.hero-view {
  position: absolute;
  inset: -22% -30%;
  z-index: 1;
  pointer-events: none;
}

.hero-view.gl-on .view-canvas { opacity: 1; transition-duration: 1.4s; }

.hero-content { position: relative; z-index: 2; }

.hero-visual.has-gl-view .phone-stage,
.hero-visual:has(.hero-view.gl-on) .phone-stage {
  visibility: hidden;
}

@media (max-width: 900px) {
  .hero-view { inset: -14% -18%; }
}

/* privacy block hosts the last scene */
.privacy-view {
  max-width: 720px;
  margin: 0 auto 2.2rem;
  aspect-ratio: 16 / 10;
}

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .chapter {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1.6rem;
    padding: 2.2rem 0 2.6rem;
  }
  .chapter-flip .chapter-copy { order: 0; }
  .chapter-view { order: -1; aspect-ratio: 1 / 1.08; border-radius: 24px; }
  .privacy-view { aspect-ratio: 1 / 0.9; }
  .chapter h3 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
}

/* phone held sideways: a 1:1.08 frame 587 px wide is 634 px tall on a 375 px screen and can never be seen
   whole. Back to the desktop shape the scenes are framed for, and never taller than the space under the nav. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .chapter-view:not(.journey-view):not(.premium-view):not(.privacy-view) {
    aspect-ratio: 4 / 3.25;
    width: min(100%, calc((100svh - var(--nav-h) - 1.5rem) * 4 / 3.25));
    margin-inline: auto;
  }
  .privacy-view {
    aspect-ratio: 16 / 10;
    width: min(100%, calc((100svh - var(--nav-h) - 1.5rem) * 1.6));
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-copy > *, .chapter-view { opacity: 1 !important; transform: none !important; transition: none !important; }
}