/*
 * The small animated technical icons (resources/views/components/tech-icon.blade.php).
 *
 * At rest every icon is a clean static drawing. It only moves while it is on
 * screen — .is-live, toggled by an IntersectionObserver in
 * assets/js/about-showcase.js — so a page full of icons costs nothing once
 * scrolled past. Nothing moves for a visitor who prefers reduced motion.
 * Only transform, opacity and stroke-dashoffset are animated.
 *
 * No loop runs for more than about five seconds (WCAG 2.2.2): each icon plays
 * its motion once or twice and comes to rest. It plays again when it comes
 * back on screen, or when its card is hovered (about-showcase.js).
 */

.ti {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* The accent comes from the parent (--ti-accent), sky blue otherwise. */
.ti .ti-accent { stroke: var(--ti-accent, #0EA5E9); }
.ti .ti-accent-fill { fill: var(--ti-accent, #0EA5E9); stroke: none; }
.ti text {
    fill: currentColor;
    stroke: none;
    font: 700 7.5px/1 Inter, system-ui, sans-serif;
    letter-spacing: .02em;
}
.ti .ti-accent text { fill: var(--ti-accent, #0EA5E9); }

/* Every moving part turns around its own box. */
.ti .ti-meridian,
.ti .ti-bar,
.ti .ti-spin,
.ti .ti-bubble,
.ti .ti-float,
.ti .ti-led,
.ti .ti-blink,
.ti .ti-pulse,
.ti .ti-sweep {
    transform-box: fill-box;
    transform-origin: center;
}
.ti .ti-bar { transform-origin: 50% 100%; }
.ti .ti-needle { transform-origin: 24px 33px; }

/* The one-off drawings are in place at rest. */
.ti .ti-pulse { opacity: 0; }
.ti .ti-scan { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .ti.is-live .ti-pulse   { animation: ti-pulse 2.4s ease-out 2; }
    .ti.is-live .ti-meridian { animation: ti-meridian 4.6s ease-in-out 1; }
    .ti.is-live .ti-meridian.ti-late { animation-delay: .4s; }
    .ti.is-live .ti-blink   { animation: ti-blink 2.2s ease-in-out 2; }
    .ti.is-live .ti-blink.ti-late { animation-delay: .5s; }
    .ti.is-live .ti-bar     { animation: ti-bar 2.2s ease-in-out 2; }
    .ti.is-live .ti-bubble  { animation: ti-bubble 2.4s ease-in-out 2; }
    .ti.is-live .ti-bubble.ti-late { animation-delay: .6s; }
    .ti.is-live .ti-flow    { stroke-dasharray: 3 11; animation: ti-flow 1.4s linear 3; }
    .ti.is-live .ti-flow.ti-late { animation-delay: .35s; }
    .ti.is-live .ti-scan    { animation: ti-scan 2.6s ease-in-out 1; }
    .ti.is-live .ti-check   { stroke-dasharray: 26; animation: ti-check 2.6s ease-in-out 1 both; }
    .ti.is-live .ti-led     { animation: ti-led 1.6s steps(1, end) 3; }
    .ti.is-live .ti-spin    { animation: ti-spin 4.8s cubic-bezier(.4, 0, .2, 1) 1; }
    .ti.is-live .ti-spin.ti-reverse { animation-direction: reverse; animation-duration: 4.8s; }
    .ti.is-live .ti-tick    { stroke-dasharray: 9; animation: ti-tick 3.4s ease-in-out 1 both; }
    .ti.is-live .ti-slash   { stroke-dasharray: 31; animation: ti-slash 2.6s ease-in-out 1; }
    .ti.is-live .ti-float   { animation: ti-float 2.4s ease-in-out 2; }
    .ti.is-live .ti-needle  { animation: ti-needle 3.2s cubic-bezier(.45, 0, .2, 1) 1; }
    .ti.is-live .ti-sweep   { animation: ti-sweep 4s ease-in-out 1; }
    .ti.is-live .ti-draw    { stroke-dasharray: 60; animation: ti-draw 3.4s ease-in-out 1; }
    .ti.is-live .ti-wave-path { animation: ti-wave 2.4s linear 2; }

    .ti.is-live .ti-d1 { animation-delay: .15s; }
    .ti.is-live .ti-d2 { animation-delay: .3s; }
    .ti.is-live .ti-d3 { animation-delay: .45s; }
    .ti.is-live .ti-tick.ti-d1 { animation-delay: .4s; }
    .ti.is-live .ti-tick.ti-d2 { animation-delay: .8s; }
    .ti.is-live .ti-led.ti-d1 { animation-delay: .5s; }
    .ti.is-live .ti-led.ti-d2 { animation-delay: 1s; }
}

@keyframes ti-pulse {
    0%   { opacity: .5; transform: scale(.55); }
    100% { opacity: 0;  transform: scale(1.05); }
}
@keyframes ti-meridian {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(.08); }
}
@keyframes ti-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}
@keyframes ti-bar {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(.62); }
}
@keyframes ti-bubble {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(.9); opacity: .55; }
}
@keyframes ti-flow {
    to { stroke-dashoffset: -28; }
}
@keyframes ti-scan {
    0%   { transform: translateY(0);    opacity: 0; }
    15%  { opacity: .9; }
    70%  { transform: translateY(24px); opacity: .9; }
    85%, 100% { transform: translateY(24px); opacity: 0; }
}
@keyframes ti-check {
    0%, 55% { stroke-dashoffset: 26; }
    75%, 100% { stroke-dashoffset: 0; }
}
@keyframes ti-led {
    0%  { opacity: 1; }
    50% { opacity: .2; }
}
@keyframes ti-spin {
    to { transform: rotate(360deg); }
}
/* The one-shot motions end exactly on the resting drawing: no jump. */
@keyframes ti-tick {
    0%, 15%   { stroke-dashoffset: 9; }
    40%, 100% { stroke-dashoffset: 0; }
}
@keyframes ti-slash {
    0%   { stroke-dashoffset: 31; }
    55%, 100% { stroke-dashoffset: 0; }
}
@keyframes ti-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2.5px); }
}
@keyframes ti-needle {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(-80deg); }
    72%      { transform: rotate(14deg); }
    86%      { transform: rotate(-4deg); }
}
@keyframes ti-sweep {
    0%, 100% { transform: translate(0, 0); }
    35%      { transform: translate(-12px, -6px); }
    70%      { transform: translate(2px, 8px); }
}
@keyframes ti-draw {
    0%   { stroke-dashoffset: 60; }
    60%, 100% { stroke-dashoffset: 0; }
}
@keyframes ti-wave {
    to { transform: translateX(-24px); }
}