@import url("./storm-iso27001.css");

body[data-page="iso22301"] .isms-hero {
  background:
    radial-gradient(circle at 80% 14%,rgba(75,145,255,.23),transparent 28%),
    radial-gradient(circle at 63% 88%,rgba(39,121,255,.3),transparent 33%),
    linear-gradient(135deg,#141827,#1c2942 64%,#17243c);
}

body[data-page="iso22301"] .isms-cycle-ring {
  border-style: dashed;
}

body[data-page="iso22301"] .isms-cycle-centre {
  background: linear-gradient(145deg,#3182ff,#174fa8);
}

body[data-page="iso22301"] .isms-requirement:hover {
  border-color: #5b98f8;
}

/* ---------- BCMS cycle animation: PDCA in motion + recovery dial ----------
   12s lap. The dot starts at 9 o'clock and passes each card in the middle of its 3s slot
   (Plan 0–3s, Do 3–6s, Check 6–9s, Act 9–12s). The recovery arc sweeps from Do to the
   end of the lap, and the BCMS core glows as the lap completes. */
body[data-page="iso22301"] .isms-cycle-ring::before,
body[data-page="iso22301"] .isms-cycle-ring::after { display: none; }
body[data-page="iso22301"] .bcms-dial { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; }
body[data-page="iso22301"] .bcms-dial circle { fill: none; }
body[data-page="iso22301"] .bcms-dial-ticks { stroke: rgba(126,175,255,.35); stroke-width: 8; stroke-dasharray: .1 .9; stroke-dashoffset: .05; }
body[data-page="iso22301"] .bcms-dial-major { stroke: rgba(126,175,255,.7); stroke-width: 12; stroke-dasharray: .03 .97; stroke-dashoffset: .015; }
body[data-page="iso22301"] .bcms-dial-track { stroke: rgba(126,175,255,.22); stroke-width: 1; }
body[data-page="iso22301"] .bcms-dial-arc {
  stroke: #6fa6ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(79,145,255,.85));
  animation: bcms-recover 12s linear infinite;
}
body[data-page="iso22301"] .bcms-arrows { fill: none; stroke: rgba(130,179,255,.75); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="iso22301"] .bcms-orbit { transform-box: fill-box; transform-origin: center; animation: bcms-orbit 12s linear infinite; }
body[data-page="iso22301"] .bcms-orbit .bcms-orbit-box { stroke: none; }
body[data-page="iso22301"] .bcms-orbit .bcms-orbit-halo { fill: rgba(79,145,255,.15); }
body[data-page="iso22301"] .bcms-orbit .bcms-orbit-dot { fill: #4f91ff; filter: drop-shadow(0 0 5px rgba(79,145,255,.9)); }
body[data-page="iso22301"] .isms-cycle-centre { animation: bcms-core 12s ease-in-out infinite; }
body[data-page="iso22301"] .isms-cycle-node { animation: bcms-node 12s ease-in-out infinite; }
body[data-page="iso22301"] .isms-cycle-node--do { animation-delay: 3s; }
body[data-page="iso22301"] .isms-cycle-node--check { animation-delay: 6s; }
body[data-page="iso22301"] .isms-cycle-node--act { animation-delay: 9s; }
@keyframes bcms-orbit { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes bcms-recover {
  0% { stroke-dashoffset: 0; opacity: 1; }
  12% { stroke-dashoffset: 0; opacity: 0; }
  24% { stroke-dashoffset: 100; opacity: 0; }
  25% { stroke-dashoffset: 100; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes bcms-core {
  0% { box-shadow: 0 20px 50px rgba(12,57,136,.4), 0 0 0 10px rgba(79,145,255,.2), 0 0 70px rgba(79,145,255,.55); }
  14%, 92% { box-shadow: 0 20px 50px rgba(12,57,136,.4), 0 0 0 0 rgba(79,145,255,0), 0 0 0 rgba(79,145,255,0); }
  100% { box-shadow: 0 20px 50px rgba(12,57,136,.4), 0 0 0 10px rgba(79,145,255,.2), 0 0 70px rgba(79,145,255,.55); }
}
@keyframes bcms-node {
  0%, 22% { border-color: rgba(130,179,255,.75); box-shadow: 0 14px 30px rgba(0,0,0,.21), 0 0 24px rgba(79,145,255,.3); transform: translateY(-3px); }
  27%, 100% { border-color: rgba(199,220,251,.21); box-shadow: 0 14px 30px rgba(0,0,0,.21); transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="iso22301"] .bcms-orbit, body[data-page="iso22301"] .bcms-dial-arc,
  body[data-page="iso22301"] .isms-cycle-centre, body[data-page="iso22301"] .isms-cycle-node { animation: none; }
}