/* Scope scan hero animation - CSS only */

.scope-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 6/5;
  margin-left: auto;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 20% 30%, #23495C 0%, #1B3A4B 45%, #12303E 100%);
  box-shadow: 0 30px 80px -30px rgba(18, 48, 62, 0.55);
  isolation: isolate;
  color: #F7F3EC;
  font-family: var(--font-body);
}

.scope-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(247, 243, 236, 0.1) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.scope-rings {
  position: absolute;
  inset: 0;
}

.scope-rings span {
  position: absolute;
  left: 22%;
  top: 45%;
  width: 220px;
  height: 340px;
  border: 1px solid rgba(232, 168, 74, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}

.scope-rings span:nth-child(2) {
  width: 340px;
  height: 460px;
}

.scope-rings span:nth-child(3) {
  width: 460px;
}

.scope-cv {
  position: absolute;
  left: 7%;
  top: 11%;
  width: 30%;
  aspect-ratio: 3/4;
  background: #FFFDF8;
  border-radius: 12px;
  padding: 20px 18px;
  transform: rotate(-4deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.scope-cv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.scope-cv-avatar {
  width: 22%;
  aspect-ratio: 1;
  background: #EDE7DA;
  border-radius: 50%;
  display: block;
}

.scope-cv-name {
  height: 7px;
  width: 55%;
  background: #D9CFBF;
  border-radius: 4px;
  display: block;
}

.scope-cv-line {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #E6DDCD;
  position: relative;
  flex-shrink: 0;
}

.scope-cv-line.is-short {
  width: 60%;
}

.scope-cv-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #C8782A;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.scope-beam {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 26px;
  background: linear-gradient(to bottom, transparent, rgba(200, 120, 42, 0.35), transparent);
  border-bottom: 2px solid #C8782A;
  box-shadow: 0 0 18px rgba(232, 168, 74, 0.8);
  opacity: 0;
}

.scope-chips {
  position: absolute;
  left: 7%;
  top: 66%;
  width: 44%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scope-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(247, 243, 236, 0.12);
  border: 1px solid rgba(232, 168, 74, 0.45);
  color: #F7E3C4;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate(-30px, 10px) scale(0.7);
}

.scope-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scope-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

.scope-path.is-core {
  stroke: #E8A84A;
}

.scope-path.is-pivot {
  stroke: #8FB3A0;
}

.scope-jobs {
  position: absolute;
  right: 5%;
  top: 10%;
  width: 48%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scope-job {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.96);
  color: #1A1A1A;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateX(40px);
}

.scope-job.is-filtered .scope-job-title {
  text-decoration: line-through;
}

.scope-score {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.scope-score svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.scope-ring-bg {
  fill: none;
  stroke: #EDE7DA;
  stroke-width: 3.2;
}

.scope-ring-fg {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.scope-job.is-core .scope-ring-fg {
  stroke: #B85C38;
}

.scope-job.is-pivot .scope-ring-fg {
  stroke: #5C7A6B;
}

.scope-job.is-filtered .scope-ring-fg {
  stroke: #B8B0A4;
}

.scope-score-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 13px;
}

.scope-job-title {
  font-size: 12.5px;
  font-weight: 600;
}

.scope-job-meta {
  font-size: 10.5px;
  color: #6B6B6B;
}

.scope-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
}

.scope-job.is-core .scope-badge {
  background: rgba(184, 92, 56, 0.12);
  color: #B85C38;
}

.scope-job.is-pivot .scope-badge {
  background: rgba(92, 122, 107, 0.14);
  color: #3F5E50;
}

.scope-caption {
  position: absolute;
  left: 8%;
  bottom: 7%;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: rgba(247, 243, 236, 0.8);
}

.scope-dot {
  width: 7px;
  height: 7px;
  background: #8FD1A8;
  border-radius: 50%;
  position: relative;
}

.scope-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #8FD1A8;
  border-radius: 50%;
}

.scope-caption-text {
  line-height: 1.4;
}

/* Keyframes */
@keyframes scopeRing {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  45% { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}

@keyframes scopeBeam {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(900%); opacity: 0; }
}

@keyframes scopeHighlight {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0.9; }
}

@keyframes scopeChip {
  0% { transform: translate(-30px, 10px) scale(0.7); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes scopeDraw {
  0% { stroke-dashoffset: 260; }
  100% { stroke-dashoffset: 0; }
}

@keyframes scopeJobIn {
  0% { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes scopeJobInDim {
  0% { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 0.45; }
}

@keyframes scopeScore {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: calc(100 - var(--score)); }
}

@keyframes scopeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes scopeDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0; }
}

/* Animations - scoped under .scope-stage.is-run */
.scope-stage.is-run .scope-rings span:nth-child(1) {
  animation: scopeRing 2.4s both 0s;
}

.scope-stage.is-run .scope-rings span:nth-child(2) {
  animation: scopeRing 2.4s both 0.35s;
}

.scope-stage.is-run .scope-rings span:nth-child(3) {
  animation: scopeRing 2.4s both 0.7s;
}

.scope-stage.is-run .scope-beam {
  animation: scopeBeam 2s both 0.3s;
}

.scope-stage.is-run .scope-cv-line:nth-child(2)::after {
  animation: scopeHighlight 0.5s both 0.94s;
}

.scope-stage.is-run .scope-cv-line:nth-child(3)::after {
  animation: scopeHighlight 0.5s both 1.16s;
}

.scope-stage.is-run .scope-cv-line:nth-child(4)::after {
  animation: scopeHighlight 0.5s both 1.38s;
}

.scope-stage.is-run .scope-cv-line:nth-child(5)::after {
  animation: scopeHighlight 0.5s both 1.6s;
}

.scope-stage.is-run .scope-cv-line:nth-child(6)::after {
  animation: scopeHighlight 0.5s both 1.82s;
}

.scope-stage.is-run .scope-cv-line:nth-child(7)::after {
  animation: scopeHighlight 0.5s both 2.04s;
}

.scope-stage.is-run .scope-cv-line:nth-child(8)::after {
  animation: scopeHighlight 0.5s both 2.26s;
}

.scope-stage.is-run .scope-chip {
  animation: scopeChip 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

.scope-stage.is-run .scope-chip[style*="--i:0"] {
  animation-delay: 2.3s;
}

.scope-stage.is-run .scope-chip[style*="--i:1"] {
  animation-delay: calc(2.3s + 0.18s);
}

.scope-stage.is-run .scope-chip[style*="--i:2"] {
  animation-delay: calc(2.3s + 0.36s);
}

.scope-stage.is-run .scope-chip[style*="--i:3"] {
  animation-delay: calc(2.3s + 0.54s);
}

.scope-stage.is-run .scope-path.is-core {
  animation: scopeDraw 1.1s ease-out both 3.4s;
}

.scope-stage.is-run .scope-path.is-pivot {
  animation: scopeDraw 1.1s ease-out both 3.6s;
}

.scope-stage.is-run .scope-job:not(.is-filtered) {
  animation: scopeJobIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.scope-stage.is-run .scope-job.is-filtered {
  animation: scopeJobInDim 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.scope-stage.is-run .scope-job[style*="--i:0"]:not(.is-filtered) {
  animation-delay: 4.3s;
}

.scope-stage.is-run .scope-job[style*="--i:1"]:not(.is-filtered) {
  animation-delay: calc(4.3s + 0.35s);
}

.scope-stage.is-run .scope-job[style*="--i:2"]:not(.is-filtered) {
  animation-delay: calc(4.3s + 0.7s);
}

.scope-stage.is-run .scope-job.is-filtered[style*="--i:2"] {
  animation-delay: calc(4.3s + 0.7s);
}

.scope-stage.is-run .scope-ring-fg {
  animation: scopeScore 1.2s ease-out both;
}

.scope-stage.is-run .scope-job[style*="--i:0"] .scope-ring-fg {
  animation-delay: 4.7s;
}

.scope-stage.is-run .scope-job[style*="--i:1"] .scope-ring-fg {
  animation-delay: calc(4.7s + 0.35s);
}

.scope-stage.is-run .scope-job[style*="--i:2"] .scope-ring-fg {
  animation-delay: calc(4.7s + 0.7s);
}

.scope-stage.is-run .scope-dot::after {
  animation: scopeDotPulse 1.6s infinite both;
}

.scope-stage.is-run .scope-cv,
.scope-stage.is-run .scope-chips,
.scope-stage.is-run .scope-paths,
.scope-stage.is-run .scope-jobs {
  animation: scopeOut 0.6s both 9.2s;
}

/* Static state + Reduced motion */
.scope-stage.is-static .scope-rings span {
  animation: none !important;
  opacity: 0;
}
.scope-stage.is-static .scope-beam {
  animation: none !important;
  opacity: 0;
}
.scope-stage.is-static .scope-cv-line::after {
  animation: none !important;
  transform: scaleX(1);
  opacity: 0.9;
}
.scope-stage.is-static .scope-chip {
  animation: none !important;
  transform: translate(0, 0) scale(1);
  opacity: 1;
}
.scope-stage.is-static .scope-path {
  animation: none !important;
  stroke-dashoffset: 0;
}
.scope-stage.is-static .scope-job {
  animation: none !important;
  transform: translateX(0);
  opacity: 1;
}
.scope-stage.is-static .scope-job.is-filtered {
  opacity: 0.45 !important;
}
.scope-stage.is-static .scope-ring-fg {
  animation: none !important;
  stroke-dashoffset: calc(100 - var(--score));
}
.scope-stage.is-static .scope-dot::after {
  animation: none !important;
}
.scope-stage.is-static .scope-cv,
.scope-stage.is-static .scope-chips,
.scope-stage.is-static .scope-paths,
.scope-stage.is-static .scope-jobs {
  animation: none !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scope-stage .scope-rings span {
    animation: none !important;
    opacity: 0;
  }
  .scope-stage .scope-beam {
    animation: none !important;
    opacity: 0;
  }
  .scope-stage .scope-cv-line::after {
    animation: none !important;
    transform: scaleX(1);
    opacity: 0.9;
  }
  .scope-stage .scope-chip {
    animation: none !important;
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  .scope-stage .scope-path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  .scope-stage .scope-job {
    animation: none !important;
    transform: translateX(0);
    opacity: 1;
  }
  .scope-stage .scope-job.is-filtered {
    opacity: 0.45 !important;
  }
  .scope-stage .scope-ring-fg {
    animation: none !important;
    stroke-dashoffset: calc(100 - var(--score));
  }
  .scope-stage .scope-dot::after {
    animation: none !important;
  }
  .scope-stage .scope-cv,
  .scope-stage .scope-chips,
  .scope-stage .scope-paths,
  .scope-stage .scope-jobs {
    animation: none !important;
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .scope-stage { max-width: 460px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .scope-stage { aspect-ratio: 5/6; border-radius: 22px; }
  .scope-cv { width: 34%; top: 8%; padding: 14px 12px; gap: 7px; }
  .scope-cv-line { height: 4px; }
  .scope-chips { top: 60%; width: 40%; gap: 5px; }
  .scope-chip { font-size: 10px; padding: 4px 8px; }
  .scope-jobs { width: 54%; top: 8%; gap: 8px; }
  .scope-job { padding: 8px 9px; gap: 8px; border-radius: 12px; }
  .scope-score { width: 32px; height: 32px; }
  .scope-score-num { font-size: 11px; }
  .scope-job-title { font-size: 11.5px; line-height: 1.25; }
  .scope-job-meta { font-size: 10px; }
  .scope-badge { font-size: 8.5px; white-space: nowrap; }
  .scope-caption { bottom: 5%; font-size: 10.5px; }
}

/* Dark theme */
[data-theme="dark"] .scope-stage {
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}