/* Jobolic "sablier": the real pyramid logo assembles itself from points of light.
   Usage: <jobolic-loader height="220" label="Analyse en cours"></jobolic-loader>
   (markup is built by /static/jobolic-loader.js). The 313x467 frame matches
   /static/jobolic-mark.webp; every path below is in that frame's pixels. */
@property --jl-sx { syntax: '<percentage>'; inherits: false; initial-value: 50.5%; }
@property --jl-sy { syntax: '<percentage>'; inherits: false; initial-value: 48%; }

jobolic-loader {
  --jl-scale: .2;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  width: calc(313px * var(--jl-scale));
  height: calc(467px * var(--jl-scale));
  vertical-align: middle;
  line-height: 0;
}
.jl-frame {
  position: absolute; left: 0; top: 0;
  width: 313px; height: 467px;
  transform: scale(var(--jl-scale)); transform-origin: 0 0;
  pointer-events: none;
}
.jl-frame img {
  position: absolute; left: 0; top: 0;
  width: 313px; height: 467px; max-width: none;
  display: block;
}
.jl-frame .jl-dim { opacity: .16; filter: saturate(.7); }
.jl-frame .jl-face-l { clip-path: polygon(50.5% 45%, 3% 94%, 50.8% 100%); animation: jl-face-l 3.2s ease-in-out infinite; }
.jl-frame .jl-face-r { clip-path: polygon(50.5% 45%, 50.8% 100%, 97% 94%); animation: jl-face-r 3.2s ease-in-out infinite; }
.jl-frame .jl-full { clip-path: inset(46% 0 0 0); animation: jl-full 3.2s ease-out infinite; }
.jl-frame .jl-beam { clip-path: inset(0 0 52% 0); transform-origin: 50.5% 48%; animation: jl-beam 3.2s ease-out infinite; }
.jl-frame .jl-flare {
  position: absolute; left: 158px; top: 224px;
  width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,230,.95) 0, rgba(245,221,163,.55) 30%, rgba(224,181,91,0) 70%);
  animation: jl-flare 3.2s ease-out infinite;
}

/* Lit patches of the logo that follow each point of light */
.jl-frame .jl-sp {
  clip-path: inset(44% 0 0 0);
  -webkit-mask-image: radial-gradient(circle 34px at var(--jl-sx) var(--jl-sy), #000 30%, transparent 100%);
  mask-image: radial-gradient(circle 34px at var(--jl-sx) var(--jl-sy), #000 30%, transparent 100%);
  opacity: 0;
}
.jl-frame .jl-dot {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #FFF8E6 0%, #F5DDA3 45%, rgba(224,181,91,0) 75%);
  box-shadow: 0 0 18px 6px rgba(245,221,163,.45);
  offset-rotate: 0deg; offset-anchor: 50% 50%;
  opacity: 0;
}

/* Edge contour: centre -> left -> front -> right -> centre */
.jl-frame .jl-dot.jl-e { width: 18px; height: 18px; box-shadow: 0 0 22px 8px rgba(245,221,163,.5); offset-path: path('M158 224 L31 425 L159 456 L282 425 Z'); animation: jl-travel 3.2s linear infinite; }
.jl-frame .jl-sp.jl-e { animation: jl-spot 3.2s linear infinite; }
@keyframes jl-travel { 0% { offset-distance: 0%; opacity: 0 } 4% { opacity: 1 } 70% { offset-distance: 100%; opacity: 1 } 78%, 100% { offset-distance: 100%; opacity: 0 } }
@keyframes jl-spot { 0% { --jl-sx: 50.5%; --jl-sy: 48%; opacity: 0 } 4% { opacity: 1 } 22.7% { --jl-sx: 9.9%; --jl-sy: 91% } 35.3% { --jl-sx: 50.8%; --jl-sy: 97.6% } 47.4% { --jl-sx: 90.1%; --jl-sy: 91% } 70% { --jl-sx: 50.5%; --jl-sy: 48%; opacity: 1 } 78%, 100% { --jl-sx: 50.5%; --jl-sy: 48%; opacity: 0 } }

/* Inner paths: from the centre of the base towards each vertex, plus a horizontal sweep */
.jl-frame .jl-dot.jl-cl { offset-path: path('M158 400 L31 425'); animation: jl-d-cl 3.2s ease-in-out infinite; }
.jl-frame .jl-sp.jl-cl { animation: jl-s-cl 3.2s ease-in-out infinite; }
@keyframes jl-d-cl { 0%, 6% { offset-distance: 0%; opacity: 0 } 10% { opacity: 1 } 36% { offset-distance: 100%; opacity: 1 } 44%, 100% { offset-distance: 100%; opacity: 0 } }
@keyframes jl-s-cl { 0%, 6% { --jl-sx: 50.5%; --jl-sy: 85.7%; opacity: 0 } 10% { opacity: 1 } 36% { --jl-sx: 9.9%; --jl-sy: 91%; opacity: 1 } 44%, 100% { --jl-sx: 9.9%; --jl-sy: 91%; opacity: 0 } }

.jl-frame .jl-dot.jl-cr { offset-path: path('M158 400 L282 425'); animation: jl-d-cr 3.2s ease-in-out infinite; }
.jl-frame .jl-sp.jl-cr { animation: jl-s-cr 3.2s ease-in-out infinite; }
@keyframes jl-d-cr { 0%, 14% { offset-distance: 0%; opacity: 0 } 18% { opacity: 1 } 44% { offset-distance: 100%; opacity: 1 } 52%, 100% { offset-distance: 100%; opacity: 0 } }
@keyframes jl-s-cr { 0%, 14% { --jl-sx: 50.5%; --jl-sy: 85.7%; opacity: 0 } 18% { opacity: 1 } 44% { --jl-sx: 90.1%; --jl-sy: 91%; opacity: 1 } 52%, 100% { --jl-sx: 90.1%; --jl-sy: 91%; opacity: 0 } }

.jl-frame .jl-dot.jl-cf { offset-path: path('M158 400 L159 456'); animation: jl-d-cf 3.2s ease-in-out infinite; }
.jl-frame .jl-sp.jl-cf { animation: jl-s-cf 3.2s ease-in-out infinite; }
@keyframes jl-d-cf { 0%, 30% { offset-distance: 0%; opacity: 0 } 34% { opacity: 1 } 54% { offset-distance: 100%; opacity: 1 } 60%, 100% { offset-distance: 100%; opacity: 0 } }
@keyframes jl-s-cf { 0%, 30% { --jl-sx: 50.5%; --jl-sy: 85.7%; opacity: 0 } 34% { opacity: 1 } 54% { --jl-sx: 50.8%; --jl-sy: 97.6%; opacity: 1 } 60%, 100% { --jl-sx: 50.8%; --jl-sy: 97.6%; opacity: 0 } }

.jl-frame .jl-dot.jl-ca { offset-path: path('M158 400 L158 224'); animation: jl-d-ca 3.2s ease-in-out infinite; }
.jl-frame .jl-sp.jl-ca { animation: jl-s-ca 3.2s ease-in-out infinite; }
@keyframes jl-d-ca { 0%, 24% { offset-distance: 0%; opacity: 0 } 28% { opacity: 1 } 62% { offset-distance: 100%; opacity: 1 } 68%, 100% { offset-distance: 100%; opacity: 0 } }
@keyframes jl-s-ca { 0%, 24% { --jl-sx: 50.5%; --jl-sy: 85.7%; opacity: 0 } 28% { opacity: 1 } 62% { --jl-sx: 50.5%; --jl-sy: 48%; opacity: 1 } 68%, 100% { --jl-sx: 50.5%; --jl-sy: 48%; opacity: 0 } }

.jl-frame .jl-dot.jl-h { offset-path: path('M88 400 L222 400'); animation: jl-d-h 3.2s ease-in-out infinite; }
.jl-frame .jl-sp.jl-h { animation: jl-s-h 3.2s ease-in-out infinite; }
@keyframes jl-d-h { 0%, 40% { offset-distance: 0%; opacity: 0 } 44% { opacity: 1 } 66% { offset-distance: 100%; opacity: 1 } 74%, 100% { offset-distance: 100%; opacity: 0 } }
@keyframes jl-s-h { 0%, 40% { --jl-sx: 28.1%; --jl-sy: 85.7%; opacity: 0 } 44% { opacity: 1 } 66% { --jl-sx: 70.9%; --jl-sy: 85.7%; opacity: 1 } 74%, 100% { --jl-sx: 70.9%; --jl-sy: 85.7%; opacity: 0 } }

/* Faces light up, then the whole pyramid and its beam: the fit is found */
@keyframes jl-face-l { 0%, 24% { opacity: 0 } 40%, 70% { opacity: .7 } 82% { opacity: 1 } 100% { opacity: 0 } }
@keyframes jl-face-r { 0%, 40% { opacity: 0 } 56%, 70% { opacity: .7 } 82% { opacity: 1 } 100% { opacity: 0 } }
@keyframes jl-full { 0%, 72% { opacity: 0 } 82% { opacity: 1 } 92% { opacity: .9 } 100% { opacity: 0 } }
@keyframes jl-beam { 0%, 72% { opacity: 0; transform: scaleY(0) } 84% { opacity: 1; transform: scaleY(1) } 100% { opacity: 0; transform: scaleY(1) } }
@keyframes jl-flare { 0%, 72% { opacity: 0; transform: scale(.3) } 82% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1.4) } }
@keyframes jl-breathe { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }

/* One pass that starts and ends on the full logo: the header mark replay (img[data-jl-animate]) */
jobolic-loader[settle] .jl-frame > * { animation-iteration-count: 1; animation-fill-mode: both; }
jobolic-loader[settle] .jl-frame .jl-full { animation-name: jl-full-settle; }
jobolic-loader[settle] .jl-frame .jl-beam { animation-name: jl-beam-settle; }
@keyframes jl-full-settle { 0% { opacity: 1 } 10%, 72% { opacity: 0 } 84%, 100% { opacity: 1 } }
@keyframes jl-beam-settle { 0% { opacity: 1; transform: scaleY(1) } 10% { opacity: 0; transform: scaleY(1) } 72% { opacity: 0; transform: scaleY(0) } 84%, 100% { opacity: 1; transform: scaleY(1) } }
.jl-mark { position: relative; display: block; flex-shrink: 0; line-height: 0; }
.jl-mark > jobolic-loader { position: absolute; left: 0; top: 0; }
.jl-mark.is-playing > img { opacity: 0; }
.jl-mark:not(.is-playing) > jobolic-loader * { animation-play-state: paused; }
/* At header size the points of light are drawn 1.5x larger, so they still read as points */
.jl-mark .jl-frame .jl-dot { width: 22px; height: 22px; box-shadow: 0 0 26px 9px rgba(245,221,163,.5); }
.jl-mark .jl-frame .jl-dot.jl-e { width: 26px; height: 26px; box-shadow: 0 0 30px 11px rgba(245,221,163,.55); }

@media (prefers-reduced-motion: reduce) {
  .jl-frame .jl-sp, .jl-frame .jl-dot { display: none; }
  .jl-frame .jl-face-l, .jl-frame .jl-face-r, .jl-frame .jl-beam, .jl-frame .jl-flare { animation: none; opacity: 0; }
  .jl-frame .jl-full { clip-path: none; animation: jl-breathe 3.2s ease-in-out infinite; }
}