/* TicketBNK DEV — reference-matched five-step Hero */
.tf-stage,
.tf-network-section { display: none; }
.tf-hero-enabled .tf-stage--five,
.tf-hero-enabled .tf-network-section { display: block; }
.ts-page .tf-stage--five,
.ts-page .tf-network-section { display: block; }
.tf-stage__sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Header, Hero and Network share one page container */
.tf-hero-enabled .page-container,
.tf-hero-enabled .site-header .inner {
    width: min(calc(100% - 48px), 1440px);
    max-width: 1440px;
    margin-inline: auto;
}
.tf-hero-enabled .float-contact { display: none; }

/* Two-column Hero composition; Network is a separate sibling section */
.tf-hero-enabled .hero-corporate {
    min-height: auto;
    display: block;
    padding: calc(var(--header-h) + clamp(24px, 3vh, 44px)) 0 clamp(18px, 2vh, 28px);
    overflow: visible;
    background:
        radial-gradient(circle at 78% 18%, rgba(115, 136, 255, .13), transparent 34%),
        linear-gradient(145deg, #fbfdff 0%, #f6f8ff 62%, #eef4ff 100%);
}
.tf-hero-enabled .hero-main {
    display: grid;
    grid-template-columns: minmax(420px, .82fr) minmax(760px, 1.75fr);
    align-items: center;
    gap: clamp(40px, 4vw, 64px);
}
.tf-hero-enabled .hero-corporate-copy {
    min-width: 360px;
    margin: 0;
    transform: none;
}
.tf-hero-enabled .hero-corporate-copy h1 {
    max-width: 11em;
    font-size: clamp(42px, 2.6vw, 46px);
    line-height: 1.14;
    letter-spacing: -.045em;
    word-break: keep-all;
    overflow-wrap: normal;
}
.tf-hero-enabled .hero-corporate-eyebrow { margin-bottom:14px; }
.tf-hero-enabled .hero-corporate-copy h1 { margin-bottom:20px; }
.tf-hero-enabled .hero-corporate-lead {
    margin:0 0 24px;
    font-size: clamp(.92rem, 1vw, 1.08rem);
    line-height: 1.8;
    word-break: keep-all;
}
.tf-hero-enabled .hero-corporate-actions { margin:0 0 26px; }
.tf-hero-enabled .hero-corporate-visual {
    min-width: 760px;
    width: 100%;
    margin: 0;
    transform: none;
}

.hero-premium-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 0;
}
.hero-premium-chip {
    display: grid;
    justify-items: center;
    gap: .4rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}
.hero-premium-chip i {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, .15);
    background: rgba(255,255,255,.76);
    box-shadow: 0 8px 24px rgba(51, 65, 85, .08);
}

/* Unified five-step glass stage */
.tf-flow-board {
    position: relative;
    width: 100%;
    min-height: 440px;
    height: clamp(440px, 29vw, 480px);
    max-height: 480px;
    aspect-ratio: 16 / 8.4;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 1.6rem;
    background: rgba(246, 249, 255, .82);
    box-shadow:
        0 28px 70px rgba(49, 65, 120, .16),
        inset 0 1px 0 rgba(255,255,255,.96);
    isolation: isolate;
}
.tf-flow-board::before {
    content: "";
    position: absolute; inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(71, 230, 173, .07), rgba(93, 156, 255, .07) 52%, rgba(219, 105, 245, .08)),
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(239,243,255,.42));
}
.tf-flow-board__background { position: absolute; inset: 0; z-index: -2; }
.tf-flow-board__background img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: .23; filter: saturate(.75) contrast(.9);
}
.tf-flow-board__background span {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(251,253,255,.38), rgba(238,242,255,.22) 58%, rgba(213,224,244,.7));
}
.tf-five-scenes {
    position: absolute;
    inset: 0 0 52px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.tf-five-scene {
    position: relative;
    min-width: 0;
    overflow: hidden;
    opacity: .52;
    filter: saturate(.72);
    transition: opacity .45s ease, filter .45s ease, background .45s ease;
}
.tf-five-scene + .tf-five-scene::before {
    content: "";
    position: absolute; left: 0; top: 1.2rem; bottom: 1rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(129,140,175,.25) 12%, rgba(129,140,175,.25) 82%, transparent);
}
.tf-five-scene.is-active {
    opacity: 1;
    filter: saturate(1.05);
    background: radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.58), transparent 67%);
}
.tf-five-scene.is-active::after {
    content: "";
    position: absolute; inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 68%, rgba(96,165,250,.2), transparent 58%);
    animation: tf-scene-glow 2s ease-in-out infinite;
}
.tf-five-scene__head {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-height: 72px;
    padding: 14px 14px 8px;
}
.tf-five-scene__number {
    display: grid; place-items: center; flex: 0 0 1.8rem;
    width: 1.8rem; height: 1.8rem; border-radius: 50%;
    color: #fff; background: #7183a8;
    font-size: .72rem; font-weight: 900;
    box-shadow: 0 5px 14px rgba(49,65,120,.18);
    transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.tf-five-scene:nth-child(1) .tf-five-scene__number { background: #2587ee; }
.tf-five-scene:nth-child(2) .tf-five-scene__number { background: #43bc7c; }
.tf-five-scene:nth-child(3) .tf-five-scene__number { background: #5a74f6; }
.tf-five-scene:nth-child(4) .tf-five-scene__number { background: #8757e8; }
.tf-five-scene:nth-child(5) .tf-five-scene__number { background: #ed6796; }
.tf-five-scene.is-active .tf-five-scene__number {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px rgba(99,102,241,.12), 0 5px 18px rgba(49,65,120,.26);
}
.tf-five-scene__head h3 {
    margin: .08rem 0 .35rem;
    color: #17243e;
    font-size: clamp(.78rem, .88vw, 1rem);
    line-height: 1.2; letter-spacing: -.02em;
    white-space: nowrap;
    word-break: keep-all;
}
.tf-five-scene__head p {
    margin: 0; color: #65738e;
    font-size: clamp(.58rem, .64vw, .72rem);
    line-height: 1.45;
    min-height:2.9em;
    max-height:2.9em;
    overflow:hidden;
}
.tf-five-scene__visual {
    position: absolute;
    inset: 72px 0 0;
}
.tf-five-scene__visual img { display: block; object-fit: contain; }

/* Product and customer composition — one floor line, no collage overlap */
.tf-five-family {
    position: absolute; left: 6%; bottom: 66px;
    width: 82%; height: 74%; object-position: center bottom;
    filter: drop-shadow(0 13px 10px rgba(49,65,85,.18));
}
.tf-five-scene__visual--choice {
    display: grid; grid-template-columns: 48% 52%;
    align-items: end; padding: 0 .28rem 66px;
}
.tf-five-staff, .tf-five-kiosk { position: relative; height: 82%; min-width: 0; }
.tf-five-staff > img {
    position: absolute; left: -4%; bottom: 0;
    width: 62%; height: 68%; object-position: bottom;
    filter: drop-shadow(0 10px 8px rgba(49,65,85,.15));
}
.tf-counter-mini {
    position: absolute; right: 2%; bottom: 0;
    display: grid; place-items: center;
    width: 66%; height: 42%;
    border: 2px solid #c6d2e8; border-radius: .65rem .65rem .3rem .3rem;
    color: #85e7f7; background: linear-gradient(145deg, #182b49, #071222);
    box-shadow: 0 12px 18px rgba(33,49,78,.2);
    font-size: .54rem; font-weight: 900;
}
.tf-five-kiosk > img {
    position: absolute; left: 10%; bottom: 0;
    width: 78%; height: 74%; object-position: bottom;
    filter: drop-shadow(0 13px 10px rgba(49,65,85,.19));
}
.tf-product-label {
    position: absolute; top: 4%; left: 50%; z-index: 3;
    transform: translateX(-50%);
    padding: .28rem .45rem; border-radius: .45rem;
    color: #fff; background: #3fb979;
    font-size: .5rem; font-weight: 800; white-space: nowrap;
}
.tf-branch-arrow {
    position: absolute; left: 49%; bottom: 25%; z-index: 4;
    color: #54c68c; font-size: 1.4rem; font-weight: 900;
}
.tf-ticket-kiosk-product {
    position:absolute;
    left:1%;
    bottom:66px;
    width:58%;
    height:72%;
}
.tf-ticket-kiosk-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-position:center bottom;
    filter:drop-shadow(0 12px 9px rgba(49,65,85,.17));
}
.tf-ticket-output-slot {
    position:absolute;
    left:68%;
    top:51%;
    z-index:4;
    width:34%;
    height:4px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#101827;
    box-shadow:0 0 0 2px rgba(70,93,126,.25);
}
.tf-ticket-print-layer {
    position:absolute;
    left:68%;
    top:51%;
    z-index:5;
    width:clamp(72px, 4.3vw, 82px);
    aspect-ratio:200 / 280;
    transform:translate(-50%, 12px);
    transform-origin:50% 0;
}
.tf-ticket-print-image {
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
}
.tf-five-customer {
    position: absolute; z-index: 3;
    object-position: center bottom;
    filter: drop-shadow(0 12px 9px rgba(49,65,85,.18));
}
.tf-five-customer--receive { right:-2%; bottom:66px; width:34%; height:55%; }
.tf-five-customer--scan { left: 0; bottom:66px; width:38%; height:58%; }
.tf-five-validator {
    position: absolute; right: 5%; bottom:66px;
    width: 48%; height: 62%;
}
.tf-five-validator img { width: 100%; height: 100%; }
.tf-five-pass {
    position: absolute; top: 22%; right: 8%; z-index: 4;
    padding: .32rem .5rem; border-radius: 999px;
    color: #fff; background: #20b96a;
    font-size: .54rem; font-weight: 900;
    opacity: 0; transform: scale(.7);
}
.tf-five-gate {
    position: absolute; left: 3%; right: 3%; bottom:66px;
    height: 49%;
}
.tf-five-gate svg { width: 100%; height: 100%; overflow: visible; }
.tf-five-customer--enter {
    right: 20%; bottom:66px; width: 46%; height: 49%;
}
.tf-five-welcome {
    position: absolute; top: 10%; left: 50%; z-index: 4;
    transform: translateX(-50%) translateY(8px);
    color: #8f53d8; font-size: clamp(.66rem, .78vw, .9rem);
    letter-spacing: .08em; opacity: 0;
}
.tf-light-ring {
    position: absolute; left: 10%; right: 10%; bottom:60px;
    height: 13%; border: 3px dotted #53d6a0; border-radius: 50%;
    filter: drop-shadow(0 0 8px currentColor); opacity: .34;
}
.tf-light-ring--green { color:#46dc9a; border-color:#46dc9a; }
.tf-light-ring--blue { color:#5ba5ff; border-color:#5ba5ff; }
.tf-light-ring--purple { color:#9f71fb; border-color:#9f71fb; }
.tf-light-ring--pink { color:#f579b0; border-color:#f579b0; }
.tf-five-scene.is-active .tf-light-ring { opacity: .95; animation: tf-ring 1.7s ease-in-out infinite; }
.tf-five-scene.is-active .tf-five-customer,
.tf-five-scene.is-active .tf-five-family { animation: tf-customer-move 1.1s ease-in-out both; }
.tf-five-scene.is-active .tf-five-kiosk > img,
.tf-five-scene.is-active .tf-counter-mini,
.tf-five-scene.is-active .tf-five-validator,
.tf-five-scene.is-active .tf-five-gate {
    filter: drop-shadow(0 0 12px rgba(82, 142, 255, .28));
}
.tf-flow-path {
    position: absolute; left: 0; right: 0; bottom:52px; z-index: 4;
    width: 100%; height: 25%; pointer-events: none; overflow: visible;
}
.tf-flow-path path {
    fill: none; stroke: rgba(57, 205, 146, .24); stroke-width: 4;
    stroke-linecap: round; stroke-dasharray: 2 12;
    filter: drop-shadow(0 0 3px rgba(57,205,146,.3));
    transition: stroke .35s ease, filter .35s ease, opacity .35s ease;
}
.tf-flow-path path.is-active {
    stroke: #42dda0;
    filter: drop-shadow(0 0 7px rgba(49,220,154,.9));
    animation: tf-path 2.8s linear infinite;
}

/* Step-specific motion */
.tf-stage[data-step="3"] .tf-ticket-output-slot {
    animation:tf-output-slot 1.1s ease-in-out 2;
}
.tf-stage[data-step="3"] .tf-ticket-print-layer {
    animation:tf-ticket-print 1.45s cubic-bezier(.22,.75,.28,1) both;
}
.tf-stage[data-step="3"] .tf-ticket-glow {
    position: absolute; inset: -6%; z-index: 1; border-radius: 50%;
    background: #6b8cff; filter: blur(18px); opacity: .42;
    animation: tf-glow 1.5s .7s ease-in-out infinite;
}
.tf-qr-build {
    position: absolute; left: 33%; top: 32%; z-index: 3;
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 1px; width: 34%; aspect-ratio: 1; opacity: 0;
}
.tf-qr-build i { background:#101827; }
.tf-stage[data-step="3"] .tf-qr-build { animation:tf-qr-print .55s .55s steps(6,end) both; }
.tf-barcode-build {
    position: absolute; left: 30%; right: 30%; bottom: 16%; z-index: 3;
    height: 7%; opacity: 0;
    background: repeating-linear-gradient(90deg,#0f172a 0 2px,transparent 2px 4px);
}
.tf-stage[data-step="3"] .tf-barcode-build { animation:tf-barcode-print .45s .78s ease-out both; }
.tf-scan {
    position:absolute; left:15%; right:15%; top:26%; z-index:5; height:3px;
    background:#4eff9f; box-shadow:0 0 12px #4eff9f; opacity:0;
}
.tf-stage[data-step="4"] .tf-scan { opacity:1; animation:tf-scan 1.4s ease-in-out infinite; }
.tf-stage[data-step="4"] .tf-five-pass { opacity:1; transform:scale(1); transition:.35s .55s; }
.tf-gate-arm { transform-box:fill-box; transform-origin:left center; }
.tf-stage[data-step="5"] .tf-gate-arm { animation:tf-gate-open .75s ease-out forwards; }
.tf-stage[data-step="5"] .tf-five-welcome { opacity:1; transform:translateX(-50%) translateY(0); transition:.55s .35s; }
.tf-particles { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.tf-particle { position:absolute; width:6px; height:10px; border-radius:2px; animation:tf-confetti 1.35s ease-out forwards; }

/* Navy control bar */
.tf-five-controls {
    position: absolute; left: .65rem; right: .65rem; bottom:6px; z-index: 20;
    height:52px;
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding:6px 10px;
    border: 1px solid rgba(164, 185, 225, .2);
    border-radius: 1rem;
    color: #e7efff;
    background: rgba(9, 20, 39, .94);
    box-shadow: 0 12px 24px rgba(10,19,38,.25);
}
.tf-five-controls__status,
.tf-five-controls__steps { display:flex; align-items:center; gap:.4rem; }
.tf-five-controls__status span {
    display:flex; align-items:center; gap:.4rem;
    color:#b9c7dc; font-size:.66rem; font-weight:700;
}
.tf-five-controls__status span i {
    width:.42rem; height:.42rem; border-radius:50%; background:#37d27e;
    box-shadow:0 0 8px #37d27e;
}
.tf-five-controls__status span em { font-style: normal; }
.tf-btn, .tf-step-dot {
    min-width:34px; height:34px;
    border: 1px solid rgba(164,185,225,.14);
    border-radius: .62rem;
    color: #d5e0f2; background: rgba(30,45,69,.72);
    font: inherit; font-size: .66rem; font-weight: 800;
    cursor: pointer; transition: .2s ease;
}
.tf-btn:hover, .tf-step-dot:hover,
.tf-btn:focus-visible, .tf-step-dot:focus-visible {
    color:#fff; border-color:#66a7ff; outline:none;
}
.tf-btn--play { display:none; }
.tf-five-controls:has(.tf-btn--pause.is-active) .tf-btn--pause { display:none; }
.tf-five-controls:has(.tf-btn--pause.is-active) .tf-btn--play { display:inline-grid; place-items:center; }
.tf-steps { display:flex; gap:.35rem; }
.tf-step-dot { border-radius:50%; }
.tf-step-dot[aria-current="step"] {
    color:#fff; border-color:#56dba1;
    background:linear-gradient(135deg,#53d790,#35b8a2);
    box-shadow:0 0 0 4px rgba(65,210,153,.12),0 0 16px rgba(65,210,153,.34);
}
.tf-progress {
    position:absolute; left:1rem; right:1rem; bottom:0;
    height:2px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08);
}
.tf-progress__bar { width:20%; height:100%; background:linear-gradient(90deg,#4ad799,#6c8cff,#d875f1); transition:width .5s ease; }

/* Full-width realtime network below Hero */
.tf-network-section {
    padding:16px 0 18px;
    background: linear-gradient(180deg, #eef4ff 0%, #f8faff 100%);
}
.tf-network-wide {
    min-height:250px;
    margin: 0 auto;
    padding:22px 24px 18px;
    border: 1px solid rgba(92,134,206,.23);
    border-radius: 1.25rem;
    color:#eaf2ff;
    background:
        radial-gradient(circle at 20% 0%, rgba(32,125,240,.18), transparent 32%),
        radial-gradient(circle at 80% 100%, rgba(156,66,235,.17), transparent 36%),
        linear-gradient(145deg,#0c1b31,#071223 70%,#101533);
    box-shadow:0 25px 60px rgba(10,23,47,.22), inset 0 1px rgba(255,255,255,.05);
}
.tf-network-wide__head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.55rem;
}
.tf-network-wide__eyebrow { margin:0 0 .12rem; color:#56a5ff; font-size:.54rem; font-weight:900; letter-spacing:.14em; }
.tf-network-wide h2 { margin:0; color:#fff; font-size:.9rem; }
.tf-network-wide__online { display:flex; align-items:center; gap:.4rem; color:#9fb0c8; font-size:.62rem; }
.tf-network-wide__online i { width:.42rem; height:.42rem; border-radius:50%; background:#36da82; box-shadow:0 0 9px #36da82; animation:tf-led 1.5s infinite; }
.tf-network-flow {
    display:grid;
    grid-template-columns:
        minmax(130px,1fr) 44px
        minmax(130px,1fr) 44px
        minmax(130px,1fr) 44px
        minmax(130px,1fr) 44px
        minmax(130px,1fr) 44px
        minmax(130px,1fr);
    align-items:center;
}
.tf-net-card {
    min-width:0; min-height:112px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:14px 12px;
    border:1px solid rgba(120,161,226,.12); border-radius:.75rem;
    background:rgba(17,36,65,.58);
    opacity:.5; transition:.4s ease;
}
.tf-net-card.is-active {
    opacity:1; border-color:rgba(80,163,255,.36);
    box-shadow:0 0 24px rgba(47,126,239,.12), inset 0 0 20px rgba(50,112,205,.07);
}
.tf-net-card img { width:100%; height:42px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(55,146,255,.3)); }
.tf-net-card:nth-of-type(4) img { height:58px; }
.tf-net-card div { min-width:0; display:flex; flex-direction:column; align-items:center; gap:.12rem; text-align:center; }
.tf-net-card strong {
    color:#ecf4ff;
    font-size:.62rem;
    line-height:1.25;
    word-break:keep-all;
}
.tf-net-card span:not(.tf-net-card__product),
.tf-net-card small { display:none; }
.tf-net-card b { margin-top:.15rem; color:#8ec7ff; font-size:.88rem; }
.tf-net-card__product {
    display:grid !important; place-items:center;
    width:72%; height:42px; border-radius:.45rem;
    color:#5ce9ff !important; background:linear-gradient(145deg,#193252,#091525);
    font-size:.58rem !important; font-weight:900;
    box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.tf-net-connector { position:relative; height:20px; opacity:.18; transition:.35s ease; }
.tf-net-connector::before {
    content:""; position:absolute; left:7%; right:7%; top:50%; height:2px;
    background:linear-gradient(90deg,#54b6ff,#745cff,#d466eb);
    box-shadow:0 0 7px #685cff;
}
.tf-net-connector i {
    position:absolute; top:calc(50% - 3px); left:0;
    width:6px; height:6px; border-radius:50%; background:#91d8ff; box-shadow:0 0 7px #91d8ff;
    opacity:0;
}
.tf-net-connector.is-active { opacity:1; }
.tf-net-connector.is-active i { opacity:1; animation:tf-packet 1.7s linear infinite; }
.tf-net-connector.is-active i:nth-child(2) { animation-delay:.55s; }
.tf-net-connector.is-active i:nth-child(3) { animation-delay:1.1s; }
.tf-network-summary {
    display:flex; justify-content:flex-end; gap:1.6rem;
    margin-top:.6rem; padding:.6rem .7rem 0;
    border-top:1px solid rgba(130,154,195,.12);
    color:#8396b2; font-size:.58rem;
}
.tf-network-summary b { color:#dce9fb; font-size:.68rem; }
.tf-hero-enabled .hero-scroll-hint { display:none; }

@keyframes tf-scene-glow { 50%{opacity:.55} }
@keyframes tf-ring { 50%{transform:scale(1.06);opacity:.55} }
@keyframes tf-customer-move { from{transform:translateX(-12px);opacity:.38} to{transform:translateX(0);opacity:1} }
@keyframes tf-path { to{stroke-dashoffset:-70} }
@keyframes tf-output-slot { 50%{box-shadow:0 0 14px 4px rgba(84,151,255,.75)} }
@keyframes tf-ticket-print {
    0% { opacity:0; clip-path:inset(0 0 82% 0); transform:translate(-50%,-34px) scale(.92); }
    14% { opacity:1; clip-path:inset(0 0 55% 0); transform:translate(-50%,-18px) scale(.94); }
    52% { opacity:1; clip-path:inset(0 0 0 0); transform:translate(-50%,10px) scale(1); }
    76% { opacity:1; clip-path:inset(0 0 0 0); transform:translate(-50%,12px) scale(1); }
    100% { opacity:1; clip-path:inset(0 0 0 0); transform:translate(calc(-50% + 26px),18px) rotate(-4deg); }
}
@keyframes tf-glow { 50%{transform:scale(1.12);opacity:.25} }
@keyframes tf-qr-print {
    from{opacity:0;clip-path:inset(0 100% 0 0)}
    to{opacity:.82;clip-path:inset(0)}
}
@keyframes tf-barcode-print {
    from{opacity:0;transform:scaleX(0)}
    to{opacity:.72;transform:scaleX(1)}
}
@keyframes tf-scan { 0%,100%{transform:translateY(-12px)} 50%{transform:translateY(62px)} }
@keyframes tf-gate-open { to{transform:rotate(-76deg)} }
@keyframes tf-confetti { to{transform:translate(var(--dx),var(--dy)) rotate(480deg);opacity:0} }
@keyframes tf-led { 50%{opacity:.35} }
@keyframes tf-packet { from{left:4%} to{left:90%} }