/* ───────────────────────────────────────────────
   CODEX GRATUS
   ─────────────────────────────────────────────── */

.gratus-mark-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:999px;
  padding:.35rem;
  margin-bottom:.35rem;
}

.gratus-mark-link:focus-visible{
  outline:2px solid rgba(252,234,187,.85);
  outline-offset:4px;
  border-radius:999px;
}

.gratus-mark{
  position:relative;
  width:138px;
  height:138px;
  display:inline-block;
  border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(240,215,154,.10));
}

.gratus-ring,
.gratus-offer,
.gratus-light,
.gratus-field,
.gratus-star{
  position:absolute;
  display:block;
  box-sizing:border-box;
}

.gratus-ring-outer{
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:2px solid rgba(240,215,154,.88);
  border-radius:50%;
  opacity:.95;
}

.gratus-ring-inner{
  top:11px;
  right:11px;
  bottom:11px;
  left:11px;
  border:1px solid rgba(240,215,154,.30);
  border-radius:50%;
  opacity:.9;
}

/* two gentle offering forms */

.gratus-offer{
  top:50%;
  width:42px;
  height:64px;
  margin-top:-16px;
  border:1.5px solid rgba(240,215,154,.74);
  border-radius:50%;
}

.gratus-offer-left{
  left:50%;
  margin-left:-38px;
  border-top-color:transparent;
  border-right-color:transparent;
  transform:rotate(-18deg);
  animation:gratus-breathe-left 9.2s ease-in-out infinite;
}

.gratus-offer-right{
  left:50%;
  margin-left:-4px;
  border-top-color:transparent;
  border-left-color:transparent;
  transform:rotate(18deg);
  opacity:.72;
  animation:gratus-breathe-right 10.4s ease-in-out infinite;
}

/* lifted light */

.gratus-light{
  top:38px;
  left:50%;
  width:12px;
  height:12px;
  margin-left:-6px;
  border-radius:50%;
  background:#fceabb;
  box-shadow:
    0 0 12px rgba(252,234,187,.28),
    0 0 22px rgba(252,234,187,.16);
  animation:gratus-light-pulse 6.2s ease-in-out infinite;
}

/* quiet receiving field */

.gratus-field{
  top:50%;
  left:50%;
  width:82px;
  height:82px;
  margin-left:-41px;
  margin-top:-41px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(240,215,154,.12) 0%,
    rgba(240,215,154,.05) 42%,
    rgba(240,215,154,0) 72%
  );
  animation:gratus-field-breathe 11s ease-in-out infinite;
}

.gratus-mark::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:94px;
  height:94px;
  margin-left:-47px;
  margin-top:-47px;
  border:1px solid rgba(240,215,154,.08);
  border-radius:50%;
  animation:gratus-field-breathe 12.4s ease-in-out infinite;
}

.gratus-star{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fceabb;
  box-shadow:0 0 8px rgba(252,234,187,.22);
  animation:gratus-twinkle 7.2s ease-in-out infinite;
}

.gratus-star-1{
  top:31px;
  right:34px;
  animation-delay:.4s;
}

.gratus-star-2{
  top:46px;
  left:36px;
  animation-delay:1.6s;
}

.gratus-star-3{
  bottom:34px;
  left:50%;
  margin-left:-2px;
  animation-delay:2.8s;
}

.gratus-mark-link:hover .gratus-mark,
.gratus-mark-link:focus-visible .gratus-mark{
  filter:drop-shadow(0 0 16px rgba(240,215,154,.12));
}

@keyframes gratus-breathe-left{
  0%,100%{
    transform:rotate(-18deg);
    opacity:.78;
  }
  50%{
    transform:rotate(-14deg);
    opacity:1;
  }
}

@keyframes gratus-breathe-right{
  0%,100%{
    transform:rotate(18deg);
    opacity:.66;
  }
  50%{
    transform:rotate(14deg);
    opacity:.9;
  }
}

@keyframes gratus-light-pulse{
  0%,100%{
    transform:scale(1);
    opacity:.82;
  }
  50%{
    transform:scale(1.18);
    opacity:1;
  }
}

@keyframes gratus-field-breathe{
  0%,100%{
    transform:scale(1);
    opacity:.72;
  }
  50%{
    transform:scale(1.05);
    opacity:1;
  }
}

@keyframes gratus-twinkle{
  0%,100%{
    opacity:.26;
    transform:scale(1);
  }
  50%{
    opacity:.78;
    transform:scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce){
  .gratus-offer,
  .gratus-light,
  .gratus-field,
  .gratus-mark::before,
  .gratus-star{
    animation:none !important;
  }
}