/* ===============================================================
   cnopassy.com — Working Principles page (Path-C compliant)
   100% original SVG/CSS — no third-party video assets
   =============================================================== */

.prin-section {
  padding: 64px 0;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line-soft);
}
.prin-section--alt { background: var(--c-bg-soft); }
.prin-section__head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.prin-section__head h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 800;
  color: var(--c-primary);
  margin: 12px 0 14px;
  letter-spacing: -.01em;
}
.prin-section__head p {
  color: var(--c-text-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}
.prin-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(242,100,48,.12);
  color: var(--c-accent-dark);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------- main 2-col layout ------- */
.prin-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}
.prin-grid--reverse { grid-template-columns: 1fr 1.4fr; }
.prin-grid--reverse .prin-notes { order: -1; }

.prin-anim {
  background: linear-gradient(160deg, #061a31 0%, #0b2a4a 100%);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #15355e;
}
.prin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.prin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f26430;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s var(--ease), transform .14s var(--ease);
}
.prin-btn:hover { background: var(--c-accent-dark); }
.prin-btn:active { transform: translateY(1px); }
.prin-btn[data-action="reset"] { background: #1b4e89; }
.prin-btn[data-action="reset"]:hover { background: #15355e; }
.prin-label {
  margin-left: auto;
  color: #cfe9ff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.prin-label output { color: #fff; font-weight: 700; }

.prin-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 680 / 380;
  display: block;
  border-radius: 12px;
  background: #061a31;
}

/* ------- side notes ------- */
.prin-notes {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.prin-notes h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prin-notes h3::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px;
  background: var(--c-accent);
}
.prin-notes ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.prin-notes li {
  padding: 6px 0 6px 18px;
  border-bottom: 1px dashed var(--c-line-soft);
  font-size: .92rem;
  color: var(--c-text-soft);
  position: relative;
  line-height: 1.55;
}
.prin-notes li:last-child { border-bottom: 0; }
.prin-notes li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}
.prin-notes li strong { color: var(--c-primary); font-weight: 600; }
.prin-formula {
  background: var(--c-bg-soft);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 16px 0 20px;
  font-size: .85rem;
  color: var(--c-text-soft);
}
.prin-formula code {
  display: block;
  font-family: "Cambria Math", Georgia, serif;
  font-size: 1rem;
  color: var(--c-primary);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ------- FAQ ------- */
.prin-faq {
  padding: 64px 0;
  background: #fff;
  border-top: 1px solid var(--c-line-soft);
}
.prin-faq__title {
  text-align: center;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 800;
  color: var(--c-primary);
  margin: 0 0 28px;
}
.prin-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.prin-faq-item {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .14s var(--ease);
}
.prin-faq-item[open] {
  border-color: var(--c-accent);
  box-shadow: var(--shadow);
}
.prin-faq-item summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
}
.prin-faq-item summary::-webkit-details-marker { display: none; }
.prin-faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--c-accent);
  transition: transform .2s var(--ease);
}
.prin-faq-item[open] summary::after { content: "−"; }
.prin-faq-item summary i { color: var(--c-accent); }
.prin-faq-item__body {
  padding: 0 18px 18px;
  color: var(--c-text-soft);
  font-size: .92rem;
  line-height: 1.65;
}
.prin-faq-item__body .btn { margin-top: 10px; }

/* ------- SVG animations ------- */
@keyframes spin-r-a { from { transform: translate(220px,190px) rotate(0deg); } to { transform: translate(220px,190px) rotate(360deg); } }
@keyframes spin-r-b { from { transform: translate(420px,190px) rotate(0deg); } to { transform: translate(420px,190px) rotate(-360deg); } }
@keyframes spin-impeller { from { transform: translate(200px,200px) rotate(0deg); } to { transform: translate(200px,200px) rotate(360deg); } }
@keyframes flow-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -48; }
}
@keyframes droplet-fly {
  0%   { transform: translate(0,0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(0, 80px); opacity: 0; }
}
@keyframes ak-conveyor {
  from { transform: translateX(0); }
  to   { transform: translateX(-100px); }
}

/* runtime hooks (JS toggles .is-running) */
.prin-svg .prin-rotor-a { transform-origin: 220px 190px; }
.prin-svg .prin-rotor-b { transform-origin: 420px 190px; }
.prin-svg .prin-impeller { transform-origin: 200px 200px; }

.prin-svg.is-running .prin-rotor-a    { animation: spin-r-a 4s linear infinite; }
.prin-svg.is-running .prin-rotor-b    { animation: spin-r-b 4s linear infinite; }
.prin-svg.is-running .prin-impeller   { animation: spin-impeller 1.5s linear infinite; }
.prin-svg.is-running .r-flow-arrows path:first-child,
.prin-svg.is-running .c-flow-arrows path { animation: flow-dash 1.5s linear infinite; }
.prin-svg.is-running .ak-droplets circle { animation: droplet-fly 1.4s ease-in infinite; }
.prin-svg.is-running .ak-droplets circle:nth-child(2) { animation-delay: .15s; }
.prin-svg.is-running .ak-droplets circle:nth-child(3) { animation-delay: .30s; }
.prin-svg.is-running .ak-droplets circle:nth-child(4) { animation-delay: .45s; }
.prin-svg.is-running .ak-droplets circle:nth-child(5) { animation-delay: .60s; }
.prin-svg.is-running .ak-droplets circle:nth-child(6) { animation-delay: .75s; }
.prin-svg.is-running .ak-droplets circle:nth-child(7) { animation-delay: .90s; }
.prin-svg.is-running .ak-droplets circle:nth-child(8) { animation-delay: 1.05s; }
.prin-svg.is-running .ak-droplets circle:nth-child(9) { animation-delay: 1.20s; }
.prin-svg.is-running .ak-bottles { animation: ak-conveyor 5s linear infinite; }

/* ------- responsive ------- */
@media (max-width: 960px) {
  .prin-grid, .prin-grid--reverse { grid-template-columns: 1fr; }
  .prin-grid--reverse .prin-notes { order: 0; }
  .prin-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .prin-section { padding: 44px 0; }
  .prin-anim { padding: 14px; }
  .prin-controls { gap: 8px; }
  .prin-btn { padding: 7px 12px; font-size: .78rem; }
  .prin-label { width: 100%; margin-left: 0; text-align: right; }
  .prin-notes { padding: 20px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .prin-svg.is-running .prin-rotor-a,
  .prin-svg.is-running .prin-rotor-b,
  .prin-svg.is-running .prin-impeller,
  .prin-svg.is-running .r-flow-arrows path,
  .prin-svg.is-running .c-flow-arrows path,
  .prin-svg.is-running .ak-droplets circle,
  .prin-svg.is-running .ak-bottles {
    animation: none !important;
  }
}