/* VC4 blue version: the Technical page refinements. The technologies as a linear line in the reference site's style
   (chips joined by lines, a light running along them), calmer section backgrounds, smaller hover panels, and the
   animations for Connection layering, The platform and the Architecture diagram (blue/tech-fx.js), plus small
   graphics for the three Deployment tiles. Scoped to the Technical page. */

/* ---------- Network Technologies: a calm navy-to-teal band instead of the architecture photo ---------- */
html[data-blue] .blog-tech-zone { background: radial-gradient(1100px 620px at 88% 6%, rgba(19, 142, 150, .34), transparent 60%),
    radial-gradient(900px 600px at 4% 96%, rgba(63, 193, 201, .16), transparent 62%),
    linear-gradient(165deg, #011628 0%, #02263F 40%, #0B3D5C 78%, #0B5258 100%) !important; }

/* ---------- The technologies, linear: chips joined by lines, a light running left to right ---------- */
.b-tl { margin: 34px 0 44px; display: grid; gap: 14px; }
.b-tl-row { display: flex; align-items: center; }
.b-tl-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(173, 221, 246, .22); font: 700 12.5px/1.15 'Lato', sans-serif; color: #fff; white-space: nowrap;
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease; }
.b-tl-chip b { width: 8px; height: 8px; border-radius: 50%; background: #3FC1C9; box-shadow: 0 0 0 3px rgba(63, 193, 201, .18); flex: 0 0 8px; transition: background .4s, box-shadow .4s; }
.b-tl-chip.on { background: rgba(63, 193, 201, .2); border-color: rgba(63, 193, 201, .75); box-shadow: 0 0 22px -4px rgba(63, 193, 201, .7); transform: translateY(-2px); }
.b-tl-chip.on b { background: #fff; box-shadow: 0 0 0 4px rgba(63, 193, 201, .45); }
.b-tl-chip.alt.on { background: rgba(235, 85, 44, .18); border-color: rgba(235, 85, 44, .7); box-shadow: 0 0 22px -4px rgba(235, 85, 44, .6); }
.b-tl-chip.alt b { background: #EB552C; box-shadow: 0 0 0 3px rgba(235, 85, 44, .2); }
.b-tl-row > i { position: relative; flex: 1 1 18px; min-width: 14px; height: 2px; background: rgba(173, 221, 246, .2); overflow: hidden; border-radius: 2px; }
.b-tl-row > i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, #3FC1C9, #fff); }
.b-tl-row > i.run::after { animation: bTlRun .45s linear forwards; }
@keyframes bTlRun { to { transform: translateX(100%); } }
.b-tl-chip { opacity: 0; transform: translateY(8px); }
.b-tl.in .b-tl-chip { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--i) * 45ms), transform .5s ease calc(var(--i) * 45ms), background .4s, border-color .4s, box-shadow .4s; }
.b-tl.in .b-tl-chip.on { transform: translateY(-2px); }
@media (max-width: 900px) {
    .b-tl-row { flex-wrap: wrap; gap: 8px; } .b-tl-row > i { display: none; }
    .b-tl-chip { font-size: 12px; padding: 8px 12px 8px 10px; }
}

/* ---------- Hover panels: a smaller block, inset from the tiles, with the screens scaled down ---------- */
@media (hover: hover) and (min-width: 901px) {
    html[data-blue] .tile-expand { inset: 28px 7% !important; grid-template-columns: 1.25fr .9fr !important; border-radius: 20px !important; }
    #network-equipment-building-system:hover ~ #exp-nebs { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto;
        transition: opacity .28s ease .14s, transform .28s ease .14s, visibility 0s linear .14s; }
}
html[data-blue] .te-body { padding: 26px 30px !important; }
html[data-blue] .te-title { font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important; margin-bottom: 10px !important; }
html[data-blue] .te-text { font-size: 13.5px !important; line-height: 1.6 !important; margin-bottom: 10px !important; }
html[data-blue] .tile-expand .feature-list-item { font-size: 13px !important; padding: 5px 0 !important; }
html[data-blue] .te-img { display: flex; align-items: center; justify-content: center; padding: 26px; background-origin: content-box; }
html[data-blue] .te-img.b-te-swap > .b-swap { width: 78% !important; max-width: 340px; margin: auto; }
html[data-blue] .te-img.te-mockup:not(.b-te-swap) { background-size: 74% auto !important; transform: none !important; }

/* ---------- Connection layering: rows rise in, a trace runs down to the trench, a cut lights the customers ---------- */
.cl-diagram { position: relative; }
.cl-diagram .vdg-n { transition: box-shadow .35s ease, transform .35s ease, filter .35s ease, outline-color .35s ease; outline: 2px solid transparent; outline-offset: 2px; }
.cl-diagram .vdg-n.lit { box-shadow: 0 0 0 3px rgba(63, 193, 201, .55), 0 10px 26px -10px rgba(19, 142, 150, .7) !important; transform: translateY(-1px); filter: brightness(1.04); }
.cl-diagram .vdg-n.hit { box-shadow: 0 0 0 3px rgba(235, 85, 44, .7), 0 10px 28px -8px rgba(235, 85, 44, .7) !important; }
.cl-trace { position: absolute; left: 50%; top: 0; width: 3px; margin-left: -1.5px; border-radius: 3px; pointer-events: none; z-index: 3; background: linear-gradient(180deg, rgba(63, 193, 201, 0), #3FC1C9); box-shadow: 0 0 12px rgba(63, 193, 201, .8); height: 0; transition: height .35s linear, background .3s; }
.cl-trace.cut { background: linear-gradient(0deg, rgba(235, 85, 44, 0), #EB552C); box-shadow: 0 0 12px rgba(235, 85, 44, .8); }
.cl-dot { position: absolute; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid #3FC1C9; z-index: 4; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 6px rgba(63, 193, 201, .22); transition: top .35s linear, border-color .3s, box-shadow .3s, opacity .3s; }
.cl-dot.cut { border-color: #EB552C; box-shadow: 0 0 0 8px rgba(235, 85, 44, .25); }
.cl-flag { position: absolute; z-index: 5; transform: translate(-50%, -130%); padding: 5px 10px; border-radius: 999px; font: 900 10px/1 'Lato', sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: #EB552C; background: #fff; border: 1.5px solid #EB552C; box-shadow: 0 8px 18px -8px rgba(235, 85, 44, .6); opacity: 0; transition: opacity .3s; white-space: nowrap; pointer-events: none; }
.cl-flag.show { opacity: 1; }
.cl-flag.below { transform: translate(-50%, 0); }
.cl-flag.mid { transform: translate(-50%, -50%); }

/* ---------- Network Equipment: whole screens in the tiles, all three tiles alike ---------- */
html[data-blue] .blog-equip-zone { background: radial-gradient(900px 520px at 12% 0%, rgba(19, 142, 150, .3), transparent 60%), linear-gradient(170deg, #02263F 0%, #0B3554 70%, #0B4A5E 100%) !important; }
html[data-blue] .blog-equip-zone .article-card .card-img { background: linear-gradient(160deg, #0B3554, #02263F) !important; }
html[data-blue] .blog-equip-zone .article-card .card-img-inner { inset: 14px 18px 0 !important; }
html[data-blue] .blog-equip-zone .article-card .b-swap { width: 74% !important; max-width: 300px; margin: 6px auto 0; }
html[data-blue] .blog-equip-zone .article-card { background: #fff !important; }
html[data-blue] .blog-equip-zone .article-card :is(.card-headline) { color: #02263F !important; }
html[data-blue] .blog-equip-zone .article-card :is(.card-excerpt) { color: rgba(2, 38, 63, .75) !important; }
html[data-blue] .blog-equip-zone .article-card .card-cat { color: #138E96 !important; }
html[data-blue] .blog-equip-zone .article-card .card-read { color: #02263F !important; }

/* ---------- S2C Designer: image 86 under a navy wash, the button in the blue gradient ---------- */
html[data-blue] .blog-designer-zone { background: linear-gradient(100deg, rgba(1, 22, 40, .92) 0%, rgba(2, 38, 63, .84) 48%, rgba(2, 38, 63, .62) 100%), url('images/86.jpg') center / cover no-repeat !important; }
html[data-blue] .blog-designer-zone .hero-btn.teal { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important; background-position: 0 50%; border: 0 !important; color: #fff !important;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5) !important; transition: background-position .4s ease, transform .25s ease; }
html[data-blue] .blog-designer-zone .hero-btn.teal:hover { background-position: 100% 50% !important; transform: translateY(-2px); }

/* ---------- Integrations: the Home light band; The platform diagram animated ---------- */
html[data-blue] .blog-integrations-zone { background: linear-gradient(180deg, #F3F8FB 0%, #E7F1F7 100%) !important; }
.pa-grid .vdg-n, .pa-funcs li { transition: box-shadow .35s ease, transform .35s ease, color .35s ease, background .35s ease; }
.pa-grid .vdg-n.lit { box-shadow: 0 0 0 3px rgba(63, 193, 201, .6), 0 12px 26px -10px rgba(19, 142, 150, .7) !important; transform: translateY(-2px); }
.pa-funcs li.lit { color: #138E96; transform: translateX(4px); }
.pa-funcs li.lit::before { background: #EB552C !important; box-shadow: 0 0 0 4px rgba(235, 85, 44, .2); }
.pa-flow { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
.pa-flow path { fill: none; stroke: rgba(63, 193, 201, .0); }
.pa-flow circle { fill: #fff; stroke: #3FC1C9; stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(63, 193, 201, .9)); }
.pa-flow circle.o { stroke: #EB552C; filter: drop-shadow(0 0 5px rgba(235, 85, 44, .9)); }

/* ---------- Architecture: packets running along every connector, the layers lighting in turn ---------- */
.ha-svg .ln { stroke-dasharray: none; }
.ha-svg .ln.d { stroke-dasharray: 5 4; animation: haDash 1.2s linear infinite; }
@keyframes haDash { to { stroke-dashoffset: -18; } }
.ha-svg .band { transition: fill .6s ease, stroke .6s ease; }
.ha-svg .band.lit { fill: rgba(63, 193, 201, .16); stroke: rgba(63, 193, 201, .55); }
.ha-svg .pk { fill: #fff; stroke: #138E96; stroke-width: 2; }
.ha-svg .pk.o { stroke: #EB552C; }
.ha-svg .bx { transition: filter .4s ease; }

/* ---------- Deployment tiles: small graphics in place of the photos ---------- */
.b-dg { position: absolute; inset: 0; display: block; overflow: hidden; }
.b-dg svg { width: 100%; height: 100%; display: block; }
.b-dg-cloud { background: radial-gradient(120% 90% at 50% 0%, #0E4A75 0%, #02263F 70%); }
.b-dg-plans { background: radial-gradient(120% 90% at 50% 0%, #0B5258 0%, #022A3A 75%); }
.b-dg-video { background: radial-gradient(120% 90% at 50% 0%, #1B3B6F 0%, #0B1F3F 75%); }
@keyframes bDgFloat { 50% { transform: translateY(-5px); } }
@keyframes bDgPulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes bDgDash { to { stroke-dashoffset: -40; } }
@keyframes bDgGrow { 0%, 12% { transform: scaleY(.15); } 45%, 100% { transform: scaleY(1); } }
@keyframes bDgBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.b-dg .fl { animation: bDgFloat 5s ease-in-out infinite; transform-box: fill-box; }
.b-dg .pl { transform-box: fill-box; transform-origin: center; animation: bDgPulse 2.4s ease-out infinite; }
.b-dg .da { stroke-dasharray: 4 6; animation: bDgDash 1.6s linear infinite; }
.b-dg .gr { transform-box: fill-box; transform-origin: 50% 100%; animation: bDgGrow 4.8s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
.b-dg .pb { transform-box: fill-box; transform-origin: 0 50%; animation: bDgBar 6s linear infinite; }
.card-img:has(.b-dg) .img-icon { display: none !important; }

/* ---------- The linear line on a pale section (Ericsson migration steps): navy chips, numbered in order ---------- */
.b-tl-light .b-tl-chip { background: #fff; border-color: rgba(2, 38, 63, .12); color: #02263F; box-shadow: 0 8px 20px -14px rgba(2, 38, 63, .35); }
.b-tl-light .b-tl-row > i { background: rgba(2, 38, 63, .14); }
.b-tl-light .b-tl-row > i::after { background: linear-gradient(90deg, transparent, #138E96, #3FC1C9); }
.b-tl-light .b-tl-chip.on { background: #E6F4F5; border-color: #138E96; box-shadow: 0 10px 24px -10px rgba(19, 142, 150, .6); }
.b-tl-light .b-tl-chip.on b { background: #138E96; box-shadow: 0 0 0 4px rgba(19, 142, 150, .25); }
.b-tl-light .b-tl-chip.alt.on { background: #FDEEE9; border-color: #EB552C; }
.b-tl-steps { counter-reset: tlstep; }
.b-tl-steps .b-tl-chip::before { counter-increment: tlstep; content: counter(tlstep, decimal-leading-zero); font: 900 10px/1 'Lato', sans-serif; letter-spacing: .06em; color: #138E96; margin-right: 2px; }

/* ---------- Follow-ups ---------- */
/* the lifecycle line (Planned ... Out of Service): chips with the state and a short line under it */
.b-tl-txt { display: flex; flex-direction: column; gap: 3px; white-space: normal; }
.b-tl-txt small { font: 400 11px/1.3 'Lato', sans-serif; color: rgba(220, 236, 246, .72); max-width: 150px; }
.b-tl-chip:has(.b-tl-txt) { border-radius: 14px; padding: 10px 14px 10px 11px; align-items: flex-start; }
.b-tl-chip:has(.b-tl-txt) b { margin-top: 4px; }
/* monitors a little bigger in the equipment tiles and the hover panels; Equipment Types sits lower in its tile */
html[data-blue] .blog-equip-zone .article-card .b-swap { width: 86% !important; max-width: 340px; }
html[data-blue] #equipment-types .card-img-inner { top: 34px !important; }
html[data-blue] .te-img.b-te-swap > .b-swap { width: 88% !important; max-width: 400px; }
/* the equipment tiles stay still on hover (no zoom on the monitors) */
html[data-blue] .blog-equip-zone .article-card:hover :is(.card-img-inner, .b-swap-in, img) { transform: none !important; }
/* API & Bulkloader and Interfaces tiles: the devices sized by the tile's height, centred, with S2C screens */
html[data-blue] :is(#api, #integrations) .b-swap-mock { left: 50% !important; right: auto !important; width: auto !important; height: 108% !important; transform: translate(-50%, -50%) !important; }
html[data-blue] #api .b-swap-mock { aspect-ratio: 1493 / 1101; }
html[data-blue] #integrations .b-swap-mock { aspect-ratio: 1368 / 1188; }
html[data-blue] :is(#api, #integrations) .b-swap-mock img { height: 100% !important; width: 100% !important; }