/* Pipeline weer groen, en het alarm als een productie-app down is. */

.celebration[data-mode="ci-red"] { --c1: #450a0a; --c2: #dc2626; --c3: #fecaca; --glow: rgb(239 68 68 / .8); }
.celebration[data-mode="ci-green"] { --c1: #052e16; --c2: #16a34a; --c3: #bbf7d0; --glow: rgb(74 222 128 / .8); }
.celebration[data-mode="alarm"] { --c1: #450a0a; --c2: #dc2626; --c3: #fecaca; --glow: rgb(239 68 68 / .9); }
.celebration[data-mode="recovered"] { --c1: #052e16; --c2: #16a34a; --c3: #bbf7d0; --glow: rgb(74 222 128 / .8); }

/* --- Pipeline ---------------------------------------------------------- */

.cel-ci-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; --light: 239 68 68; }
.cel-ci-scene.is-green { --light: 74 222 128; }
.cel-ci-beacon { position: relative; width: 22vh; height: 26vh; }
.cel-ci-light {
  position: absolute; left: 50%; top: 9vh; width: 300vmax; height: 300vmax; translate: -50% -50%;
  background: conic-gradient(from 0deg, rgb(var(--light) / .45) 0deg 20deg, transparent 34deg 180deg, rgb(var(--light) / .45) 180deg 200deg, transparent 214deg);
  animation: cel-spin 1s linear infinite;
}
.cel-ci-scene.is-green .cel-ci-light { animation-duration: 3s; }
.cel-ci-dome {
  position: absolute; left: 2vh; right: 2vh; top: 0; height: 18vh; border-radius: 9vh 9vh 1vh 1vh;
  background: radial-gradient(circle at 50% 60%, #fff, rgb(var(--light)) 45%, rgb(var(--light) / .6));
  box-shadow: 0 0 8vh rgb(var(--light)), inset 0 -2vh 3vh rgb(0 0 0 / .25);
  transition: background .3s, box-shadow .3s;
}
.cel-ci-base { position: absolute; left: 0; right: 0; bottom: 0; height: 8vh; border-radius: 1vh; background: linear-gradient(180deg, #52525b, #18181b); }
.cel-ci-wrench {
  position: absolute; left: calc(50% + 10vh); top: 30vh; width: 26vh; height: 5vh; visibility: hidden; transform-origin: 15% 50%;
  border-radius: 2.5vh; background: linear-gradient(180deg, #e5e7eb, #9ca3af);
  box-shadow: 0 1vh 2vh rgb(0 0 0 / .5);
}
.cel-ci-wrench::before {
  content: ""; position: absolute; left: -5vh; top: -3vh; width: 11vh; height: 11vh; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #f3f4f6, #9ca3af);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 68%, 48% 68%, 48% 32%, 0 32%);
}
.cel-ci-text { position: relative; text-align: center; }
.cel-ci-kicker { font-size: 2.4vh; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: var(--c3); }
.cel-ci-title { margin-top: .6vh; font-size: 9vh; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 3vh var(--glow); }
.cel-ci-path { margin-top: 1vh; font-family: ui-monospace, Menlo, monospace; font-size: 2.6vh; color: var(--c3); }
.cel-ci-by { margin-top: 1.4vh; min-height: 3vh; font-size: 2.8vh; font-weight: 700; }

/* --- Alarm --------------------------------------------------------------- */

.cel-alarm-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; --light: 239 68 68; }
.cel-alarm-scene.is-recovered { --light: 74 222 128; }
.cel-alarm-pulse { position: absolute; inset: 0; background: radial-gradient(circle, rgb(var(--light) / .45), rgb(var(--light) / .1) 70%); animation: cel-alarm-flash .9s ease-in-out infinite; }
.cel-alarm-scene.is-recovered .cel-alarm-pulse { animation: none; opacity: .5; }
@keyframes cel-alarm-flash { 50% { opacity: .15; } }
.cel-alarm-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 5px);
}

.cel-alarm-beacon { position: absolute; top: 12vh; width: 0; height: 0; }
.cel-alarm-beacon.is-left { left: 12vw; }
.cel-alarm-beacon.is-right { right: 12vw; }
.cel-alarm-beacon::before {
  content: ""; position: absolute; left: -150vmax; top: -150vmax; width: 300vmax; height: 300vmax;
  background: conic-gradient(from 0deg, rgb(var(--light) / .4) 0deg 16deg, transparent 28deg 180deg, rgb(var(--light) / .4) 180deg 196deg, transparent 208deg);
  animation: cel-spin .8s linear infinite;
}
.cel-alarm-beacon.is-right::before { animation-direction: reverse; }
.cel-alarm-scene.is-recovered .cel-alarm-beacon::before { animation-duration: 4s; }
.cel-alarm-beacon span {
  position: absolute; left: -6vh; top: -6vh; width: 12vh; height: 12vh; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff, rgb(var(--light)) 45%, rgb(var(--light) / .5));
  box-shadow: 0 0 8vh rgb(var(--light));
}

.cel-alarm-stripes {
  position: absolute; left: -10vw; right: -10vw; height: 6vh;
  background: repeating-linear-gradient(-45deg, rgb(var(--light)) 0 3vh, #111 3vh 6vh);
  animation: cel-stripes 1s linear infinite;
}
.cel-alarm-stripes.is-top { top: 0; }
.cel-alarm-stripes.is-bottom { bottom: 0; animation-direction: reverse; }
@keyframes cel-stripes { to { transform: translateX(8.5vh); } }

.cel-alarm-text { position: relative; z-index: 1; text-align: center; padding: 0 6vw; }
.cel-alarm-title {
  position: relative; font-family: var(--font-display); font-weight: 700; font-size: 13vh; line-height: 1; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 4vh rgb(var(--light)), 0 .8vh 0 rgb(0 0 0 / .5);
}
.cel-alarm-scene.is-glitch .cel-alarm-title { animation: cel-glitch .16s steps(2) infinite; }
.cel-alarm-scene.is-glitch .cel-alarm-title::before,
.cel-alarm-scene.is-glitch .cel-alarm-title::after {
  content: attr(data-text); position: absolute; inset: 0; mix-blend-mode: screen;
}
.cel-alarm-scene.is-glitch .cel-alarm-title::before { color: #22d3ee; translate: -1vh 0; clip-path: inset(10% 0 55% 0); }
.cel-alarm-scene.is-glitch .cel-alarm-title::after { color: #f43f5e; translate: 1vh 0; clip-path: inset(55% 0 10% 0); }
@keyframes cel-glitch { 0% { translate: .6vh -.3vh; } 50% { translate: -.8vh .4vh; skew: 4deg; } 100% { translate: .3vh 0; } }
.cel-alarm-sub { margin-top: 2vh; font-size: 3.4vh; font-weight: 700; color: var(--c3); }