/* Bio Speciality — opening animation and subtle UX elevation */
:root {
  --bio-blue: #0054a6;
  --bio-blue-dark: #08224b;
  --bio-blue-soft: #e6f0fb;
  --bio-cyan: #00a8ff;
  --bio-accent: #b2005a;
  --bio-white: #ffffff;
  --bio-shadow: 0 24px 70px rgba(0, 32, 74, 0.16);
}

html.bio-intro-lock,
html.bio-intro-lock body {
  overflow: hidden;
}

.bio-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--bio-blue-dark);
  background:
    radial-gradient(circle at 15% 18%, rgba(0, 168, 255, .18), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(178, 0, 90, .13), transparent 25%),
    linear-gradient(135deg, #f8fbff 0%, #eaf5ff 48%, #ffffff 100%);
  overflow: hidden;
  transition: opacity .7s ease, visibility .7s ease, transform .7s ease;
}

.bio-intro.is-hiding {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  pointer-events: none;
}

.bio-intro__bg,
.bio-intro__bg canvas {
  position: absolute;
  inset: 0;
}

.bio-intro__bg canvas {
  width: 100%;
  height: 100%;
  opacity: .5;
}

.bio-orb {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 84, 166, .22), rgba(0, 168, 255, .08));
  filter: blur(2px);
  animation: bioOrbFloat 9s ease-in-out infinite;
}

.bio-orb--one { left: -80px; bottom: 8%; }
.bio-orb--two { right: 7%; top: 11%; width: 180px; height: 180px; animation-delay: -3s; }
.bio-orb--three { right: 22%; bottom: -120px; width: 310px; height: 310px; animation-delay: -6s; }

.bio-intro__skip {
  position: absolute;
  top: 28px;
  right: 30px;
  z-index: 3;
  border: 1px solid rgba(0, 84, 166, .18);
  background: rgba(255, 255, 255, .76);
  color: var(--bio-blue-dark);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 32, 74, .08);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.bio-intro__skip:hover,
.bio-intro__skip:focus-visible {
  transform: translateY(-2px);
  background: var(--bio-blue);
  color: #fff;
}

.bio-intro__wrap {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 44px));
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}

.bio-intro__copy {
  animation: bioIntroCopy .8s ease both .1s;
}

.bio-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 84, 166, .14);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--bio-blue);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 34px rgba(0, 32, 74, .08);
}

.bio-intro__eyebrow span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--bio-accent);
  box-shadow: 0 0 0 6px rgba(178, 0, 90, .12);
  animation: bioPulse 1.8s ease-in-out infinite;
}

.bio-intro__logo {
  display: block;
  max-width: 154px;
  height: auto;
  margin: 24px 0 22px;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 32, 74, .14);
}

.bio-intro h1 {
  max-width: 560px;
  margin: 0 0 18px;
  color: var(--bio-blue-dark);
  font-size: clamp(38px, 5vw, 74px);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 900;
}

.bio-intro p {
  max-width: 520px;
  margin: 0;
  color: #52637a;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
}

.bio-intro__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.bio-intro__enter,
.bio-intro__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.bio-intro__enter {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--bio-blue), var(--bio-cyan));
  box-shadow: 0 18px 40px rgba(0, 84, 166, .24);
  cursor: pointer;
}

.bio-intro__secondary {
  color: var(--bio-blue);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0, 84, 166, .13);
}

.bio-intro__enter:hover,
.bio-intro__secondary:hover,
.bio-intro__enter:focus-visible,
.bio-intro__secondary:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0, 84, 166, .18);
}

.bio-intro__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.bio-intro__trust span {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: #52637a;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 32, 74, .06);
}

.bio-intro__stage {
  perspective: 1100px;
  animation: bioIntroStage .95s cubic-bezier(.2,.8,.2,1) both .2s;
}

.bio-intro__glass-card {
  position: relative;
  border-radius: 44px;
  padding: clamp(10px, 2vw, 22px);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 42px 110px rgba(0, 32, 74, .18);
  backdrop-filter: blur(18px);
  transform: rotateX(8deg) rotateY(-10deg) translateZ(0);
  transform-style: preserve-3d;
  animation: bioCardFloat 6.5s ease-in-out infinite;
}

.bio-intro__glass-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(0,84,166,.08), rgba(255,255,255,.2));
  transform: translateZ(-35px);
}

.bio-lab-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  transform: translateZ(60px);
}

.scene-shadow { fill: rgba(0, 32, 74, .14); }
.lab-grid,
.lab-grid--two {
  fill: none;
  stroke: rgba(0, 84, 166, .16);
  stroke-width: 2;
  stroke-dasharray: 8 10;
  animation: bioGridMove 14s linear infinite;
}
.lab-grid--two { animation-duration: 18s; animation-direction: reverse; }

.patient,
.doctor,
.monitor,
.sample-card { transform-box: fill-box; transform-origin: center; }
.patient { animation: bioBreathe 4.2s ease-in-out infinite; }
.doctor { animation: bioBreathe 4.8s ease-in-out infinite .3s; }
.monitor { animation: bioSmallFloat 5.2s ease-in-out infinite; }
.sample-card { animation: bioSmallFloat 5.7s ease-in-out infinite .8s; }

.doctor-arm {
  transform-box: fill-box;
  transform-origin: 82% 20%;
  animation: bioDoctorArm 2.9s ease-in-out infinite;
}

.patient-arm {
  stroke-dasharray: 390;
  stroke-dashoffset: 390;
  animation: bioArmDraw 1.3s ease both .65s;
}

.syringe {
  transform-box: fill-box;
  transform-origin: center;
  animation: bioSyringe 2.9s ease-in-out infinite;
}

.tube-flow {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: bioBloodFlow 2.1s ease-in-out infinite .8s;
}

.vial-fill {
  transform-box: fill-box;
  transform-origin: left center;
  animation: bioVialFill 2.1s ease-in-out infinite .8s;
}

.needle { animation: bioNeedle 2.9s ease-in-out infinite; }
.blood-dot { animation: bioPulse 1.2s ease-in-out infinite; }

.pulse-line,
.mini-chart {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: bioPulseLine 2.6s ease-in-out infinite;
}

.bio-intro__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  overflow: hidden;
  background: rgba(0, 84, 166, .08);
}

.bio-intro__progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--bio-blue), var(--bio-cyan), var(--bio-accent));
  animation: bioProgress 6s linear both;
}

/* Subtle premium motion across the existing site */
.bio-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.bio-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bio-soft-lift,
.service-panel,
.department-panel,
.blog-entry,
.testimonial-panel,
.team-member,
.feature-panel,
.features-card,
.pricing-panel,
.about-img,
.module-contact .btn,
.btn {
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.bio-soft-lift:hover,
.service-panel:hover,
.department-panel:hover,
.blog-entry:hover,
.testimonial-panel:hover,
.team-member:hover,
.feature-panel:hover,
.features-card:hover,
.pricing-panel:hover {
  transform: translateY(-8px);
  box-shadow: var(--bio-shadow);
}

.btn:hover,
.module-contact .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 84, 166, .16);
}

.slider .slide-content,
.heading,
.features-bar .features-holder,
.about .about-img {
  will-change: transform;
}

.bio-magnetic {
  transform-style: preserve-3d;
}

.bio-magnetic > * {
  transform: translateZ(18px);
}

.bio-pulse-chip {
  position: relative;
  overflow: hidden;
}

.bio-pulse-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform: translateX(-120%);
  animation: bioShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bioOrbFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(18px,-24px,0) scale(1.08); }
}

@keyframes bioIntroCopy {
  from { opacity: 0; transform: translateX(-34px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes bioIntroStage {
  from { opacity: 0; transform: translateX(46px) scale(.94); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes bioCardFloat {
  0%, 100% { transform: rotateX(8deg) rotateY(-10deg) translateY(0); }
  50% { transform: rotateX(5deg) rotateY(-6deg) translateY(-14px); }
}

@keyframes bioPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .72; }
}

@keyframes bioBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes bioSmallFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}

@keyframes bioDoctorArm {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(2px); }
}

@keyframes bioSyringe {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-3px, 2px) rotate(-.8deg); }
}

@keyframes bioNeedle {
  0%, 100% { opacity: .9; }
  50% { opacity: 1; }
}

@keyframes bioBloodFlow {
  0% { stroke-dashoffset: 90; opacity: 0; }
  35%, 80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -90; opacity: 0; }
}

@keyframes bioVialFill {
  0% { transform: scaleX(.08); opacity: .5; }
  50%, 82% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(.08); opacity: .45; }
}

@keyframes bioArmDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes bioPulseLine {
  0% { stroke-dashoffset: 180; opacity: .4; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -180; opacity: .45; }
}

@keyframes bioGridMove {
  to { stroke-dashoffset: -160; }
}

@keyframes bioProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes bioShimmer {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

@media (max-width: 991px) {
  .bio-intro__wrap {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 78px 0 34px;
  }
  .bio-intro__copy {
    text-align: center;
    margin: 0 auto;
  }
  .bio-intro__logo,
  .bio-intro p,
  .bio-intro h1 { margin-left: auto; margin-right: auto; }
  .bio-intro__actions,
  .bio-intro__trust { justify-content: center; }
  .bio-intro__stage { max-width: 650px; margin: 0 auto; }
  .bio-intro__glass-card { border-radius: 32px; }
}

@media (max-width: 575px) {
  .bio-intro__skip { top: 16px; right: 16px; padding: 8px 13px; font-size: 12px; }
  .bio-intro__wrap { width: min(100% - 28px, 1180px); }
  .bio-intro__logo { max-width: 120px; margin-top: 16px; margin-bottom: 16px; }
  .bio-intro h1 { font-size: clamp(32px, 12vw, 48px); }
  .bio-intro p { font-size: 15px; line-height: 1.58; }
  .bio-intro__stage { transform: scale(.96); transform-origin: top center; }
  .bio-intro__trust { display: none; }
  .bio-intro__enter,
  .bio-intro__secondary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bio-intro,
  .bio-intro *,
  .bio-reveal,
  .bio-soft-lift,
  .btn {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .bio-reveal { opacity: 1; transform: none; }
}