/* Realistic DEXA skeleton used in the scroll-driven scan story. */
.story-visual.xray-skeleton-mode { perspective: 1200px; overflow:visible; }
.story-visual.xray-skeleton-mode .story-spine { display: none; }
.xray-skeleton-stage { z-index: 2; pointer-events: none; position: absolute; inset: 2% 8%; display: grid; place-items: center; transform-style: preserve-3d; }
.xray-skeleton-stage::before { content: ''; position: absolute; inset: 4% 13%; border: 1px solid #83f5e826; border-radius: 48% 48% 42% 42%; background: radial-gradient(ellipse at center,#4bdacb18 0%,#4bdacb08 34%,transparent 70%); box-shadow: inset 0 0 72px #83f5e80a,0 0 100px #4bdacb12; }
.xray-skeleton-stage::after { content: ''; position: absolute; width: 1px; top: 5%; bottom: 5%; background: linear-gradient(transparent,#83f5e865 10%,#83f5e865 90%,transparent); box-shadow: 0 0 20px #83f5e842; }
.xray-skeleton-axis { z-index: 1; position: absolute; inset: 5% 13%; color: #83f5e8a6; font: 600 8px/1 monospace; letter-spacing: 1.4px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.xray-skeleton-axis i { flex: 1; width: 38px; margin: 11px 0; border-left:1px solid #83f5e84a; border-right:1px solid #83f5e81f; background: repeating-linear-gradient(to bottom,transparent 0 8px,#83f5e866 8px 9px,transparent 9px 17px); opacity:.82; }
.xray-skeleton-model { --xray-turn: 0deg; --xray-travel: 0%; --xray-scale: .84; --xray-tilt: -4deg; z-index: 3; position: relative; width: min(74%,350px); height: 96%; display: grid; place-items: center; transform: translateY(var(--xray-travel)) rotateZ(var(--xray-tilt)) scale(var(--xray-scale)); transform-style: preserve-3d; transform-origin:50% 50%; will-change: transform; }
.xray-skeleton-model::before { content: ''; position: absolute; inset: 15% 11%; border-radius: 50%; background: radial-gradient(ellipse,#4bdacb32,transparent 68%); filter: blur(22px); transform: translateZ(-1px); }
.xray-skeleton-frame { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; opacity:0; filter:drop-shadow(0 0 11px #83f5e899) drop-shadow(0 0 30px #4bdacb4a); transition:opacity .13s linear; will-change:opacity; }
.xray-skeleton-frame:first-child { opacity:1; }
.story-visual.xray-skeleton-mode .score-card,.story-visual.xray-skeleton-mode .report-card { z-index: 5; }

@media (max-width: 800px) {
  .story-visual.xray-skeleton-mode { z-index:3; width:min(58vw,350px); height:calc(100svh - 326px); top:310px; bottom:auto; left:50%; translate:-50% 0; opacity:.84; }
  .xray-skeleton-stage { inset:0 3%; }
  .xray-skeleton-model { width:min(82%,280px); height:94%; }
  .xray-skeleton-axis { inset: 6% 9%; }
  .story-visual.xray-skeleton-mode .score-card,.story-visual.xray-skeleton-mode .report-card { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .xray-skeleton-model { transform:none !important; }
  .xray-skeleton-frame:not(:first-child) { display:none; }
}

/* Five-step narrative for the DEXA scroll sequence. */
.five-stage-story { height:520vh; }
.five-stage-story .story-nav,.five-stage-story .story-copy-stack { display:none; }
.five-stage-nav { z-index:6; color:#ffffff61; letter-spacing:1.5px; justify-content:space-between; align-items:center; width:min(1220px,100% - 48px); font:500 9px/1 monospace; display:flex; position:absolute; top:112px; right:50%; translate:50%; }
.five-stage-nav > div { gap:8px; display:flex; }
.five-stage-nav i { background:#ffffff21; width:25px; height:2px; transition:background .35s,box-shadow .35s; display:block; }
.five-stage-nav i.active { background:var(--teal-300); box-shadow:0 0 9px var(--teal-300); }
.five-stage-nav b { color:var(--teal-300); direction:ltr; unicode-bidi:isolate; font-weight:500; }
.five-stage-copy { z-index:5; width:min(510px,42vw); min-height:410px; position:absolute; top:50%; right:max(24px,50vw - 610px); translate:0 -44%; }
.five-stage-card { opacity:0; filter:blur(8px); pointer-events:none; transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.2,1),filter .55s; position:absolute; inset:0; transform:translateY(35px) rotateX(-7deg); }
.five-stage-card.active { opacity:1; filter:none; pointer-events:auto; transform:none; }
.five-stage-card h2 { letter-spacing:-2px; margin:0; font-size:clamp(35px,4.25vw,61px); font-weight:900; line-height:1.38; }
.five-stage-card h2 em { color:var(--teal-200); font-style:normal; font-weight:400; }
.five-stage-card p { color:#ffffff94; max-width:470px; margin:23px 0 25px; font-size:14px; line-height:2; }

@media (max-width: 800px) {
  .five-stage-story { height:510vh; }
  .five-stage-nav { width:calc(100% - 34px); top:87px; }
  .five-stage-nav > span { display:none; }
  .five-stage-nav i { width:22px; }
  .five-stage-copy { text-align:center; width:auto; min-height:270px; top:105px; left:20px; right:20px; translate:0; }
  .five-stage-card h2 { letter-spacing:-1px; font-size:clamp(29px,8vw,39px); }
  .five-stage-card p { margin:14px auto; font-size:11px; line-height:1.9; }
}

@media (prefers-reduced-motion: reduce) {
  .five-stage-story { height:auto; }
  .five-stage-nav { display:none; }
  .five-stage-copy { width:min(560px,100% - 40px); min-height:auto; margin:0 auto; position:relative; top:auto; right:auto; left:auto; translate:0; }
  .five-stage-card { opacity:1; filter:none; margin-bottom:42px; position:relative; transform:none; }
}

/* Floating 3D pelvis for the diagnostic hero card. */
.hero-pelvis-stage { isolation:isolate; overflow:visible; }
.hero-pelvis-stage > .spine-svg,.hero-pelvis-stage > .spine-aura { display:none; }
.hero-pelvis-halo { z-index:-1; position:absolute; width:86%; aspect-ratio:1; border:1px solid #83f5e829; border-radius:50%; background:radial-gradient(circle,#4bdacb28 0%,#4bdacb0f 42%,transparent 70%); box-shadow:0 0 65px #4bdacb1f,inset 0 0 50px #83f5e80f; animation:pelvisHalo 5.4s ease-in-out infinite; }
.hero-pelvis-halo::before,.hero-pelvis-halo::after { content:''; position:absolute; border-radius:50%; border:1px dashed #83f5e82b; inset:9%; animation:ringSpin 18s linear infinite; }
.hero-pelvis-halo::after { border-color:#f4b85f24; inset:22%; animation-direction:reverse; animation-duration:13s; }
.hero-pelvis-model { z-index:2; display:block; width:94%; height:auto; max-height:90%; object-fit:contain; filter:drop-shadow(0 18px 22px #0008) drop-shadow(0 0 17px #4bdacb5c); transform-origin:50% 52%; animation:pelvisFloat 5.8s cubic-bezier(.45,0,.55,1) infinite; will-change:transform,filter; }
.hero-pelvis-stage .scan-beam { z-index:4; }
.hero-pelvis-stage .target { z-index:5; }

@keyframes pelvisFloat {
  0%,100% { transform:perspective(800px) translateY(8px) rotateX(1deg) rotateZ(-1.2deg) scale(.95); filter:drop-shadow(0 18px 22px #0008) drop-shadow(0 0 15px #4bdacb52); }
  50% { transform:perspective(800px) translateY(-10px) rotateX(-2deg) rotateZ(1.2deg) scale(1); filter:drop-shadow(0 27px 27px #0009) drop-shadow(0 0 25px #83f5e875); }
}

@keyframes pelvisHalo {
  0%,100% { transform:scale(.94); opacity:.62; }
  50% { transform:scale(1.04); opacity:1; }
}

@media (max-width: 520px) {
  .hero-pelvis-model { width:98%; max-height:86%; }
  .hero-pelvis-halo { width:92%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pelvis-model,.hero-pelvis-halo,.hero-pelvis-halo::before,.hero-pelvis-halo::after { animation:none !important; }
}

/* YAS Clinic 4.9 — ordered two-column layout for the five-stage scan story. */
.five-stage-story .scan-sticky {
  background:
    radial-gradient(circle at 22% 50%, #13384a 0, transparent 34%),
    radial-gradient(circle at 76% 46%, #102b3c 0, var(--navy-950) 43%, var(--navy-1000) 78%);
}

.five-stage-nav {
  width: min(1160px, calc(100% - 64px));
  top: 104px;
}

.five-stage-nav > span {
  color: #ffffff7a;
}

.five-stage-nav > div {
  padding: 7px 9px;
  background: #07141e99;
  border: 1px solid #83f5e81f;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.five-stage-nav i {
  width: 28px;
}

.five-stage-copy {
  width: min(500px, 40vw);
  min-height: 438px;
  top: calc(50% + 24px);
  right: max(32px, calc(50vw - 580px));
  translate: 0 -50%;
}

.five-stage-card {
  box-sizing: border-box;
  padding: 30px 32px 28px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #102c3cba, #07141ed6),
    radial-gradient(circle at 90% 0, #4bdacb1c, transparent 42%);
  border: 1px solid #83f5e829;
  border-radius: 24px;
  box-shadow:
    0 28px 75px #00000047,
    inset 0 1px #ffffff0d;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.five-stage-card::before {
  content: "";
  position: absolute;
  top: 30px;
  right: 0;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(transparent, var(--teal-300), transparent);
  box-shadow: 0 0 16px #83f5e86b;
}

.five-stage-card .story-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--teal-300);
  letter-spacing: .8px;
}

.five-stage-card .story-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--teal-300);
  box-shadow: 0 0 0 5px #83f5e812, 0 0 13px #83f5e8a6;
}

.five-stage-card h2 {
  max-width: 440px;
  letter-spacing: -1.55px;
  font-size: clamp(34px, 3.55vw, 52px);
  line-height: 1.4;
}

.five-stage-card p {
  max-width: none;
  margin: 19px 0 0;
  padding-top: 17px;
  color: #ffffffa6;
  border-top: 1px solid #ffffff14;
  font-size: 13px;
  line-height: 2;
}

.five-stage-card .story-tag {
  margin-top: 19px;
  padding: 9px 13px;
  color: #dcfffbdb;
  background: #83f5e80f;
  border-color: #83f5e838;
}

.story-visual.xray-skeleton-mode {
  isolation: isolate;
  width: min(470px, 38vw);
  height: min(570px, 70vh);
  top: calc(50% + 24px);
  left: max(32px, calc(50vw - 570px));
  translate: 0 -50%;
  overflow: hidden;
  background:
    linear-gradient(155deg, #0d2938b8, #06131ccc),
    radial-gradient(circle at 50% 42%, #4bdacb1c, transparent 62%);
  border: 1px solid #83f5e829;
  border-radius: 28px;
  box-shadow:
    0 30px 85px #00000052,
    inset 0 0 75px #83f5e807;
  transform: perspective(1200px) translateX(calc(var(--scan-progress) * 10px));
}

.story-visual.xray-skeleton-mode::before {
  content: "YAS / DEXA SCAN";
  z-index: 8;
  position: absolute;
  top: 20px;
  right: 22px;
  color: #83f5e8a1;
  font: 600 8px/1 monospace;
  letter-spacing: 1.5px;
}

.story-visual.xray-skeleton-mode::after {
  content: "";
  z-index: 7;
  position: absolute;
  top: 41px;
  right: 22px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #83f5e832);
}

.story-visual.xray-skeleton-mode .story-orbit {
  inset: 10% 8% 5%;
  opacity: .74;
}

.story-visual.xray-skeleton-mode .xray-skeleton-stage {
  inset: 8% 8% 4%;
}

.story-visual.xray-skeleton-mode .score-t {
  top: 22%;
  right: 18px;
}

.story-visual.xray-skeleton-mode .score-z {
  top: 48%;
  left: 18px;
}

.story-visual.xray-skeleton-mode .report-card {
  bottom: 18px;
  left: 18px;
}

.story-visual.xray-skeleton-mode .visual-scale {
  right: 18px;
  bottom: 22px;
  padding: 9px 7px;
  background: #07141e9e;
  border: 1px solid #83f5e821;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 1100px) and (min-width: 801px) {
  .five-stage-copy {
    width: min(430px, 43vw);
    right: 24px;
  }

  .five-stage-card {
    padding: 26px 27px 25px;
  }

  .five-stage-card h2 {
    font-size: clamp(32px, 4vw, 44px);
  }

  .story-visual.xray-skeleton-mode {
    width: min(410px, 40vw);
    left: 24px;
  }
}

@media (max-width: 800px) {
  .five-stage-story {
    height: 510vh;
  }

  .five-stage-nav {
    width: calc(100% - 32px);
    top: 82px;
  }

  .five-stage-nav > div {
    margin-right: auto;
    padding: 6px 8px;
  }

  .five-stage-nav i {
    width: 21px;
  }

  .five-stage-copy {
    width: auto;
    min-height: 292px;
    top: 109px;
    right: 16px;
    left: 16px;
    translate: 0;
    text-align: right;
  }

  .five-stage-card {
    padding: 19px 20px 18px;
    border-radius: 19px;
  }

  .five-stage-card::before {
    top: 21px;
    bottom: 21px;
  }

  .five-stage-card .story-kicker {
    margin-bottom: 12px;
    font-size: 8.5px;
  }

  .five-stage-card .story-kicker::before {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 4px #83f5e812, 0 0 11px #83f5e899;
  }

  .five-stage-card h2 {
    max-width: none;
    font-size: clamp(27px, 7vw, 36px);
    line-height: 1.35;
    letter-spacing: -1px;
  }

  .five-stage-card p {
    margin-top: 13px;
    padding-top: 12px;
    font-size: 10.5px;
    line-height: 1.85;
  }

  .five-stage-card .story-tag {
    margin-top: 12px;
    padding: 7px 10px;
    font-size: 8px;
  }

  .story-visual.xray-skeleton-mode {
    width: min(88vw, 420px);
    height: clamp(245px, calc(100svh - 420px), 420px);
    top: auto;
    bottom: 18px;
    left: 50%;
    translate: -50% 0;
    border-radius: 21px;
    transform: none;
    opacity: .94;
  }

  .story-visual.xray-skeleton-mode::before {
    top: 14px;
    right: 16px;
    font-size: 7px;
  }

  .story-visual.xray-skeleton-mode::after {
    top: 32px;
    right: 16px;
    left: 16px;
  }

  .story-visual.xray-skeleton-mode .xray-skeleton-stage {
    inset: 8% 3% 1%;
  }

  .story-visual.xray-skeleton-mode .xray-skeleton-model {
    width: min(78%, 260px);
    height: 94%;
  }

  .story-visual.xray-skeleton-mode .score-card,
  .story-visual.xray-skeleton-mode .report-card,
  .story-visual.xray-skeleton-mode .visual-scale {
    display: none;
  }
}

@media (max-width: 520px) {
  .five-stage-nav {
    top: 76px;
  }

  .five-stage-nav i {
    width: 17px;
  }

  .five-stage-copy {
    min-height: 284px;
    top: 101px;
    right: 12px;
    left: 12px;
  }

  .five-stage-card {
    padding: 17px 17px 16px;
  }

  .five-stage-card h2 {
    font-size: clamp(25px, 7.3vw, 31px);
  }

  .five-stage-card p {
    font-size: 10px;
  }

  .story-visual.xray-skeleton-mode {
    width: calc(100% - 24px);
    height: clamp(220px, calc(100svh - 405px), 360px);
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .five-stage-copy {
    width: min(560px, calc(100% - 40px));
    min-height: auto;
    margin: 0 auto 45px;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    translate: 0;
  }

  .five-stage-card {
    opacity: 1;
    filter: none;
    position: relative;
    inset: auto;
    margin-bottom: 22px;
    transform: none;
  }

  .story-visual.xray-skeleton-mode {
    width: min(470px, calc(100% - 40px));
    height: 560px;
    margin: 0 auto;
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    translate: 0;
    transform: none;
  }
}

/* YAS Clinic 4.10 — open copy layout and consistent Persian clinic metrics. */
.five-stage-card {
  padding: 18px 4px 18px 28px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.five-stage-card::before {
  display: none;
}

.cinematic-home-page .numbers strong {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -1px;
}

.cinematic-home-page .numbers span {
  font-family: inherit;
}

@media (max-width: 800px) {
  .five-stage-card {
    padding: 12px 2px 14px 10px;
  }
}