/* ============================================================
   Crwdly Icon System — single source of truth
   Visual spec: /c-prompts/crwdly_icon_states.html
   Build spec: /c-prompts/crwdly_icon_system_build.md
   ============================================================ */

/* ============ COLOUR TOKENS ============ */
:root{
  --ic-rest:#64646E;            /* neutral resting colour in nav */
  --ic-blue:#0057FF;
  --ic-green:#1E8F5A;
  --ic-amber:#E08A00;
  --ic-coral:#FF6B35;
  --ic-pink:#FF3D6B;
  --ic-purple:#7C5CFC;
  --ic-red:#E5484D;
  --ic-slate:#52525B;
  --ic-cover-o:0.10;            /* tint strength on hover */
  --ic-cover-active-o:0.14;     /* tint strength when item is the active page */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-io:cubic-bezier(0.77,0,0.175,1);
  --ease-spring:cubic-bezier(0.34,1.5,0.6,1);
}
[data-theme="dark"]{
  --ic-rest:#8A8A99;
  --ic-blue:#4D8AFF;
  --ic-green:#4CAF7D;
  --ic-amber:#F2B23D;
  --ic-coral:#FF8C5A;
  --ic-pink:#FF5C85;
  --ic-purple:#9D85FF;
  --ic-red:#FF6166;
  --ic-slate:#8A8A99;
  --ic-cover-o:0.15;
  --ic-cover-active-o:0.18;
}

/* ============ PER-ICON COLOUR (set --c, everything reads it) ============ */
.ic--blue{--c:var(--ic-blue)}
.ic--green{--c:var(--ic-green)}
.ic--amber{--c:var(--ic-amber)}
.ic--coral{--c:var(--ic-coral)}
.ic--pink{--c:var(--ic-pink)}
.ic--purple{--c:var(--ic-purple)}
.ic--red{--c:var(--ic-red)}
.ic--slate{--c:var(--ic-slate)}

/* ============ ICON BASE ============ */
.ic{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;             /* default chip footprint; override per surface as needed */
  color:var(--ic-rest);
  transition:color 160ms ease;
}
.ic svg{display:block;overflow:visible;position:relative;z-index:1;}
.fb{transform-box:fill-box;}
/* soft tinted "cover" inside the chip */
.ic::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:11px;
  background:var(--c);
  opacity:0;
  transition:opacity 160ms ease;
  z-index:0;
}

/* ============ BASE STATES: decorative parts hidden at rest ============ */
.va,.pin-ping,.br-ring{opacity:0}
/* dash-array values — drawn lines stay visible at rest; hover replays the draw */
.match-line{stroke-dasharray:14;--d:14}
.agenda-check{stroke-dasharray:16;--d:16}
.brand-stroke{stroke-dasharray:22;--d:22}
.rev-line{stroke-dasharray:26;--d:26}
.act-line{stroke-dasharray:30;--d:30}
.shield-check{stroke-dasharray:12;--d:12}
.prof-ring{stroke-dasharray:60;--d:60}
/* gauge needle at rest position */
.gauge-needle{transform-box:view-box;transform-origin:12px 17px;transform:rotate(-40deg)}
/* hourglass parts */
.sand-top,.sand-bot{transform-box:fill-box;transform-origin:center bottom}
.sand-bot{transform:scaleY(0)}
.glass-g{transform-box:fill-box;transform-origin:center}
/* gear */
.gear-ring{transform-box:fill-box;transform-origin:center}

/* ============ KEYFRAMES ============ */
@keyframes vaR{0%{opacity:0;transform:translateX(-2px)}40%{opacity:1}100%{opacity:0;transform:translateX(3px)}}
@keyframes vaL{0%{opacity:0;transform:translateX(2px)}40%{opacity:1}100%{opacity:0;transform:translateX(-3px)}}
@keyframes chatDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes pinPing{0%{opacity:.7;transform:scale(.2)}100%{opacity:0;transform:scale(1.4)}}
@keyframes pinDot{0%,100%{r:3}50%{r:3.6}}
@keyframes bellRing{0%,100%{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
@keyframes drawLine{from{stroke-dashoffset:var(--d)}to{stroke-dashoffset:0}}
@keyframes matchPulse{0%,100%{r:3}50%{r:4.5}}
@keyframes capFill{0%{transform:scaleX(.28)}100%{transform:scaleX(.82)}}
@keyframes phFan{0%{transform:rotate(0) translateX(0)}100%{transform:rotate(-14deg) translateX(-2px)}}
@keyframes phFan3{0%{transform:rotate(0) translateX(0)}100%{transform:rotate(14deg) translateX(2px)}}
@keyframes rowIn{0%{opacity:0;transform:translateX(-7px)}100%{opacity:1;transform:translateX(0)}}
@keyframes rowShift{0%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes barGrow{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
@keyframes pollUp{0%{transform:scaleX(.5)}100%{transform:scaleX(1)}}
@keyframes pollDown{0%{transform:scaleX(1)}100%{transform:scaleX(.6)}}
@keyframes lockShut{0%{transform:translateY(-2.5px)}60%{transform:translateY(.5px)}100%{transform:translateY(0)}}
@keyframes holePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes knobOn{0%{transform:translateX(0)}100%{transform:translateX(7px)}}
@keyframes brushMove{0%{transform:translate(-3px,3px)}100%{transform:translate(0,0)}}
@keyframes tileIn{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
@keyframes calDrop{0%{opacity:0;transform:translateY(-6px)}55%{opacity:1}75%{transform:translateY(1.5px)}100%{transform:translateY(0)}}
@keyframes orgIn{0%{opacity:0;transform:translateX(4px) scale(.8)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes drawHead{0%{opacity:0}100%{opacity:1}}
@keyframes needleSweep{0%{transform:rotate(-40deg)}100%{transform:rotate(52deg)}}
@keyframes docLine{0%{opacity:0;transform:scaleX(.2)}100%{opacity:1;transform:scaleX(1)}}
@keyframes gearTurn{to{transform:rotate(45deg)}}
@keyframes drainTop{0%{transform:scaleY(1)}45%{transform:scaleY(0)}100%{transform:scaleY(0)}}
@keyframes fillBot{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes tipSide{0%,50%{transform:rotate(0)}100%{transform:rotate(95deg)}}

/* ============ APP PROFILE — fire once, hover or tap-replay ============ */
/* On hover-capable devices, hover fires; .is-activating is a JS-toggled
   tap-replay class that works on every device.                          */
@media (hover:hover) and (pointer:fine){
  .ic-app:hover .va-r1,.ic-app.is-activating .va-r1{animation:vaR 220ms var(--ease-out)}
  .ic-app:hover .va-r2,.ic-app.is-activating .va-r2{animation:vaR 220ms var(--ease-out) 40ms}
  .ic-app:hover .va-r3,.ic-app.is-activating .va-r3{animation:vaR 220ms var(--ease-out) 80ms}
  .ic-app:hover .va-l1,.ic-app.is-activating .va-l1{animation:vaL 220ms var(--ease-out)}
  .ic-app:hover .va-l2,.ic-app.is-activating .va-l2{animation:vaL 220ms var(--ease-out) 40ms}
  .ic-app:hover .va-l3,.ic-app.is-activating .va-l3{animation:vaL 220ms var(--ease-out) 80ms}
  .ic-app:hover .dot1,.ic-app.is-activating .dot1{animation:chatDot 240ms var(--ease-out)}
  .ic-app:hover .dot2,.ic-app.is-activating .dot2{animation:chatDot 240ms var(--ease-out) 50ms}
  .ic-app:hover .dot3,.ic-app.is-activating .dot3{animation:chatDot 240ms var(--ease-out) 100ms}
  .ic-app:hover .pin-p1,.ic-app.is-activating .pin-p1{animation:pinPing 360ms var(--ease-out)}
  .ic-app:hover .pin-dot,.ic-app.is-activating .pin-dot{animation:pinDot 360ms var(--ease-out)}
  .ic-app:hover .a-bell,.ic-app.is-activating .a-bell{animation:bellRing 350ms var(--ease-out)}
  .ic-app:hover .match-line,.ic-app.is-activating .match-line{animation:drawLine 220ms var(--ease-out)}
  .ic-app:hover .matchL,.ic-app.is-activating .matchL{animation:matchPulse 220ms var(--ease-out)}
  .ic-app:hover .matchR,.ic-app.is-activating .matchR{animation:matchPulse 220ms var(--ease-out) 90ms}
  .ic-app:hover .cap-fill,.ic-app.is-activating .cap-fill{animation:capFill 240ms var(--ease-out)}
  .ic-app:hover .ph1,.ic-app.is-activating .ph1{animation:phFan 220ms var(--ease-spring)}
  .ic-app:hover .ph3,.ic-app.is-activating .ph3{animation:phFan3 220ms var(--ease-spring) 50ms}
  .ic-app:hover .agenda-check,.ic-app.is-activating .agenda-check{animation:drawLine 240ms var(--ease-out)}
  .ic-app:hover .srow1,.ic-app.is-activating .srow1{animation:rowIn 240ms var(--ease-spring)}
  .ic-app:hover .srow2,.ic-app.is-activating .srow2{animation:rowShift 240ms var(--ease-out) 30ms}
  .ic-app:hover .srow3,.ic-app.is-activating .srow3{animation:rowShift 240ms var(--ease-out) 60ms}
  .ic-app:hover .br1,.ic-app.is-activating .br1{animation:pinPing 360ms var(--ease-out)}
  .ic-app:hover .bar1,.ic-app.is-activating .bar1{animation:barGrow 220ms var(--ease-out)}
  .ic-app:hover .bar2,.ic-app.is-activating .bar2{animation:barGrow 220ms var(--ease-out) 50ms}
  .ic-app:hover .bar3,.ic-app.is-activating .bar3{animation:barGrow 220ms var(--ease-out) 100ms}
  .ic-app:hover .pollA,.ic-app.is-activating .pollA{animation:pollUp 220ms var(--ease-out)}
  .ic-app:hover .pollB,.ic-app.is-activating .pollB{animation:pollDown 220ms var(--ease-out)}
  .ic-app:hover .lock-shackle,.ic-app.is-activating .lock-shackle{animation:lockShut 240ms var(--ease-spring)}
  .ic-app:hover .lock-hole,.ic-app.is-activating .lock-hole{animation:holePulse 240ms var(--ease-out) 80ms}
  .ic-app:hover .toggle-knob,.ic-app.is-activating .toggle-knob{animation:knobOn 220ms var(--ease-spring)}
  .ic-app:hover .brand-stroke,.ic-app.is-activating .brand-stroke{animation:drawLine 260ms var(--ease-out)}
  .ic-app:hover .brand-brush,.ic-app.is-activating .brand-brush{animation:brushMove 260ms var(--ease-out)}
  .ic-app:hover .dt1,.ic-app.is-activating .dt1{animation:tileIn 200ms var(--ease-out)}
  .ic-app:hover .dt2,.ic-app.is-activating .dt2{animation:tileIn 200ms var(--ease-out) 40ms}
  .ic-app:hover .dt3,.ic-app.is-activating .dt3{animation:tileIn 200ms var(--ease-out) 80ms}
  .ic-app:hover .dt4,.ic-app.is-activating .dt4{animation:tileIn 200ms var(--ease-out) 120ms}
  .ic-app:hover .cal-dot,.ic-app.is-activating .cal-dot{animation:calDrop 300ms var(--ease-spring)}
  .ic-app:hover .org-back,.ic-app.is-activating .org-back{animation:orgIn 240ms var(--ease-spring)}
  .ic-app:hover .rev-line,.ic-app.is-activating .rev-line{animation:drawLine 280ms var(--ease-out)}
  .ic-app:hover .rev-head,.ic-app.is-activating .rev-head{animation:drawHead 120ms ease 240ms}
  .ic-app:hover .act-line,.ic-app.is-activating .act-line{animation:drawLine 300ms var(--ease-out)}
  .ic-app:hover .shield-check,.ic-app.is-activating .shield-check{animation:drawLine 200ms var(--ease-out) 80ms}
  .ic-app:hover .gauge-needle,.ic-app.is-activating .gauge-needle{animation:needleSweep 400ms var(--ease-out) forwards}
  .ic-app:hover .dl1,.ic-app.is-activating .dl1{animation:docLine 180ms var(--ease-out)}
  .ic-app:hover .dl2,.ic-app.is-activating .dl2{animation:docLine 180ms var(--ease-out) 70ms}
  .ic-app:hover .dl3,.ic-app.is-activating .dl3{animation:docLine 180ms var(--ease-out) 140ms}
  .ic-app:hover .gear-ring,.ic-app.is-activating .gear-ring{animation:gearTurn 340ms var(--ease-out) forwards}
  .ic-app:hover .prof-ring,.ic-app.is-activating .prof-ring{animation:drawLine 320ms var(--ease-out)}
  .ic-app:hover .sand-top,.ic-app.is-activating .sand-top{animation:drainTop 720ms ease forwards}
  .ic-app:hover .sand-bot,.ic-app.is-activating .sand-bot{animation:fillBot 720ms ease forwards}
  .ic-app:hover .glass-g,.ic-app.is-activating .glass-g{animation:tipSide 720ms var(--ease-io) forwards}
}
/* Touch-only devices: only the tap-replay class fires animations. */
@media not all and (hover:hover){
  .ic-app.is-activating .va-r1{animation:vaR 220ms var(--ease-out)}
  .ic-app.is-activating .va-r2{animation:vaR 220ms var(--ease-out) 40ms}
  .ic-app.is-activating .va-r3{animation:vaR 220ms var(--ease-out) 80ms}
  .ic-app.is-activating .va-l1{animation:vaL 220ms var(--ease-out)}
  .ic-app.is-activating .va-l2{animation:vaL 220ms var(--ease-out) 40ms}
  .ic-app.is-activating .va-l3{animation:vaL 220ms var(--ease-out) 80ms}
  .ic-app.is-activating .dot1{animation:chatDot 240ms var(--ease-out)}
  .ic-app.is-activating .dot2{animation:chatDot 240ms var(--ease-out) 50ms}
  .ic-app.is-activating .dot3{animation:chatDot 240ms var(--ease-out) 100ms}
  .ic-app.is-activating .pin-p1{animation:pinPing 360ms var(--ease-out)}
  .ic-app.is-activating .pin-dot{animation:pinDot 360ms var(--ease-out)}
  .ic-app.is-activating .a-bell{animation:bellRing 350ms var(--ease-out)}
  .ic-app.is-activating .match-line{animation:drawLine 220ms var(--ease-out)}
  .ic-app.is-activating .matchL{animation:matchPulse 220ms var(--ease-out)}
  .ic-app.is-activating .matchR{animation:matchPulse 220ms var(--ease-out) 90ms}
  .ic-app.is-activating .cap-fill{animation:capFill 240ms var(--ease-out)}
  .ic-app.is-activating .ph1{animation:phFan 220ms var(--ease-spring)}
  .ic-app.is-activating .ph3{animation:phFan3 220ms var(--ease-spring) 50ms}
  .ic-app.is-activating .agenda-check{animation:drawLine 240ms var(--ease-out)}
  .ic-app.is-activating .srow1{animation:rowIn 240ms var(--ease-spring)}
  .ic-app.is-activating .srow2{animation:rowShift 240ms var(--ease-out) 30ms}
  .ic-app.is-activating .srow3{animation:rowShift 240ms var(--ease-out) 60ms}
  .ic-app.is-activating .br1{animation:pinPing 360ms var(--ease-out)}
  .ic-app.is-activating .bar1{animation:barGrow 220ms var(--ease-out)}
  .ic-app.is-activating .bar2{animation:barGrow 220ms var(--ease-out) 50ms}
  .ic-app.is-activating .bar3{animation:barGrow 220ms var(--ease-out) 100ms}
  .ic-app.is-activating .pollA{animation:pollUp 220ms var(--ease-out)}
  .ic-app.is-activating .pollB{animation:pollDown 220ms var(--ease-out)}
  .ic-app.is-activating .lock-shackle{animation:lockShut 240ms var(--ease-spring)}
  .ic-app.is-activating .lock-hole{animation:holePulse 240ms var(--ease-out) 80ms}
  .ic-app.is-activating .toggle-knob{animation:knobOn 220ms var(--ease-spring)}
  .ic-app.is-activating .brand-stroke{animation:drawLine 260ms var(--ease-out)}
  .ic-app.is-activating .brand-brush{animation:brushMove 260ms var(--ease-out)}
  .ic-app.is-activating .dt1{animation:tileIn 200ms var(--ease-out)}
  .ic-app.is-activating .dt2{animation:tileIn 200ms var(--ease-out) 40ms}
  .ic-app.is-activating .dt3{animation:tileIn 200ms var(--ease-out) 80ms}
  .ic-app.is-activating .dt4{animation:tileIn 200ms var(--ease-out) 120ms}
  .ic-app.is-activating .cal-dot{animation:calDrop 300ms var(--ease-spring)}
  .ic-app.is-activating .org-back{animation:orgIn 240ms var(--ease-spring)}
  .ic-app.is-activating .rev-line{animation:drawLine 280ms var(--ease-out)}
  .ic-app.is-activating .rev-head{animation:drawHead 120ms ease 240ms}
  .ic-app.is-activating .act-line{animation:drawLine 300ms var(--ease-out)}
  .ic-app.is-activating .shield-check{animation:drawLine 200ms var(--ease-out) 80ms}
  .ic-app.is-activating .gauge-needle{animation:needleSweep 400ms var(--ease-out) forwards}
  .ic-app.is-activating .dl1{animation:docLine 180ms var(--ease-out)}
  .ic-app.is-activating .dl2{animation:docLine 180ms var(--ease-out) 70ms}
  .ic-app.is-activating .dl3{animation:docLine 180ms var(--ease-out) 140ms}
  .ic-app.is-activating .gear-ring{animation:gearTurn 340ms var(--ease-out) forwards}
  .ic-app.is-activating .prof-ring{animation:drawLine 320ms var(--ease-out)}
  .ic-app.is-activating .sand-top{animation:drainTop 720ms ease forwards}
  .ic-app.is-activating .sand-bot{animation:fillBot 720ms ease forwards}
  .ic-app.is-activating .glass-g{animation:tipSide 720ms var(--ease-io) forwards}
}

/* ============ COVER + COLOUR BLOOM (app/nav) ============ */
@media (hover:hover) and (pointer:fine){
  .nav-item:hover .ic{color:var(--c)}
  .nav-item:hover .ic::before{opacity:var(--ic-cover-o)}
}
.nav-item.active .ic{color:var(--c)}
.nav-item.active .ic::before{opacity:var(--ic-cover-active-o)}

/* ============ MARKETING PROFILE — homepage feature cards ============
   Icon rests in colour with a tinted box. Ongoing-state icons loop on
   hover; the rest fire once but with richer timings. */
.ic-mkt{color:var(--c)}
.feat-card .ic-box{background:color-mix(in srgb, var(--c) 9%, transparent);border-radius:13px}
[data-theme="dark"] .feat-card .ic-box{background:color-mix(in srgb, var(--c) 16%, transparent)}
@media (hover:hover) and (pointer:fine){
  /* looping — ongoing state */
  .feat-card:hover .va-r1{animation:vaR 1.3s ease infinite}
  .feat-card:hover .va-r2{animation:vaR 1.3s ease .22s infinite}
  .feat-card:hover .va-r3{animation:vaR 1.3s ease .44s infinite}
  .feat-card:hover .va-l1{animation:vaL 1.3s ease infinite}
  .feat-card:hover .va-l2{animation:vaL 1.3s ease .22s infinite}
  .feat-card:hover .va-l3{animation:vaL 1.3s ease .44s infinite}
  .feat-card:hover .dot1{animation:chatDot .6s ease infinite}
  .feat-card:hover .dot2{animation:chatDot .6s ease .15s infinite}
  .feat-card:hover .dot3{animation:chatDot .6s ease .3s infinite}
  .feat-card:hover .pin-p1{animation:pinPing 1.5s ease infinite}
  .feat-card:hover .pin-dot{animation:pinDot 1.5s ease infinite}
  .feat-card:hover .br1{animation:pinPing 1.2s ease infinite}

  /* fire-once (richer + springier than app) — sensible defaults until
     /design-reference/crwdly_icons_final.html is provided. */
  .feat-card:hover .a-bell{animation:bellRing 520ms var(--ease-spring)}
  .feat-card:hover .match-line{animation:drawLine 360ms var(--ease-out)}
  .feat-card:hover .matchL{animation:matchPulse 360ms var(--ease-out)}
  .feat-card:hover .matchR{animation:matchPulse 360ms var(--ease-out) 130ms}
  .feat-card:hover .cap-fill{animation:capFill 380ms var(--ease-out)}
  .feat-card:hover .ph1{animation:phFan 360ms var(--ease-spring)}
  .feat-card:hover .ph3{animation:phFan3 360ms var(--ease-spring) 80ms}
  .feat-card:hover .agenda-check{animation:drawLine 360ms var(--ease-out)}
  .feat-card:hover .srow1{animation:rowIn 380ms var(--ease-spring)}
  .feat-card:hover .srow2{animation:rowShift 380ms var(--ease-out) 50ms}
  .feat-card:hover .srow3{animation:rowShift 380ms var(--ease-out) 100ms}
  .feat-card:hover .bar1{animation:barGrow 360ms var(--ease-spring)}
  .feat-card:hover .bar2{animation:barGrow 360ms var(--ease-spring) 80ms}
  .feat-card:hover .bar3{animation:barGrow 360ms var(--ease-spring) 160ms}
  .feat-card:hover .pollA{animation:pollUp 360ms var(--ease-spring)}
  .feat-card:hover .pollB{animation:pollDown 360ms var(--ease-spring)}
  .feat-card:hover .lock-shackle{animation:lockShut 380ms var(--ease-spring)}
  .feat-card:hover .lock-hole{animation:holePulse 380ms var(--ease-out) 130ms}
  .feat-card:hover .toggle-knob{animation:knobOn 360ms var(--ease-spring)}
  .feat-card:hover .brand-stroke{animation:drawLine 420ms var(--ease-out)}
  .feat-card:hover .brand-brush{animation:brushMove 420ms var(--ease-out)}
  .feat-card:hover .sand-top{animation:drainTop 1000ms ease forwards}
  .feat-card:hover .sand-bot{animation:fillBot 1000ms ease forwards}
  .feat-card:hover .glass-g{animation:tipSide 1000ms var(--ease-io) forwards}
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce){
  .ic *{animation:none !important}
  /* keep the colour bloom + cover — they aid comprehension, no movement */
}