/* The dental pack's own styles: the 3D tooth's fallback picture, the «Цифровий шлях» chapter (journey.js) and the
   implant caption of its last step. Loaded right after site.css and blocking, like it (src/page.js). */
.tooth-fallback { width: 100%; height: 100%; object-fit: contain; display: none; }
html.no-gl .tooth-fallback { display: block; }

/* the chapter's colors follow the page: dark text until the page turns dark, so it is readable at every moment */
.journey { position: relative; color: var(--ink); transition: color .6s var(--ease); }
html.is-dark .journey, html.still .journey { color: var(--dark-ink); }
html.still .journey { background: var(--dark); }
html.still .journey-grid { grid-template-columns: 1fr; grid-template-areas: "head" "steps" "bar"; }
html.still .journey-stage { display: none; }
.journey-pin { min-height: 100svh; display: grid; align-items: center; padding: 96px 0 48px; }
.journey-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "stage steps" "bar bar"; gap: 24px 48px; align-items: center; }
.journey-head { grid-area: head; } .journey-head .mono, .step .mono { color: var(--teal-ink); }
html.is-dark .journey .mono, html.still .journey .mono { color: var(--teal); }
.journey h2 { margin: 8px 0 0; max-width: 14em; }
.journey-stage { grid-area: stage; position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; overflow: hidden; }
.reticle { position: absolute; inset: 6%; border-radius: 50%; opacity: 0; transition: opacity .6s; border: 1px solid color-mix(in srgb, var(--teal-glow) 60%, transparent); box-shadow: 0 0 0 2000px rgba(6, 20, 22, .55); }
.reticle::before, .reticle::after { content: ""; position: absolute; background: color-mix(in srgb, var(--teal-glow) 50%, transparent); }
.reticle::before { left: 50%; top: 8%; bottom: 8%; width: 1px; } .reticle::after { top: 50%; left: 8%; right: 8%; height: 1px; }
.journey[data-mode="micro"] .reticle { opacity: 1; }
.steps { grid-area: steps; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.step { padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; transition: opacity .5s, background-color .5s, border-color .5s; }
html.is-dark .step { border-color: rgba(232, 243, 242, .12); }
html.is-dark .step:not(.is-on) { opacity: .7; } /* dimmed, still AA on the dark page */
.step.is-on, html.still .step { background: color-mix(in srgb, var(--teal) 8%, transparent); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.step h3 { margin: 6px 0 4px; font: 600 20px/1.25 var(--f-text); }
.step p { margin: 0; color: var(--ink-2); }
html.is-dark .step p, html.still .step p { color: var(--dark-ink-2); }
.journey-progress { grid-area: bar; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(232, 243, 242, .12); }
.journey-progress span { display: block; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; }
@media (max-width: 900px) {
  .journey-grid { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "steps" "bar"; }
  .journey-stage { max-width: 300px; }
  html.motion .step:not(.is-on) { display: none; }
}

/* wave 2: the implant caption at «Імплантація» shows with its step */
.step .implant-tag { margin: 10px 0 0; color: var(--teal-ink); opacity: 0; }
.step.is-on .implant-tag, html.still .step .implant-tag { opacity: 1; }
html.motion .step.is-on .implant-tag { animation: tag-in .6s var(--ease) .15s both; }
html.is-dark .step .implant-tag, html.still .step .implant-tag { color: var(--teal); }
@keyframes tag-in { from { opacity: 0; transform: translateY(6px); } }
/* one step open at a time on a wide screen: the pinned chapter, the implant caption included, fits a laptop screen;
   the folded text stays for screen readers */
@media (min-width: 901px) {
  html.motion .step:not(.is-on) p { max-height: 0; margin: 0; overflow: hidden; }
  html.motion .step.is-on p { animation: step-in .45s var(--ease); }
}
@keyframes step-in { from { opacity: 0; } }
@media (min-width: 901px) and (max-height: 860px) { /* a laptop screen: the pinned chapter tightens to fit */
  html.motion .journey-pin { padding: 84px 0 20px; }
  html.motion .journey h2 { font-size: 40px; max-width: none; }
  html.motion .step { padding: 12px 18px; }
  html.motion .journey-stage { max-width: min(520px, 100svh - 260px); }
}