/* Lint doorknippen: een project is officieel opgeleverd. */

.celebration[data-mode="ribbon"] { --c1: #4a0410; --c2: #dc2626; --c3: #fde68a; --glow: rgb(250 204 21 / .85); }

.cel-ribbon-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-ribbon-spot {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40vw 60vh at 50% 48%, rgb(255 236 170 / .22), transparent 70%),
    linear-gradient(180deg, transparent 70%, rgb(80 6 18 / .5));
}

.cel-ribbon-head { position: absolute; left: 0; right: 0; top: 63vh; text-align: center; opacity: 0; }
.cel-ribbon-kicker { font-size: 3vh; font-weight: 700; letter-spacing: .45em; text-transform: uppercase; color: #fde68a; text-shadow: 0 0 2vh rgb(250 204 21 / .6); }
.cel-ribbon-project { margin-top: 1vh; padding: 0 8vw; font-size: 7vh; font-weight: 700; line-height: 1.1; color: #fff; text-shadow: 0 .5vh 0 #7f0d1a, 0 0 3vh rgb(220 38 38 / .7); }

.cel-ribbon-post {
  position: absolute; top: 45vh; bottom: 0; width: 2.6vh; margin-left: -1.3vh; border-radius: 1vh 1vh 0 0;
  background: linear-gradient(90deg, #854d0e, #fde047 40%, #fffbe6 50%, #eab308 70%, #854d0e);
  box-shadow: 0 0 3vh rgb(250 204 21 / .4);
}
.cel-ribbon-post::before {
  content: ""; position: absolute; left: 50%; top: -3.5vh; width: 6vh; height: 6vh; margin-left: -3vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #facc15 40%, #854d0e);
  box-shadow: 0 0 3vh rgb(250 204 21 / .6);
}
.cel-ribbon-post.is-left { left: 6vw; }
.cel-ribbon-post.is-right { left: 94vw; }

.cel-ribbon-band {
  position: absolute; top: 46vh; height: 8vh; width: 44vw; overflow: hidden;
  background: linear-gradient(180deg, #7f0d1a, #dc2626 22%, #ff7b7b 40%, #ef4444 52%, #b91c1c 78%, #6b0a15);
  border-block: .7vh solid #fbbf24;
  box-shadow: 0 1.4vh 2.4vh rgb(0 0 0 / .5), 0 0 3vh rgb(220 38 38 / .5);
}
.cel-ribbon-band.is-left { left: 6vw; transform-origin: 0 50%; }
.cel-ribbon-band.is-right { left: 50vw; transform-origin: 100% 50%; }
.cel-ribbon-band i {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .45) 50%, transparent 60%);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: cel-ribbon-sheen 2.6s ease-in-out infinite;
}
.cel-ribbon-band.is-right i { animation-delay: 1.3s; }
@keyframes cel-ribbon-sheen { from { background-position: -100% 0; } to { background-position: 250% 0; } }

.cel-ribbon-bow {
  position: absolute; left: 50vw; top: 50vh; width: 34vh; translate: -50% -42%;
  filter: drop-shadow(0 1.5vh 2vh rgb(0 0 0 / .5)) drop-shadow(0 0 2vh rgb(250 204 21 / .35));
}
.cel-ribbon-bow svg { display: block; width: 100%; height: auto; animation: cel-ribbon-flutter 2s ease-in-out infinite; transform-origin: 50% 40%; }
@keyframes cel-ribbon-flutter { 50% { scale: 1.04 .97; } }

.cel-ribbon-scissors {
  position: absolute; left: calc(50vw - 15vh); top: 2.4vh; width: 30vh; height: 63vh; visibility: hidden; z-index: 2;
  filter: drop-shadow(0 2vh 2vh rgb(0 0 0 / .55)) drop-shadow(0 0 3vh rgb(250 204 21 / .6));
}
.cel-ribbon-scissors svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cel-ribbon-half { transform-origin: 100px 230px; }
.cel-ribbon-scissors.is-hovering { animation: cel-ribbon-hover 1.1s ease-in-out infinite; }
@keyframes cel-ribbon-hover { 50% { translate: 0 -1.2vh; } }

.cel-ribbon-curtain {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 6;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .35) 0, rgb(255 255 255 / .08) 2.6vh, rgb(0 0 0 / .35) 5.2vh),
    linear-gradient(180deg, #991b1b, #5c0a12 70%, #3b0509);
  box-shadow: inset 0 -8vh 8vh rgb(0 0 0 / .5), 0 0 6vh rgb(0 0 0 / .7);
}
.cel-ribbon-curtain::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3vh;
  background: repeating-linear-gradient(90deg, #fbbf24 0 .6vh, #a16207 .6vh 1.2vh);
}
.cel-ribbon-curtain.is-left { left: 0; transform-origin: 0 50%; }
.cel-ribbon-curtain.is-right { right: 0; transform-origin: 100% 50%; }
.cel-ribbon-valance {
  position: absolute; left: 0; right: 0; top: 0; height: 13vh; z-index: 7;
  background:
    linear-gradient(180deg, transparent 72%, #fbbf24 72% 80%, transparent 80%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .3) 0, rgb(255 255 255 / .08) 4vh, rgb(0 0 0 / .3) 8vh),
    linear-gradient(180deg, #7f1d1d, #b91c1c);
  mask: radial-gradient(circle at 50% 100%, transparent 3.4vh, #000 3.5vh) 0 0 / 9vh 100%;
  filter: drop-shadow(0 1vh 1vh rgb(0 0 0 / .5));
}

.cel-ribbon-payoff {
  position: absolute; left: 2vw; right: 31vw; top: 3vh; bottom: 3vh; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 2.4vh; text-align: center;
}
.cel-ribbon-title {
  flex-shrink: 0; font-family: var(--font-brand); font-size: 15vh; line-height: 1; opacity: 0; padding: 0 2vh;
  background: linear-gradient(100deg, #fde047, #fff7c2 30%, #facc15 45%, #fffbe6 55%, #eab308 75%, #fde047);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .8vh 0 #7f0d1a) drop-shadow(0 0 3vh rgb(250 204 21 / .7));
}
.cel-ribbon-title.is-shining { animation: cel-ribbon-shine 2.4s linear infinite; }
@keyframes cel-ribbon-shine { to { background-position: -200% 0; } }
.cel-ribbon-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0;
  margin-top: -1.5vh; font-size: 5.4vh; font-weight: 700; line-height: 1.15; opacity: 0; text-shadow: 0 .4vh 0 #7f0d1a, 0 0 2vh rgb(0 0 0 / .6); }

.cel-ribbon-row { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 5vh; margin-top: 1vh; }

.cel-ribbon-rosette { position: relative; width: 27vh; height: 27vh; flex-shrink: 0; visibility: hidden; }
.cel-ribbon-tail {
  position: absolute; top: 55%; width: 7.5vh; height: 17vh;
  background: linear-gradient(90deg, #7f0d1a, #dc2626 40%, #ef4444 60%, #991b1b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
.cel-ribbon-tail.is-left { left: 26%; rotate: 20deg; transform-origin: 50% 0; }
.cel-ribbon-tail.is-right { right: 26%; rotate: -20deg; transform-origin: 50% 0; }
.cel-ribbon-pleats {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(#dc2626 0 5deg, #7f0d1a 5deg 10deg);
  box-shadow: 0 0 4vh rgb(250 204 21 / .5);
}
.cel-ribbon-rosette.is-spinning .cel-ribbon-pleats { animation: cel-spin 12s linear infinite; }
.cel-ribbon-disc {
  position: absolute; inset: 3.4vh; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #451a03;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #fde047 35%, #eab308 70%, #a16207);
  box-shadow: inset 0 0 0 .6vh #fef3c7, inset 0 0 0 1.1vh #a16207, 0 .8vh 2vh rgb(0 0 0 / .5);
}
.cel-ribbon-na, .cel-ribbon-unit { font-size: 2.4vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.cel-ribbon-days { font-size: 8.5vh; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 .3vh 0 rgb(255 255 255 / .6); }

.cel-ribbon-crew {
  max-width: 40vw; padding: 2.4vh 3.2vh; border-radius: 2vh; text-align: left; visibility: hidden;
  background: linear-gradient(160deg, rgb(74 4 16 / .85), rgb(0 0 0 / .7));
  border: .3vh solid #fbbf24; box-shadow: 0 0 4vh rgb(250 204 21 / .35), 0 2vh 4vh rgb(0 0 0 / .5);
}
.cel-ribbon-lead { display: flex; align-items: center; gap: 2.4vh; opacity: 0; }
.cel-ribbon-lead-avatar { width: 12vh; height: 12vh; font-size: 4.6vh; box-shadow: 0 0 0 .6vh #fbbf24, 0 0 3vh rgb(250 204 21 / .8); }
.cel-ribbon-label { font-size: 2vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #fde68a; }
.cel-ribbon-lead-name { margin-top: .4vh; font-size: 4.6vh; font-weight: 700; line-height: 1.1; }
.cel-ribbon-team-label { margin-top: 2.4vh; opacity: 0; }
.cel-ribbon-team { margin-top: 1.2vh; display: flex; flex-wrap: nowrap; gap: 1.6vh 1.8vh; }
.cel-ribbon-member { display: flex; flex-direction: column; align-items: center; gap: .6vh; opacity: 0; }
.cel-ribbon-member-avatar { width: 7vh; height: 7vh; font-size: 2.6vh; box-shadow: 0 0 0 .35vh #fbbf24; }
.cel-ribbon-member-name { font-size: 2vh; font-weight: 700; }
.cel-ribbon-more { justify-content: center; width: 7vh; height: 7vh; border-radius: 50%; font-size: 2.8vh; font-weight: 700; background: rgb(255 255 255 / .12); }

.cel-ribbon-note {
  position: relative; max-width: 54vw; margin-top: 1vh; padding: 2vh 3.4vh 2vh 6vh; border-radius: 1.2vh; visibility: hidden; text-align: left;
  background: linear-gradient(170deg, #fffaf0, #f6ead3); color: #3b2a16;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 3.2vh; line-height: 1.3;
  box-shadow: 0 0 0 .4vh #fbbf24, 0 2vh 4vh rgb(0 0 0 / .5);
}
.cel-ribbon-note-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cel-ribbon-quote { position: absolute; left: 1.4vh; top: -1vh; font-size: 10vh; line-height: 1; color: #dc2626; }

.cel-ribbon-bottle {
  position: absolute; left: 3vw; bottom: 0; width: 11vh; height: 46vh; rotate: 32deg; transform-origin: 50% 100%; visibility: hidden; z-index: 3;
  filter: drop-shadow(0 2vh 3vh rgb(0 0 0 / .6));
}
.cel-ribbon-glass {
  position: absolute; left: 0; right: 0; top: 18vh; bottom: 0; border-radius: 45% 45% 1.4vh 1.4vh / 22% 22% 1.4vh 1.4vh;
  background: linear-gradient(90deg, #022c22, #166534 30%, #4ade80 42%, #14532d 55%, #022c22);
}
.cel-ribbon-glass::before {
  content: ""; position: absolute; bottom: 99%; left: 50%; width: 4.6vh; height: 13.6vh; margin-left: -2.3vh;
  background: linear-gradient(90deg, #022c22, #166534 30%, #4ade80 42%, #14532d 55%, #022c22);
}
.cel-ribbon-foil {
  position: absolute; bottom: calc(100% + 5.6vh); left: 50%; width: 5.2vh; height: 8vh; margin-left: -2.6vh; border-radius: .6vh;
  background: linear-gradient(90deg, #854d0e, #fde047 40%, #fffbe6 50%, #eab308 70%, #854d0e);
}
.cel-ribbon-label-tag {
  position: absolute; left: 1vh; right: 1vh; top: 8vh; padding: 1.2vh 0; border-radius: .8vh; text-align: center;
  background: linear-gradient(180deg, #fffaf0, #f6ead3); box-shadow: inset 0 0 0 .4vh #eab308;
  font-family: var(--font-brand); font-size: 3.6vh; line-height: 1; color: #7f0d1a;
}
.cel-ribbon-label-tag small { display: block; margin-top: .4vh; font-family: var(--font-display); font-size: 1.4vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #854d0e; }
.cel-ribbon-cork {
  position: absolute; top: 0; left: 50%; width: 4.2vh; height: 5vh; margin-left: -2.1vh; border-radius: 1.6vh 1.6vh .4vh .4vh;
  background: linear-gradient(90deg, #92400e, #fcd34d 45%, #b45309);
}
.cel-ribbon-mouth { position: absolute; top: 4.6vh; left: 50%; width: 1px; height: 1px; }