/* =====================================================
   MedSina — Enhanced Upload/Analysis Section
   Dark medical imaging / X-ray lightbox aesthetic
   ===================================================== */

/* ---------- Keyframes ---------- */
@keyframes ms-scan-line {
  0%   { top: 0%;    opacity: .6 }
  45%  { opacity: .6 }
  50%  { top: 100%;  opacity: 0 }
  51%  { top: 0%;    opacity: 0 }
  55%  { opacity: .4 }
  100% { top: 100%;  opacity: .6 }
}
@keyframes ms-scan-line2 {
  0%   { top: 100%;  opacity: 0 }
  49%  { opacity: 0 }
  50%  { top: 100%;  opacity: .5 }
  100% { top: 0%;    opacity: .5 }
}
@keyframes ms-xray-glow {
  0%,100% { box-shadow: 0 0 30px rgba(37,99,235,.2), inset 0 0 40px rgba(37,99,235,.05) }
  50%      { box-shadow: 0 0 50px rgba(13,148,136,.3), inset 0 0 60px rgba(13,148,136,.08) }
}
@keyframes ms-border-spin {
  to { --border-angle: 360deg }
}
@keyframes ms-upload-bounce {
  0%,100% { transform: translateY(0) }
  40%      { transform: translateY(-8px) }
  60%      { transform: translateY(-4px) }
}
@keyframes ms-neural-pulse {
  0%,100% { opacity: .08 }
  50%      { opacity: .18 }
}
@keyframes ms-float-frame {
  0%,100% { transform: translateY(0) rotate(var(--fr,0deg)) }
  50%      { transform: translateY(-10px) rotate(calc(var(--fr,0deg) + 3deg)) }
}
@keyframes ms-corner-blink {
  0%,90%,100% { opacity: .7 }
  95%          { opacity: .2 }
}
@keyframes ms-tag-pop {
  from { opacity:0; transform: scale(.85) translateY(6px) }
  to   { opacity:1; transform: scale(1) translateY(0) }
}
@keyframes ms-dash-rotate {
  to { stroke-dashoffset: -24 }
}

/* ---------- Section wrapper ---------- */
.upload-demo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,
    #06101e 0%,
    #0d1f3c 35%,
    #0a2540 65%,
    #071830 100%
  ) !important;
  padding: 110px 0;
}

/* Starfield / noise texture overlay */
.upload-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(circle, rgba(37,99,235,.04) 1px, transparent 1px);
  background-size: 28px 28px, 52px 52px;
  background-position: 0 0, 14px 14px;
  pointer-events: none;
}

/* Radial glow centre */
.upload-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%,
    rgba(37,99,235,.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.upload-demo .container { position: relative; z-index: 1; }

/* ---------- Left side text overrides ---------- */
.upload-text .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37,99,235,.15);
  border: 1px solid rgba(37,99,235,.4);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #60a5fa;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}
.upload-text .section-label::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg,#3b82f6,#0d9488);
  display: inline-block;
  animation: ms-dot-pulse 2s ease-in-out infinite;
}

.upload-text .section-title {
  color: #f0f9ff !important;
  margin-bottom: 16px;
}

/* Override gradient-text for dark bg */
.upload-text .gradient-text {
  background: linear-gradient(135deg,#60a5fa 0%,#2dd4bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.upload-text p {
  color: #94a3b8 !important;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ---------- Format tags — dark glass style ---------- */
.upload-text .format-tag {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #cbd5e1;
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: all .25s;
  animation: ms-tag-pop .4s ease backwards;
}
.upload-text .format-tag:hover {
  background: rgba(37,99,235,.2);
  border-color: rgba(96,165,250,.4);
  color: #93c5fd;
  transform: translateY(-2px);
}
.upload-text .format-tag:nth-child(1) { animation-delay: .1s }
.upload-text .format-tag:nth-child(2) { animation-delay: .2s }
.upload-text .format-tag:nth-child(3) { animation-delay: .3s }
.upload-text .format-tag:nth-child(4) { animation-delay: .4s }
.upload-text .format-tag:nth-child(5) { animation-delay: .5s }

/* ---------- Primary button — glow on dark bg ---------- */
.upload-text .btn-primary {
  background: linear-gradient(135deg,#2563eb,#0d9488);
  box-shadow: 0 4px 24px rgba(37,99,235,.4);
  border: none;
  transition: transform .3s, box-shadow .3s;
}
.upload-text .btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 40px rgba(37,99,235,.6);
}

/* ---------- Upload widget card ---------- */
.upload-demo-widget {
  position: relative;
}
.upload-demo-widget::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2563eb44, #0d948844, #2563eb44);
  background-size: 200% 200%;
  animation: ms-gradient-bg 4s ease infinite, ms-xray-glow 4s ease-in-out infinite;
  z-index: 0;
}

/* ---------- Upload zone ---------- */
.upload-zone {
  position: relative;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: 18px !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
  z-index: 1;
}

/* Animated SVG dashed border */
.upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 2px dashed rgba(96,165,250,.35);
  animation: none;
  pointer-events: none;
}

/* Scanning laser line */
.upload-zone::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(96,165,250,.8) 30%,
    rgba(45,212,191,.9) 50%,
    rgba(96,165,250,.8) 70%,
    transparent 100%
  );
  animation: ms-scan-line 3.5s ease-in-out infinite;
  pointer-events: none;
  filter: blur(.5px);
}

.upload-zone:hover::before {
  border-color: rgba(96,165,250,.7);
  box-shadow: inset 0 0 30px rgba(37,99,235,.1);
}
.upload-zone:hover { background: rgba(37,99,235,.07) !important; }

/* Corner markers — X-ray targeting corners */
.upload-zone .upload-zone-inner::before,
.upload-zone .upload-zone-inner::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(96,165,250,.6);
  border-style: solid;
  animation: ms-corner-blink 3s ease-in-out infinite;
  pointer-events: none;
}
.upload-zone .upload-zone-inner::before {
  top: 12px; left: 12px;
  border-width: 2px 0 0 2px;
}
.upload-zone .upload-zone-inner::after {
  bottom: 12px; right: 12px;
  border-width: 0 2px 2px 0;
  animation-delay: 1.5s;
}

/* ---------- Upload icon ---------- */
.upload-icon-wrap {
  background: rgba(37,99,235,.15) !important;
  border: 1px solid rgba(96,165,250,.25) !important;
  color: #60a5fa !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 20px !important;
  animation: ms-upload-bounce 2.5s ease-in-out infinite;
}

/* ---------- Upload text overrides ---------- */
.upload-title { color: #e2e8f0 !important; font-size: 17px !important; }
.upload-sub   { color: #64748b !important; }
.upload-formats { color: #475569 !important; }

/* ---------- Medical decorative background ---------- */
.ms-upload-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* X-ray scan frames */
.ms-xray-frame {
  position: absolute;
  border: 1px solid rgba(96,165,250,.12);
  border-radius: 4px;
}
.ms-xray-frame::before,
.ms-xray-frame::after {
  content: '';
  position: absolute;
  background: rgba(96,165,250,.15);
}
/* horizontal scan lines inside frame */
.ms-xray-frame::before {
  height: 1px; left: 10%; right: 10%;
  top: 30%;
}
.ms-xray-frame::after {
  height: 1px; left: 15%; right: 15%;
  top: 60%;
}

.ms-xf-1 { --fr:-5deg; width:120px;height:160px; top:5%;  left:5%;  animation: ms-float-frame 8s ease-in-out infinite }
.ms-xf-2 { --fr:8deg;  width:80px; height:110px; top:60%; left:3%;  animation: ms-float-frame 10s ease-in-out infinite; animation-delay:-3s }
.ms-xf-3 { --fr:-3deg; width:100px;height:140px; top:10%; right:4%; animation: ms-float-frame 9s  ease-in-out infinite; animation-delay:-6s }
.ms-xf-4 { --fr:6deg;  width:70px; height:95px;  top:65%; right:3%; animation: ms-float-frame 7s  ease-in-out infinite; animation-delay:-2s }

/* Brain/organ circle silhouette */
.ms-organ-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(45,212,191,.1);
  opacity: .5;
}
.ms-oc-1 { width:180px;height:180px; top:-40px; right:20%; }
.ms-oc-2 { width:120px;height:120px; top:20px;  right:calc(20% + 30px); border-color:rgba(37,99,235,.08) }
.ms-oc-3 { width: 60px;height: 60px; top:55px;  right:calc(20% + 60px); border-color:rgba(45,212,191,.06) }

/* Neural network lines in background */
.ms-neural-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: .06;
  animation: ms-neural-pulse 4s ease-in-out infinite;
}

/* Horizontal grid lines */
.ms-grid-lines {
  position: absolute;
  inset: 0;
}
.ms-grid-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(37,99,235,.08) 30%,
    rgba(37,99,235,.08) 70%,
    transparent 100%
  );
}
.ms-grid-line:nth-child(1) { top: 20% }
.ms-grid-line:nth-child(2) { top: 40% }
.ms-grid-line:nth-child(3) { top: 60% }
.ms-grid-line:nth-child(4) { top: 80% }

/* Floating medical icons */
@keyframes ms-icon-drift {
  0%,100% { transform: translate(0,0) rotate(var(--ir,0deg)) }
  33%      { transform: translate(5px,-8px) rotate(calc(var(--ir,0deg)+4deg)) }
  66%      { transform: translate(-4px,4px) rotate(calc(var(--ir,0deg)-3deg)) }
}
.ms-med-icon {
  position: absolute;
  font-size: 22px;
  opacity: .12;
  user-select: none;
  animation: ms-icon-drift 7s ease-in-out infinite;
}
.ms-mi-1 { --ir:10deg;  top:8%;  left:18%;  animation-delay:0s }
.ms-mi-2 { --ir:-8deg;  top:75%; left:15%;  animation-delay:-2.5s }
.ms-mi-3 { --ir:5deg;   top:20%; right:18%; animation-delay:-4s }
.ms-mi-4 { --ir:-12deg; top:80%; right:15%; animation-delay:-1.5s }
.ms-mi-5 { --ir:15deg;  top:50%; left:5%;   animation-delay:-3.5s }

/* ---------- Scroll reveal for this section ---------- */
.ms-upload-left-hidden {
  opacity: 0;
  transform: translateX(-30px);
}
.ms-upload-left-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
}
.ms-upload-right-hidden {
  opacity: 0;
  transform: translateX(30px) scale(.97);
}
.ms-upload-right-visible {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  transition: opacity .65s cubic-bezier(.4,0,.2,1) .15s,
              transform .65s cubic-bezier(.4,0,.2,1) .15s;
}