/* Hero mark animation — the brand's concentric C arcs, drawn and drifting.
   Motion is subtle by design: the mark should read as a logo first. */

.hero-mark{isolation:isolate}
.hero-mark::before{
  content:"";position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--glow),transparent 62%);
  filter:blur(26px);z-index:-1;
  animation:mark-glow 9s ease-in-out infinite;
}

/* The arcs draw themselves in, then hold. The mark is the logotype — it keeps
   its orientation rather than rotating, per the booklet's placement rules. */
.arc-outer{
  stroke-dasharray:1000;
  animation:arc-draw 2.2s cubic-bezier(.22,.61,.36,1) both;
}
.arc-inner{
  stroke-dasharray:1000;
  animation:arc-draw 2.2s cubic-bezier(.22,.61,.36,1) .3s both;
}
.mark-core{animation:core-breathe 6s ease-in-out infinite}
.arc-node{animation:node-pulse 5s ease-in-out infinite}
.arc-node:nth-of-type(2){animation-delay:-1.3s}
.arc-node:nth-of-type(3){animation-delay:-2.6s}
.arc-node:nth-of-type(4){animation-delay:-3.9s}

@keyframes arc-draw{
  from{stroke-dashoffset:1000;opacity:0}
  to{stroke-dashoffset:0;opacity:1}
}
@keyframes core-breathe{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.09);opacity:1}
}
@keyframes node-pulse{
  0%,100%{opacity:.55;r:2.4}
  50%{opacity:1;r:3.1}
}
@keyframes mark-glow{
  0%,100%{opacity:.55;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}
}

@media(prefers-reduced-motion:reduce){
  .hero-mark::before,.arc-outer,.arc-inner,.mark-core,.arc-node{
    animation:none!important;
  }
  .arc-outer,.arc-inner{stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
}