/* ============================================================================
   Siphrix — line-icon system
   Hand-drawn 24px line icons (consistent 1.6 stroke, round joins) used as a
   coherent set across the site, replacing emoji. Premium tile treatments +
   restrained motion (stroke-draw on reveal, idle float/glow) — designed to
   read as a crafted product, not clip-art.
   ============================================================================ */

/* Base icon: inherits color, scalable, crisp line art. */
.ico {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ico.xs { width: .82em; height: .82em; vertical-align: -0.08em; }
.ico.sm { width: .9em; height: .9em; }

/* ---- Premium icon tiles -------------------------------------------------- */
/* Shared tile: a soft rounded square with a teal-tinted face, a hairline
   gradient ring, and a focused inner glow behind the glyph. */
.sc-emoji, .step-ic, .reason-ic, .fleet-ic {
  position: relative;
  display: grid; place-items: center;
  color: var(--teal);
  background:
    radial-gradient(70% 70% at 50% 30%, rgba(43,212,189,.16), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(43,212,189,.22);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 12px 30px -16px rgba(0,0,0,.7);
  isolation: isolate;
}
/* Animated conic ring that slowly sweeps behind the tile. */
.sc-emoji::before, .step-ic::before, .reason-ic::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(43,212,189,.55) 60deg, transparent 140deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .0; transition: opacity .4s ease;
  animation: ico-ring 6s linear infinite;
}
.scenario:hover .sc-emoji::before,
.step:hover .step-ic::before,
.reason:hover .reason-ic::before { opacity: 1; }

.sc-emoji   { width: 58px; height: 58px; margin-bottom: 1rem; font-size: 0; }
.sc-emoji   .ico { width: 28px; height: 28px; }
.step-ic    { width: 64px; height: 64px; margin-bottom: 1.1rem; font-size: 0; }
.step-ic    .ico { width: 30px; height: 30px; }
.reason-ic  { width: 58px; height: 58px; margin-bottom: 1.1rem; font-size: 0; }
.reason-ic  .ico { width: 28px; height: 28px; }
.fleet-ic   { width: 42px; height: 42px; border-radius: 12px; font-size: 0; }
.fleet-ic   .ico { width: 22px; height: 22px; }

/* Idle float — barely-there motion that makes the tiles feel alive. */
.step-ic   { animation: ico-float 5.5s ease-in-out infinite; }
.sc-emoji  { animation: ico-float 6.5s ease-in-out infinite; }
.reason-ic { animation: ico-float 7s   ease-in-out infinite; }
.scenario:nth-child(2) .sc-emoji { animation-delay: -1.2s; }
.scenario:nth-child(3) .sc-emoji { animation-delay: -2.4s; }
.scenario:nth-child(4) .sc-emoji { animation-delay: -3.6s; }
.step:nth-child(3) .step-ic { animation-delay: -1.4s; }
.step:nth-child(5) .step-ic { animation-delay: -2.8s; }

/* Hover lift on the tile + sharper glow. */
.scenario:hover .sc-emoji,
.reason:hover .reason-ic {
  transform: translateY(-3px);
  border-color: rgba(43,212,189,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 38px -16px rgba(43,212,189,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fleet-row:hover .fleet-ic {
  color: var(--teal-bright); border-color: rgba(43,212,189,.5);
  transition: color .2s ease, border-color .2s ease;
}

/* ---- Stroke-draw entrance, keyed to the existing [data-reveal].in ------- */
.js [data-reveal] .sc-emoji .ico,
.js [data-reveal] .step-ic .ico,
.js [data-reveal] .reason-ic .ico {
  stroke-dasharray: 120; stroke-dashoffset: 120;
}
.js [data-reveal].in .sc-emoji .ico,
.js [data-reveal].in .step-ic .ico,
.js [data-reveal].in .reason-ic .ico {
  animation: ico-draw 1.1s ease forwards;
}

/* ---- Small inline glyphs (hero ticks, ticker, app names) ----------------- */
.hero-ticks .ico.tick { color: var(--teal); margin-right: .15rem; }
.tk .ico { margin-right: .1rem; vertical-align: -0.12em; }
.tk.allow .ico { color: var(--allow, var(--teal)); }
.tk.block .ico { color: var(--block, #ff6b81); }
.tk.abort .ico { color: var(--abort, #f7b955); }

.app-glyph {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px; margin-right: .5rem;
  color: var(--teal);
  background: linear-gradient(160deg, rgba(43,212,189,.18), rgba(43,212,189,.04));
  border: 1px solid rgba(43,212,189,.25);
  vertical-align: middle;
}
.app-glyph .ico { width: 13px; height: 13px; }
.mock-app { display: inline-flex; align-items: center; }

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes ico-draw  { to { stroke-dashoffset: 0; } }
@keyframes ico-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ico-ring  { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sc-emoji, .step-ic, .reason-ic { animation: none !important; }
  .sc-emoji::before, .step-ic::before, .reason-ic::before { animation: none; }
  .js [data-reveal] .sc-emoji .ico,
  .js [data-reveal] .step-ic .ico,
  .js [data-reveal] .reason-ic .ico { stroke-dashoffset: 0; }
}

/* ---- Console (app) icon sizing ----------------------------------------- */
.lp-ic { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background: rgba(43,212,189,.12); border:1px solid rgba(43,212,189,.22); color:var(--teal); margin-right:.7rem; }
.lp-ic .ico { width:16px; height:16px; }
.login-points li { display:flex; align-items:center; }
.plat-ic .ico { width:20px; height:20px; }
.chip-ic .ico { width:18px; height:18px; }
.lf .ico { width:14px; height:14px; }
.dr-glyph .ico, .vc-glyph .ico { width:1em; height:1em; }
.dr-what .ico, .act .ico { width:1.05em; height:1.05em; vertical-align:-0.15em; }