/* ==========================================================================
   EUV 光刻观察室 — project layer
   The shell and components live in ui/tokens.css + ui/shell.css.
   Only EUV-specific content, domain color and canvas details belong here.
   ========================================================================== */

/* Project signal colors follow the shared template palette (2026-10-19 sync). */
:root {
  --domain: #7b3dff;
  --domain-soft: #f0e9ff;
  --laser: #ff5a2e;
}

body.dark {
  --domain: #c0a6ff;
  --domain-soft: #241e38;
  --laser: #ff8a66;
}

/* scene identity */
#scene-title {
  letter-spacing: 0.025em;
}

#scene-title span {
  color: var(--domain);
}

#scene-subtitle {
  max-width: 28ch;
}

.line-key.euv {
  background: var(--domain);
}

/* the EUV machine is wide and low: keep the caption compact */
@media (max-width: 1100px) {
  #scene-title {
    font-size: 34px;
  }
}

@media (max-width: 720px) {
  #scene-title {
    font-size: 29px;
  }

  #part-count {
    font-size: 11px;
  }
}

/* wafer detail canvas keeps the approved aspect ratio inside the inspector */
#wafer-detail {
  aspect-ratio: 520 / 230;
  max-height: 124px;
}

/* focus mode: the model owns the screen, captions step back */
#viewport.detail-view .view-caption,
#viewport.detail-view .view-meta {
  opacity: 0;
  pointer-events: none;
}

/* fullscreen keeps the shell frame but removes the page margin */
.workbench:fullscreen {
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  background: var(--paper);
}

/* document tables from the local markdown files */
.document-body table {
  display: table;
}

.document-body td:first-child,
.document-body th:first-child {
  width: 44px;
}

/* the spread labels are generated for the eight systems */
.spread-labels button {
  font-family: var(--font-ui);
}

/* tiny screens: keep the phase readout readable after wrapping */
@media (max-width: 430px) {
  #phase-name {
    max-width: 56vw;
  }

  .view-caption p {
    display: none;
  }
}

/* ==========================================================================
   Loading mark: the EUV optical chain assembles itself, in the same spirit as
   the template page's pen loader (parts slide in, light draws the path).
   ========================================================================== */
.euv-assembly {
  overflow: visible;
}

.loader-mark {
  width: 132px;
  height: 132px;
  color: var(--ink);
}

.loader-mark .euv-assembly g {
  stroke-width: 1.8;
}

.euv-assembly g {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.euv-assembly .eu-droplet { animation: euDroplet 3.2s cubic-bezier(.22, 1, .36, 1) infinite; }
.euv-assembly .eu-collector { animation: euCollector 3.2s cubic-bezier(.22, 1, .36, 1) infinite; }
.euv-assembly .eu-reticle { animation: euReticle 3.2s cubic-bezier(.22, 1, .36, 1) infinite; }
.euv-assembly .eu-mirrors { animation: euMirrors 3.2s cubic-bezier(.22, 1, .36, 1) infinite; }
.euv-assembly .eu-wafer { animation: euWafer 3.2s cubic-bezier(.22, 1, .36, 1) infinite; }

.euv-assembly .eu-ray {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  opacity: .9;
  animation: euRay 3.2s linear infinite;
}

@keyframes euDroplet {
  0% { transform: translateY(-10px) scale(.6); opacity: 0; }
  10% { opacity: 1; }
  34%, 84% { transform: none; opacity: 1; }
  100% { transform: scale(.8); opacity: 0; }
}

@keyframes euCollector {
  0% { transform: translateX(-18px) scale(.7); opacity: 0; }
  16% { opacity: 1; }
  40%, 84% { transform: none; opacity: 1; }
  100% { transform: translateX(-8px); opacity: 0; }
}

@keyframes euReticle {
  0% { transform: translateY(-14px); opacity: 0; }
  22% { opacity: 1; }
  46%, 84% { transform: none; opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0; }
}

@keyframes euMirrors {
  0% { transform: translateX(16px) scale(.85); opacity: 0; }
  28% { opacity: 1; }
  52%, 84% { transform: none; opacity: 1; }
  100% { transform: translateX(8px); opacity: 0; }
}

@keyframes euWafer {
  0% { transform: translateY(16px); opacity: 0; }
  34% { opacity: 1; }
  58%, 84% { transform: none; opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

@keyframes euRay {
  0%, 34% { stroke-dashoffset: 120; opacity: 0; }
  40% { opacity: .9; }
  72% { stroke-dashoffset: 0; opacity: .9; }
  84% { stroke-dashoffset: 0; opacity: .9; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .euv-assembly g,
  .euv-assembly .eu-ray { animation: none; opacity: 1; }
  .euv-assembly .eu-ray { stroke-dashoffset: 0; }
}

/* The shared loader rotates its mark; the assembly must stay upright. */
.loader-mark .euv-assembly {
  animation: none;
}