/* Имплантация шаг за шагом: закреплённый экран с 3D-сборкой. */
.implant{--implant-progress:1;padding:0;background:radial-gradient(ellipse 60% 70% at 72% 48%,var(--white),var(--paper-alt) 78%);border-top:1px solid var(--line);overflow:hidden}
.implant-pin{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,72px);align-items:center;height:100svh;min-height:660px;max-height:1100px;padding:clamp(30px,6vh,72px) var(--pad)}
.implant:not(.is-scrolling) .implant-pin{height:auto;min-height:0;max-height:none;padding-top:var(--section-space);padding-bottom:var(--section-space)}
.implant-copy{position:relative;z-index:2;max-width:520px}
.implant-copy h2{font-size:clamp(44px,4.6vw,76px);line-height:1.02;letter-spacing:-.01em;margin:26px 0 18px}
.implant-copy h2>span{color:var(--gold-text)}
.implant-lead{font-size:15.5px;line-height:1.75;color:var(--muted);max-width:420px;text-wrap:pretty}
.implant-steps{list-style:none;margin:30px 0 0;padding:0;border-bottom:1px solid var(--line)}
.implant-step{border-top:1px solid var(--line);position:relative}
.implant-step:before{content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.implant-step.is-active:before,.implant-step.is-done:before{transform:scaleX(1)}
.implant-step button{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:10px;width:100%;text-align:left;padding:15px 0;color:var(--muted);transition:color .3s}
.implant-step-index{font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold-text)}
.implant-step-title{font-family:var(--display);font-size:clamp(23px,2vw,29px);font-weight:500;line-height:1.15}
.implant-step-time{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.implant-step.is-active button,.implant-step.is-done button,.implant-step button:hover{color:var(--ink)}
.implant-step.is-done .implant-step-index:after{content:' ✓';font-style:normal;font-family:var(--font);font-size:11px}
.implant-step p{display:grid;grid-template-rows:0fr;font-size:14.5px;line-height:1.7;color:var(--muted);padding-left:44px;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s,padding .45s var(--ease)}
.implant-step.is-active p{max-height:140px;opacity:1;padding-bottom:16px}
.implant-foot{display:flex;align-items:center;gap:22px;margin-top:26px}
.implant-progress{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.implant-progress i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(var(--implant-progress))}
.implant:not(.is-scrolling) .implant-progress{display:none}
.implant-foot .button{min-height:54px;gap:22px;white-space:nowrap}
.implant-stage{position:relative;height:100%;min-height:440px;align-self:stretch}
.implant:not(.is-scrolling) .implant-stage{height:min(72vh,720px)}
.implant-world{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(#000 72%,transparent 96%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(#000 72%,transparent 96%);mask-composite:intersect}
.implant-world canvas{display:block;width:100%;height:100%}
.implant-labels{position:absolute;inset:0;pointer-events:none}
.implant-label{position:absolute;left:0;top:0;height:28px;margin:-14px 0 0 -4px;display:flex;align-items:center;gap:40px;white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);text-shadow:0 0 10px var(--white),0 0 4px var(--white);background:linear-gradient(var(--gold),var(--gold)) 10px 50%/34px 1px no-repeat;opacity:0;transition:opacity .45s}
.implant-label:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent);flex-shrink:0}
.implant-label.is-visible{opacity:1}
.implant-label.is-left{flex-direction:row-reverse;transform-origin:right;background-position:calc(100% - 10px) 50%}
.implant-dim{position:absolute;left:0;top:0;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--gold-text);text-shadow:0 0 8px var(--white),0 0 3px var(--white);opacity:0;transition:opacity .4s}
.implant-dim.is-side{margin:-9px 0 0 8px}
.implant-dim.is-above{translate:-50% calc(-100% - 6px)}
.implant-dim.is-below{translate:-50% 8px}
.implant-dim.is-visible{opacity:1}
/* Табло этапа: КТ-план, глубина, неделя приживления, усилие затяжки. */
.implant-readout{position:absolute;left:12%;top:9%;display:grid;gap:6px;margin:0;padding:2px 0 2px 16px;border-left:1px solid var(--gold);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s var(--ease)}
.implant-readout.is-visible{opacity:1;transform:none}
.implant-readout-label{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.implant-readout-value{font-family:var(--display);font-size:clamp(22px,1.9vw,30px);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.implant:not(.is-scrolling) .implant-readout{display:none}
.implant-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:calc(1 - var(--implant-progress) * 14);pointer-events:none}
.implant-hint span{width:1px;height:28px;background:linear-gradient(var(--gold),transparent);animation:implant-hint 1.6s ease-in-out infinite}
@keyframes implant-hint{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:1}}
.implant:not(.is-scrolling) .implant-hint{display:none}
.implant.no-webgl .implant-stage{display:none}
.implant.no-webgl .implant-pin{grid-template-columns:1fr}

@media(max-width:800px){
  .implant-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:0;min-height:600px;padding-top:24px;padding-bottom:20px}
  .implant:not(.is-scrolling) .implant-pin{grid-template-rows:auto}
  .implant-copy{max-width:none}
  .implant-copy h2{font-size:clamp(34px,8.6vw,48px);margin:16px 0 0}
  .implant-copy h2 br{display:none}
  .implant-lead{display:none}
  .implant-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:18px;border:0;padding-bottom:96px;position:relative}
  .implant-step{position:static;border-top:2px solid var(--line);transition:border-color .4s}
  .implant-step:before{display:none}
  .implant-step.is-active,.implant-step.is-done{border-top-color:var(--gold)}
  .implant-step button{grid-template-columns:1fr;gap:2px;padding:8px 0 0}
  .implant-step-index{font-size:15px}
  .implant-step-title{font-size:clamp(13px,3.4vw,14.5px)}
  .implant-step-time{display:none}
  .implant-step p{position:absolute;left:0;right:0;top:60px;padding:0;font-size:13.5px;line-height:1.55;transition:opacity .35s}
  .implant-step.is-active p{padding:0;max-height:none}
  .implant-foot{margin-top:10px;gap:14px}
  .implant-foot .button{min-height:46px;padding:12px 18px;font-size:13px;gap:14px}
  .implant-stage{min-height:0;height:auto}
  .implant:not(.is-scrolling) .implant-stage{height:380px;margin-top:20px}
  .implant-hint{bottom:6px}
  .implant-readout{left:2px;top:6px;padding-left:12px}
  .implant-readout-value{font-size:21px}
  .implant-label{white-space:normal;max-width:118px;line-height:1.25;gap:30px;font-size:11.5px;background-size:24px 1px}
  .implant-dim{font-size:10.5px}
  /* На узком экране подпись может лечь на светлую коронку — даём ей подложку. */
  .implant-label>span{padding:3px 7px;border-radius:6px;background:color-mix(in srgb,var(--white) 84%,transparent);text-shadow:none}
}
@media(max-width:380px){.implant-step-title{font-size:13px}.implant-foot .button{padding:11px 14px}}
@media(prefers-reduced-motion:reduce){.implant-step:before,.implant-step p,.implant-label,.implant-dim,.implant-readout{transition:none}.implant-hint span{animation:none}}