/* DRishti - animated retina (built by static/js/retina.js).
   Two ways to drive it:
     classes  .drawn -> .scanning -> .found     the landing hero sequence
     data-stage="capture|quality|segment|grade|consensus|report"
                                                 the How-it-works story      */

.retina { width: 100%; height: auto; overflow: visible; }

.retina .r-bezel {
  fill: #0b1f17;
  stroke: rgba(207, 227, 216, 0.14);
  stroke-width: 1.5;
}

.retina .r-base {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: retina-in 1.1s var(--ease-out) both;
}

/* ---------------------------------------------------------------- vessels */
.retina .vessel {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1.5s var(--ease-out), opacity 0.6s ease;
  transition-delay: calc(var(--i) * 32ms);
}
.retina .vein   { stroke: #5a140a; }
.retina .artery { stroke: #a23a1d; opacity: 0.92; }
.retina .seg    { stroke: var(--sky); opacity: 0; filter: drop-shadow(0 0 2px rgba(91, 159, 208, 0.8)); }

.retina.drawn .vessel:not(.seg),
.retina[data-stage] .vessel:not(.seg) { stroke-dashoffset: 0 !important; }

.retina[data-stage="segment"] .seg,
.retina[data-stage="grade"] .seg { opacity: 0.9; stroke-dashoffset: 0 !important; }

/* ------------------------------------------------------ disc and lesions */
.retina .r-disc {
  opacity: 0;
  transition: opacity 0.9s ease 0.5s;
  filter: drop-shadow(0 0 10px rgba(255, 236, 170, 0.55));
}
.retina.drawn .r-disc, .retina[data-stage] .r-disc { opacity: 1; }

.retina .lesion { transition: opacity 0.6s ease, filter 0.6s ease; }
.retina .lesion.ma  { fill: #6d0b07; }
.retina .lesion.ex  { fill: #f6de7c; }
.retina .lesion.hem { fill: #4a0a05; opacity: 0.88; }

.retina[data-stage="grade"] .lesion,
.retina[data-stage="consensus"] .lesion,
.retina[data-stage="report"] .lesion { filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.9)); }

/* ------------------------------------------------------------- scanning */
.retina .r-sweep { opacity: 0; transition: opacity 0.8s ease; }
.retina.scanning .r-sweep,
.retina[data-stage="quality"] .r-sweep,
.retina[data-stage="segment"] .r-sweep { opacity: 1; }

.retina .r-sweep-arm {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: spin 5.5s linear infinite;
}
.retina .r-sweep-line { stroke: #cfe3d8; stroke-width: 1.4; opacity: 0.75; }

.retina .r-fov-ring {
  fill: none;
  stroke: #cfe3d8;
  stroke-width: 1.6;
  stroke-dasharray: 3 9;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: opacity 0.6s ease;
  animation: spin 24s linear infinite reverse;
}
.retina.scanning .r-fov-ring { opacity: 0.45; }
.retina[data-stage="quality"] .r-fov-ring { opacity: 1; stroke: var(--amber-2); stroke-width: 2.4; }

/* -------------------------------------------------------------- markers */
.retina .marker {
  opacity: 0;
  transform-box: fill-box;
  transition: opacity 0.5s ease;
}
.retina .marker-ring  { fill: none; stroke: #cfe3d8; stroke-width: 2; }
.retina .is-lesion .marker-ring { stroke: var(--amber-2); stroke-width: 2.2; }
.retina .marker-pulse { fill: none; stroke: inherit; stroke-width: 1.5; opacity: 0; }
.retina .is-lesion .marker-pulse { stroke: var(--amber-2); }
.retina .m-disc .marker-pulse, .retina .m-fovea .marker-pulse { stroke: #cfe3d8; }

.retina .leader { fill: none; stroke: rgba(207, 227, 216, 0.6); stroke-width: 1.3; }
.retina .marker-label {
  fill: var(--cream);
  font: 600 16px var(--sans);
  letter-spacing: 0.02em;
}
.retina .is-lesion .marker-label { fill: var(--amber-2); }

/* Hero: markers arrive one after another once the sweep is running. */
.retina.found .marker { opacity: 1; transition-delay: calc(var(--m) * 420ms); }
.retina.found .marker-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: marker-ping 2.4s ease-out infinite;
  animation-delay: calc(var(--m) * 420ms);
}

/* Story: anatomy first, lesions once grading starts. */
.retina[data-stage="segment"] .m-disc,
.retina[data-stage="segment"] .m-fovea,
.retina[data-stage="grade"] .marker,
.retina[data-stage="consensus"] .marker,
.retina[data-stage="report"] .marker { opacity: 1; transition-delay: calc(var(--m) * 160ms); }

@keyframes retina-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes marker-ping {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.9); }
}