/* App icon tiles — animated inline SVG versions of the Field Recce and One Sheet
   app icons. Geometry, colours and timing are the reference files' verbatim;
   only the class names are prefixed (.ic-icon / .ic-play) and the keyframes
   (ic-*) to keep clear of page CSS. The host page sets the tile's width. */

.ic-icon{
  display:block;
  aspect-ratio:1;
  border-radius:22.5%;
  background:#050505;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 40px 80px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.8);
  position:relative;overflow:hidden;cursor:pointer;
  isolation:isolate;
}
.ic-icon::after{ /* soft top-left sheen on the tile */
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 45%);
  pointer-events:none;
}
.ic-icon svg{width:100%;height:100%;display:block}
.ic-icon noscript img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}

/* ---------- Field Recce: initial states ---------- */
.ic-icon .ground{stroke-dasharray:240;stroke-dashoffset:240}
.ic-icon .arc{stroke-dasharray:190;stroke-dashoffset:190}
.ic-icon .arc-head{opacity:0}
.ic-icon .tail{stroke-dasharray:4 5;opacity:0}
.ic-icon .tail-reveal{stroke-dasharray:110;stroke-dashoffset:110}
.ic-icon .sphere{transform:scale(0);transform-origin:200px 178px;transform-box:view-box}
.ic-icon .sphere-glow{opacity:0}
.ic-icon .ring{transform:scale(1.9);opacity:0;transform-origin:200px 178px;transform-box:view-box}
.ic-icon .tick{opacity:0}
.ic-icon .tick-n{transform:translateY(-30px)}
.ic-icon .tick-s{transform:translateY(30px)}
.ic-icon .tick-w{transform:translateX(-30px)}
.ic-icon .tick-e{transform:translateX(30px)}
.ic-icon .pulse{transform:scale(1);opacity:0;transform-origin:200px 178px;transform-box:view-box}
.ic-icon .scan{opacity:0;transform-origin:200px 178px;transform-box:view-box}

/* ---------- Field Recce: sequence ---------- */
.ic-play .ground{animation:ic-draw .7s cubic-bezier(.2,.8,.2,1) .15s forwards}
.ic-play .arc{animation:ic-draw 1.05s cubic-bezier(.35,0,.15,1) .45s forwards}
.ic-play .arc-head{animation:ic-head 1.05s cubic-bezier(.35,0,.15,1) .45s forwards;offset-path:path("M92 252 C 130 210, 165 182, 200 178")}
.ic-play .sphere{animation:ic-pop .6s cubic-bezier(.34,1.56,.64,1) 1.25s forwards}
.ic-play .sphere-glow{animation:ic-glow .9s ease-out 1.3s forwards, ic-breathe 3s ease-in-out 2.4s infinite}
.ic-play .ring{animation:ic-lockring .75s cubic-bezier(.2,.9,.2,1) 1.55s forwards}
.ic-play .tick{animation:ic-tick .55s cubic-bezier(.2,.9,.2,1) 1.7s forwards}
.ic-play .pulse{animation:ic-pulse 1.1s cubic-bezier(0,.6,.3,1) 2.15s forwards}
.ic-play .tail{animation:ic-fade .2s linear 2.3s forwards}
.ic-play .tail-reveal{animation:ic-draw .7s cubic-bezier(.2,.8,.2,1) 2.3s forwards}
.ic-play .scan{animation:ic-scan 3.2s linear 2.6s infinite}

@keyframes ic-draw{to{stroke-dashoffset:0}}
@keyframes ic-head{
  0%{opacity:0;offset-distance:0%}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;offset-distance:100%}
}
@keyframes ic-pop{
  0%{transform:scale(0)}
  100%{transform:scale(1)}
}
@keyframes ic-glow{to{opacity:1}}
@keyframes ic-breathe{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes ic-lockring{
  0%{transform:scale(1.9);opacity:0}
  60%{opacity:1}
  82%{transform:scale(.96)}
  100%{transform:scale(1);opacity:1}
}
@keyframes ic-tick{to{opacity:1;transform:translate(0,0)}}
@keyframes ic-pulse{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(2.6);opacity:0}
}
@keyframes ic-fade{to{opacity:1}}
@keyframes ic-scan{
  0%{opacity:0;transform:rotate(0deg)}
  8%{opacity:.35}
  92%{opacity:.35}
  100%{opacity:0;transform:rotate(360deg)}
}

/* ---------- One Sheet: initial states ---------- */
.ic-icon .paper{transform:translateY(-46px);opacity:0;transform-box:view-box;transform-origin:200px 200px}
.ic-icon .paper-shadow{opacity:0}
.ic-icon .rule{stroke-dasharray:190;stroke-dashoffset:190}
.ic-icon .tape{opacity:0;transform:rotate(-24deg) scale(1.35);transform-box:view-box;transform-origin:118px 62px}
.ic-icon .tape-press{opacity:0;transform-box:view-box;transform-origin:118px 62px}
.ic-icon .curl{opacity:0;transform:scale(0);transform-box:view-box;transform-origin:335px 345px}
.ic-icon .curl-shadow{opacity:0}
.ic-icon .ic-call{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-weight:500;font-size:22px;letter-spacing:-.01em;fill:#2a2925;text-transform:none}
.ic-icon .type-clip{width:0}
.ic-icon .cursor{opacity:0}

/* ---------- One Sheet: sequence ---------- */
.ic-play .paper-shadow{animation:ic-fade .5s ease-out .35s forwards}
.ic-play .paper{animation:ic-drop .8s cubic-bezier(.22,1.2,.36,1) .2s forwards}
.ic-play .tape{animation:ic-slap .5s cubic-bezier(.2,1.1,.3,1) 1.0s forwards}
.ic-play .tape-press{animation:ic-press .7s ease-out 1.15s forwards}
.ic-play .rule{animation:ic-draw .6s cubic-bezier(.2,.8,.2,1) forwards}
.ic-play .rule:nth-child(1){animation-delay:1.45s}
.ic-play .rule:nth-child(2){animation-delay:1.55s}
.ic-play .rule:nth-child(3){animation-delay:1.65s}
.ic-play .rule:nth-child(4){animation-delay:1.75s}
.ic-play .rule:nth-child(5){animation-delay:1.85s}
.ic-play .rule:nth-child(6){animation-delay:1.95s}
.ic-play .type-clip{animation:ic-type 1.1s steps(13,end) 2.1s forwards}
.ic-play .cursor{animation:ic-blink .7s steps(2,start) 2.1s 3}
.ic-play .curl{animation:ic-curlin .7s cubic-bezier(.2,.9,.25,1) 3.4s forwards, ic-lift 4s ease-in-out 4.4s infinite}
.ic-play .curl-shadow{animation:ic-fade .5s ease-out 3.55s forwards}

@keyframes ic-drop{
  0%{transform:translateY(-46px);opacity:0}
  30%{opacity:1}
  100%{transform:translateY(0);opacity:1}
}
@keyframes ic-slap{
  0%{opacity:0;transform:rotate(-24deg) scale(1.35)}
  35%{opacity:1}
  100%{opacity:1;transform:rotate(-12deg) scale(1)}
}
@keyframes ic-press{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:0;transform:scale(1.6)}
}
@keyframes ic-curlin{
  0%{opacity:0;transform:scale(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes ic-lift{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes ic-type{to{width:200px}}
@keyframes ic-blink{0%{opacity:1}100%{opacity:0}}

/* ---------- reduced motion: final frame, no motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ic-play *{animation:none!important}
  .ic-icon .ground,.ic-icon .arc,.ic-icon .tail-reveal{stroke-dashoffset:0}
  .ic-icon .sphere,.ic-icon .ring{transform:none;opacity:1}
  .ic-icon .sphere-glow,.ic-icon .tick,.ic-icon .tail{opacity:1;transform:none}
  .ic-icon .paper{transform:none;opacity:1}
  .ic-icon .paper-shadow,.ic-icon .curl-shadow,.ic-icon .curl{opacity:1}
  .ic-icon .curl{transform:none}
  .ic-icon .rule{stroke-dashoffset:0}
  .ic-icon .tape{opacity:1;transform:rotate(-12deg)}
  .ic-icon .type-clip{width:200px}
}