/* ==================================================================
   ORBIX ICONS — uniform emoji (Fluent 3D) + animated line icons
   Shared by every Orbix app: the 5 study apps and the mini apps.
   Pairs with assets/orbix-ui.js, which swaps the glyphs in.
   ================================================================== */

/* ── Uniform emoji (Fluent 3D on Windows / Android / Linux) ────────── */
img.oe {
  display: inline-block;
  width: 1.18em; height: 1.18em;
  margin: 0 0.04em;
  vertical-align: -0.22em;
  object-fit: contain;
  pointer-events: none;
  user-select: none; -webkit-user-drag: none;
  image-rendering: auto;
}
/* Emoji that sit alone as an icon fill their box a touch more */
.nav-icon > img.oe:only-child, .oui-tab-icon > img.oe:only-child,
.toast-icon > img.oe:only-child, .stat-icon > img.oe:only-child { width: 1.25em; height: 1.25em; margin: 0; vertical-align: middle; }

/* ── Animated line icons (Lucide shapes, animate-ui style motion) ─── */
svg.oi {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  vertical-align: -0.16em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
svg.oi * { transform-box: fill-box; transform-origin: center; }
.modal-close svg.oi, .fp-close svg.oi, .block-popup-close svg.oi { width: 15px; height: 15px; vertical-align: middle; }
.sidebar-toggle svg.oi { width: 18px; height: 18px; vertical-align: middle; }
.nav-icon > svg.oi { width: 18px; height: 18px; vertical-align: middle; }

@media (prefers-reduced-motion: no-preference) {
  .oi-host:hover svg.oi-x, .oi-play svg.oi-x { animation: oi-rot90 .5s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-plus, .oi-play svg.oi-plus { animation: oi-rot90 .5s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-check path, .oi-play svg.oi-check path { stroke-dasharray: 24; animation: oi-draw .45s var(--oui-ease-out); }
  .oi-host:hover svg.oi-trash .lid, .oi-play svg.oi-trash .lid { animation: oi-lid .55s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-pencil, .oi-play svg.oi-pencil { animation: oi-wiggle .55s var(--oui-ease-out); }
  .oi-host:hover svg.oi-play, .oi-play svg.oi-play { animation: oi-nudge-r .5s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-pause .b1, .oi-play svg.oi-pause .b1 { animation: oi-squeeze .5s var(--oui-ease-out); }
  .oi-host:hover svg.oi-pause .b2, .oi-play svg.oi-pause .b2 { animation: oi-squeeze .5s .08s var(--oui-ease-out); }
  .oi-host:hover svg.oi-stop, .oi-play svg.oi-stop { animation: oi-pop .45s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-skip-f, .oi-play svg.oi-skip-f { animation: oi-nudge-r .5s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-skip-b, .oi-play svg.oi-skip-b { animation: oi-nudge-l .5s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-undo, .oi-play svg.oi-undo { animation: oi-undo .55s var(--oui-ease-out); }
  .oi-host:hover svg.oi-arrow-r, .oi-play svg.oi-arrow-r { animation: oi-nudge-r .55s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-arrow-l, .oi-play svg.oi-arrow-l { animation: oi-nudge-l .55s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-arrow-u, .oi-play svg.oi-arrow-u { animation: oi-nudge-u .55s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-chev-r, .oi-play svg.oi-chev-r { animation: oi-nudge-r .5s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-chev-l, .oi-play svg.oi-chev-l { animation: oi-nudge-l .5s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-menu .m2, .oi-play svg.oi-menu .m2 { animation: oi-shorten .5s var(--oui-ease-out); }
  .oi-host:hover svg.oi-search, .oi-play svg.oi-search { animation: oi-search .6s var(--oui-ease-out); }
  .oi-host:hover svg.oi-volume .w1, .oi-play svg.oi-volume .w1 { animation: oi-wave .7s var(--oui-ease-out); }
  .oi-host:hover svg.oi-volume .w2, .oi-play svg.oi-volume .w2 { animation: oi-wave .7s .1s var(--oui-ease-out); }
  .oi-host:hover svg.oi-refresh, .oi-play svg.oi-refresh { animation: oi-spin .6s var(--oui-ease-out); }
  .oi-host:hover svg.oi-repeat, .oi-play svg.oi-repeat { animation: oi-spin .6s var(--oui-ease-out); }
  .oi-host:hover svg.oi-grid rect:nth-child(odd), .oi-play svg.oi-grid rect:nth-child(odd) { animation: oi-pop .45s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-grid rect:nth-child(even), .oi-play svg.oi-grid rect:nth-child(even) { animation: oi-pop .45s .07s var(--oui-ease-spring); }
  .oi-host:hover svg.oi-more circle, .oi-play svg.oi-more circle { animation: oi-dot .45s var(--oui-ease-spring); }
  .oi-play svg.oi-more circle:nth-child(2) { animation-delay: .05s; }
  .oi-play svg.oi-more circle:nth-child(3) { animation-delay: .1s; }
}
@keyframes oi-rot90 { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes oi-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes oi-lid { 0%,100% { transform: none; } 40% { transform: translateY(-2.5px) rotate(-10deg); } }
@keyframes oi-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } }
@keyframes oi-nudge-r { 0%,100% { transform: none; } 40% { transform: translateX(2.5px); } }
@keyframes oi-nudge-l { 0%,100% { transform: none; } 40% { transform: translateX(-2.5px); } }
@keyframes oi-nudge-u { 0%,100% { transform: none; } 40% { transform: translateY(-2.5px); } }
@keyframes oi-squeeze { 0%,100% { transform: scaleY(1); } 40% { transform: scaleY(.6); } }
@keyframes oi-pop { 0%,100% { transform: scale(1); } 40% { transform: scale(.78); } }
@keyframes oi-undo { 0%,100% { transform: rotate(0); } 45% { transform: rotate(-28deg); } }
@keyframes oi-shorten { 0%,100% { transform: scaleX(1); } 45% { transform: scaleX(.55); } }
@keyframes oi-search { 0%,100% { transform: none; } 30% { transform: translate(-1.5px,-1.5px) rotate(-8deg); } 65% { transform: translate(1px,1px) rotate(4deg); } }
@keyframes oi-wave { 0%,100% { opacity: 1; } 35% { opacity: .15; } }
@keyframes oi-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes oi-dot { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-2.5px); } }

/* Brand marks used in music tabs */
svg.oui-brand { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.music-tab svg.oui-brand { margin-right: 2px; }