/* ============================================================
   Ofnstube · glut-ring.css
   LEITMOTIV — Glut-Ring: concentric rings of pulsing ember.
   Applied: hero backdrop · card hover · CTA focus · timeline
   markers · footer pattern · 404 focus · logo-mark pulse.
   ============================================================ */

/* — Core ring object: concentric ember circles — */
.glut-ring {
  --ring-gap: 38px;
  --ring-line: 2px;
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent calc(var(--ring-gap) - var(--ring-line)),
      var(--ember-glow-2) calc(var(--ring-gap) - var(--ring-line)),
      var(--ember-glow-2) var(--ring-gap));
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 74%);
          mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 74%);
  opacity: .5;
}

/* hero: a single large breathing ring set */
.glut-ring--hero {
  width: min(118vw, 1180px);
  inset: auto auto 50% 50%;
  transform: translate(-50%, 50%);
  opacity: .42;
  animation: glut-breathe 9s var(--ease-in-out) infinite;
}

/* footer: static rings tucked into a corner */
.glut-ring--footer {
  --ring-gap: 30px;
  width: 460px;
  inset: auto -150px -190px auto;
  opacity: .22;
}

/* 404: big central focus ring */
.glut-ring--404 {
  --ring-gap: 30px;
  width: min(86vw, 540px);
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  opacity: .5;
  animation: glut-breathe 7s var(--ease-in-out) infinite;
}

/* a filled core disc that sits inside hero rings */
.glut-core {
  position: absolute;
  inset: auto auto 50% 50%;
  transform: translate(-50%, 50%);
  width: clamp(220px, 34vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
    var(--ember-glow-1) 0%,
    var(--ember-glow-3) 42%,
    transparent 70%);
  filter: blur(8px);
  animation: glut-pulse 6s var(--ease-in-out) infinite;
}

/* — Ring keyframes — */
@keyframes glut-breathe {
  0%, 100% { opacity: .30; transform: translate(-50%, 50%) scale(1); }
  50%      { opacity: .52; transform: translate(-50%, 50%) scale(1.045); }
}
@keyframes glut-pulse {
  0%, 100% { opacity: .55; transform: translate(-50%, 50%) scale(1); }
  50%      { opacity: .9;  transform: translate(-50%, 50%) scale(1.07); }
}
@keyframes glut-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 7px var(--ember-glow-1)); }
}

/* — Logo-mark pulse (added on load / scroll-in by JS) — */
.logo-mark { width: 38px; height: 38px; flex: none; transition: filter var(--dur) var(--ease-out); }
.footer-brand .logo-mark { width: 46px; height: 46px; }

/* final-CTA backdrop ring */
.glut-ring--cta {
  --ring-gap: 34px;
  width: min(122vw, 1000px);
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  opacity: .3;
}
.logo-mark.is-glowing { animation: glut-logo-pulse 1.5s var(--ease-in-out) 2; }

/* — Glut hover utility — any card / surface — */
.glut-hover {
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.glut-hover:hover,
.glut-hover:focus-within {
  border-color: rgba(255, 107, 26, .55);
  box-shadow: var(--glut-soft);
}

/* — Timeline marker: a small live ember ring — */
.glut-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ember-orange);
  box-shadow: var(--glut-strong);
  flex: none;
}
.glut-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 107, 26, .4);
  animation: glut-dot-ripple 3.4s var(--ease-out) infinite;
}
@keyframes glut-dot-ripple {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glut-ring--hero, .glut-ring--404, .glut-core,
  .logo-mark.is-glowing, .glut-dot::after { animation: none; }
}