/* Icon callout loop: small square marks on a picture that, one after another, open into callout boxes.
   Each box grows out of its top-right corner (where the mark sits), holds, fades away, and the mark
   swaps its fill + pings a ring before each open and close. Pure CSS, one 5 s clock per box.

   Markup (any number of .icl inside a positioned stage, e.g. a picture):
   <div class="icl" style="left:22%; bottom:54%; width:29%; --icl-delay:0s">
     <div class="icl__bg"></div>
     <div class="icl__body">...the callout...</div>
     <div class="icl__mark">
       <span class="icl__icon">...7px glyph (svg)...</span>
       <span class="icl__cover"></span>
       <span class="icl__ring"></span>
     </div>
   </div>

   Measured from the source (5 s cycle, % of the cycle):
   ring ping   6-8% in (scale .92 -> 1), 8-13% out to 1.35 (cubic-bezier(.22,1,.36,1)); again 57-58% / 58-63%
   box         12% appears at scale .001, grows to 1 by 32% on cubic-bezier(.16,1,.3,1), holds to 62%,
               fades 62-70% at full size (cubic-bezier(.4,0,1,1)), then snaps shut; closed 70-100%
   mark fill   (.icl__cover) fades out 12-17% (ease-in), back in 62-70% (ease-out)
   mark icon   12-17% .75 -> 1.08 (expo out), 17-21% settles to 1; 62-70% back to .75 and gone
   boxes       delays 0 / .8 / .4 s
   The eases live inside the keyframes as literals: browsers ignore var() for a keyframe's
   animation-timing-function (it silently falls back to linear), so they are not knobs. */

.icl {
  --icl-cycle: 5s;
  --icl-delay: 0s;
  --icl-fill: #fa3600;          /* box + mark colour */
  --icl-blend: multiply;        /* how the box fill sits on the picture (normal for a flat fill) */
  --icl-ink: #fff;              /* text on the box */
  --icl-mark: 16px;             /* mark size */
  --icl-inset: 8px;             /* mark distance from the box's top-right corner */
  --icl-origin: top right;      /* where the box grows from */
  --icl-ring-scale: 1.35;       /* how far the ping ring spreads */
  --icl-border: 1px;
  position: absolute;
  pointer-events: none;
}

.icl__bg,
.icl__body {
  transform-origin: var(--icl-origin);
  opacity: 0;
  transform: scale(0.001);
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: icl-box var(--icl-cycle) linear var(--icl-delay) infinite both;
}
.icl__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--icl-fill);
  mix-blend-mode: var(--icl-blend);
}
.icl__body {
  position: relative;
  z-index: 3;
  color: var(--icl-ink);
  /* leave room for the mark in the top-right corner */
  padding: calc(var(--icl-inset) + var(--icl-mark) + 6px) 14px 14px;
}

.icl__mark {
  position: absolute;
  z-index: 5;
  top: var(--icl-inset);
  right: var(--icl-inset);
  width: var(--icl-mark);
  height: var(--icl-mark);
}
.icl__icon,
.icl__cover,
.icl__ring {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.icl__icon {
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--icl-fill);
  opacity: 0;
  transform: scale(0.75);
  will-change: transform, opacity;
  animation: icl-icon var(--icl-cycle) linear var(--icl-delay) infinite both;
}
.icl__icon svg { width: 44%; height: auto; display: block; }
.icl__cover {
  background: var(--icl-fill);
  will-change: opacity;
  animation: icl-cover var(--icl-cycle) linear var(--icl-delay) infinite both;
}
.icl__ring {
  border: var(--icl-border) solid var(--icl-fill);
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
  animation: icl-ring var(--icl-cycle) linear var(--icl-delay) infinite both;
}

@keyframes icl-box {
  0%, 11% { opacity: 0; transform: scale(0.001); }
  12% { opacity: 1; transform: scale(0.001); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  32% { opacity: 1; transform: scale(1); }
  62% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  70% { opacity: 0; transform: scale(1); }
  70.01%, 100% { opacity: 0; transform: scale(0.001); }
}

@keyframes icl-cover {
  0%, 12% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  17%, 62% { opacity: 0; }
  62.01% { opacity: 0; animation-timing-function: ease-out; }
  70%, 100% { opacity: 1; }
}

@keyframes icl-icon {
  0% { opacity: 0; transform: scale(0.75); }
  12% { opacity: 0; transform: scale(0.75); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  17% { opacity: 1; transform: scale(1.08); }
  21% { opacity: 1; transform: scale(1); }
  62.01% { opacity: 1; transform: scale(1); animation-timing-function: ease-out; }
  70%, 100% { opacity: 0; transform: scale(0.75); }
}

@keyframes icl-ring {
  0%, 6% { opacity: 0; transform: scale(0.92); }
  8% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  13% { opacity: 0; transform: scale(var(--icl-ring-scale)); }
  13.01%, 56% { opacity: 0; transform: scale(1); }
  57% { opacity: 0; transform: scale(0.92); }
  58% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  63% { opacity: 0; transform: scale(var(--icl-ring-scale)); }
  63.01%, 100% { opacity: 0; transform: scale(1); }
}

/* Reduced motion: every callout simply sits open, mark in its open state. */
@media (prefers-reduced-motion: reduce) {
  .icl__bg, .icl__body, .icl__icon, .icl__cover, .icl__ring { animation: none; }
  .icl__bg, .icl__body, .icl__icon { opacity: 1; transform: none; }
  .icl__cover, .icl__ring { opacity: 0; }
}