/* Homepage: "Treci de blocajele ISP" section (templates/index*.tpl, #lp-bypass).
   Default markup state is the finished, static diagram (no JS, reduced motion).
   JS adds .is-armed (hidden start state) and .is-on (plays once, packets flow 4 cycles, then rests). */

.lp-bypass { padding-top: 0; } /* follows the white features section: one continuous white block */

.bp {
  --bp-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bp-blue: #2D6FE3;
  --bp-blue-soft: #9CC1FF;
  --bp-soft: #B4C2D9;
  --bp-line: rgba(255, 255, 255, 0.12);
  --bp-stop: #F97066; /* blocked mark on navy-900, 6.4:1 */
  margin: 0; padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(24px, 3vw, 36px);
  border-radius: 28px; color: #F4F7FC;
  background:
    radial-gradient(55% 60% at 78% 0%, rgba(45, 111, 227, 0.20), transparent 70%),
    #0B1A33;
}
.bp__lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.bp__lane { min-width: 0; padding: 0 clamp(20px, 3vw, 40px); }
.bp__lane:first-child { padding-left: 0; }
.bp__lane + .bp__lane { padding-right: 0; border-left: 1px solid var(--bp-line); }
.bp__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-section .bp__name { margin: 0; color: #fff; font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }
.bp__chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.bp__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bp__chip--no { color: #FDA29B; background: rgba(249, 112, 102, 0.12); }
.bp__chip--ok { color: #7BD389; background: rgba(46, 125, 50, 0.22); } /* connected state */

.bp-svg { display: block; width: 100%; height: auto; margin: 18px 0 6px; overflow: visible; }
.bp__ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.bp__ends li { color: var(--bp-soft); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.bp__ends li:nth-child(2) { text-align: center; }
.bp__ends li:nth-child(3) { text-align: right; }
.bp__lane--ok .bp__ends li:nth-child(3) { color: #fff; }
.lp-section .bp__cap { margin: 16px 0 0; max-width: 46ch; color: var(--bp-soft); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

.bp__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: clamp(28px, 3.5vw, 40px) 0 0; padding: clamp(22px, 2.5vw, 28px) 0 0; list-style: none;
  border-top: 1px solid var(--bp-line);
}
.bp__facts li { display: flex; flex-direction: column; gap: 4px; }
.bp__facts b { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.bp__facts span { color: var(--bp-soft); font-size: 14px; line-height: 1.45; }
.lp-section .bp__note { margin: 18px 0 0; color: var(--bp-soft); font-size: 13.5px; }

/* ---------- diagram geometry ---------- */
.bp-dev rect { fill: #18335E; stroke: var(--bp-soft); stroke-width: 2; }
.bp-dev path { fill: none; stroke: var(--bp-soft); stroke-width: 2.5; stroke-linecap: round; }
.bp-wall rect { fill: #18335E; stroke: rgba(180, 194, 217, 0.55); stroke-width: 1.5; }
/* RoTunneling lane: the wall is complete; the connection pushes the bricks apart (rest state = parted, gap open) */
.bp-brk { transform: translateY(var(--dy, 0px)); }
.bp-brk--gap { opacity: 0; transform: scaleY(0); transform-box: fill-box; transform-origin: center; }
.bp-globe circle, .bp-globe ellipse, .bp-globe path { fill: none; stroke-width: 2; }
.bp-globe circle { fill: #0F2547; }
.bp-globe--dim * { stroke: rgba(180, 194, 217, 0.4); }
.bp-globe--on * { stroke: var(--bp-blue-soft); }
.bp-globe--on circle { fill: rgba(45, 111, 227, 0.22); }
.bp-ghost { fill: none; stroke: rgba(180, 194, 217, 0.28); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }

.bp-a { fill: none; stroke: var(--bp-soft); stroke-width: 3; stroke-linecap: round; opacity: 0.5; }
.bp-a-pk { --p: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 16; opacity: 0.55; }
.bp-x circle { fill: #0B1A33; stroke: var(--bp-stop); stroke-width: 2; }
.bp-x path { fill: none; stroke: var(--bp-stop); stroke-width: 2.2; stroke-linecap: round; }
.bp-x { transform-box: fill-box; transform-origin: center; }

.bp-probe { fill: none; stroke: var(--bp-soft); stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; }
.bp-probe--no { opacity: 0.28; }
.bp-cap rect { fill: rgba(45, 111, 227, 0.14); stroke: var(--bp-blue-soft); stroke-width: 1.2; stroke-dasharray: 3 3; }
.bp-cap { transform-box: fill-box; transform-origin: center; }
.bp-s { fill: none; stroke: url(#bp-mask); stroke-width: 1.6; stroke-linecap: round; opacity: 0.5; }
.bp-pk { fill: none; stroke: url(#bp-mask); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 26; stroke-dashoffset: var(--o, 0); }
.bp-lit { opacity: 1; }

/* ---------- motion (only when JS armed it; never under reduced motion) ---------- */
/* .bp-wall--part --t = when the connection reaches the wall */
.bp.is-armed .bp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp.is-armed .bp-brk { transform: none; }
.bp.is-armed .bp-brk--gap { opacity: 1; transform: none; }
.bp.is-armed .bp-x { opacity: 0; transform: scale(0.9); }
.bp.is-armed .bp-cap { opacity: 0; transform: scale(0.95); }
.bp.is-armed .bp-pk, .bp.is-armed .bp-a-pk, .bp.is-armed .bp-lit { opacity: 0; }

.bp.is-on .bp-draw { animation: bp-draw var(--d, 0.9s) var(--bp-ease) var(--t, 0s) both; }
.bp.is-on .bp-probe--no { animation: bp-draw 0.9s var(--bp-ease) var(--t, 0s) both, bp-dim 0.5s ease-out calc(var(--t, 0s) + 0.7s) both; }
.bp.is-on .bp-brk { animation: bp-part 0.8s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--t, 0s) + var(--k, 0) * 35ms) both; }
.bp.is-on .bp-brk--gap { animation: bp-squeeze 0.5s cubic-bezier(0.25, 1, 0.5, 1) var(--t, 0s) both; }
.bp.is-on .bp-x { animation: bp-pop 0.32s var(--bp-ease) var(--t, 0s) both; }
.bp.is-on .bp-cap { animation: bp-pop 0.45s var(--bp-ease) var(--t, 0s) both; }
.bp.is-on .bp-lit { animation: bp-fade 0.7s var(--bp-ease) var(--t, 0s) both; }
.bp.is-on .bp-pk { animation: bp-fade 0.6s ease-out var(--t, 0s) both, bp-flow 1.8s linear var(--t, 0s) 4; }
.bp.is-on .bp-a-pk { animation: bp-fade-a 0.6s ease-out var(--t, 0s) both, bp-flow 1.8s linear var(--t, 0s) 4; }
.bp.is-paused * { animation-play-state: paused !important; }

@keyframes bp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bp-part { from { transform: none; } to { transform: translateY(var(--dy, 0px)); } }
@keyframes bp-squeeze { from { opacity: 1; transform: none; } to { opacity: 0; transform: scaleY(0); } }
@keyframes bp-dim { from { opacity: 0.55; } to { opacity: 0.28; } }
@keyframes bp-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes bp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp-fade-a { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes bp-flow { /* one dash period per cycle: lane B 2+26, lane A 4+16 */
  from { stroke-dashoffset: var(--o, 0px); }
  to { stroke-dashoffset: calc(var(--o, 0px) - var(--p, 28px)); }
}

@media (prefers-reduced-motion: reduce) {
  .bp * { animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .bp__lanes { grid-template-columns: 1fr; }
  .bp__lane, .bp__lane:first-child { padding: 0; }
  .bp__lane + .bp__lane { margin-top: 28px; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--bp-line); }
  .bp__facts { grid-template-columns: 1fr; gap: 16px; }
  .lp-section .bp__cap { max-width: none; }
}
@media (max-width: 480px) {
  .bp:not(.bp--hero) { margin: 0 -16px; border-radius: 0; padding-left: 16px; padding-right: 16px; }
}

/* ---------- hero version (replaces the app-window mock; same primitives, no labels) ---------- */
.bp--hero {
  position: relative; width: min(100%, 460px); margin: 0; padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px;
  background: rgba(11, 26, 51, 0.55);
  box-shadow: 0 4px 8px rgba(11, 26, 51, 0.10), 0 24px 56px rgba(11, 26, 51, 0.22);
}
.bp--hero .hb-svg { margin: 0; }
.bp--hero .bp-s, .bp--hero .bp-pk { stroke: url(#hb-mask); }
.bp--hero .bp-a { stroke-width: 4; }
.bp--hero .bp-a-pk { stroke-width: 4; }
.bp--hero .bp-s { stroke-width: 2; opacity: 0.55; }
.bp--hero .bp-pk { stroke-width: 3; }
.bp--hero .bp-probe { stroke-width: 2; }
.bp--hero .bp-globe circle, .bp--hero .bp-globe ellipse, .bp--hero .bp-globe path { stroke-width: 2.4; }
.bp--hero .bp-dev rect { stroke-width: 2.4; }
.bp--hero .bp-dev path { stroke-width: 3; }
.hb-orbit { fill: none; stroke: var(--bp-blue-soft); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: 0.5; }
.lp-hero__visual--bp .lp-float--a { left: 0; top: 6px; }
.lp-hero__visual--bp .lp-float--b { right: 0; top: auto; bottom: 6px; }
@media (max-width: 991px) {
  .lp-hero__visual--bp { padding: 40px 0; }
  .lp-hero__visual--bp .lp-float--a { left: calc(50% - 230px); }
  .lp-hero__visual--bp .lp-float--b { right: calc(50% - 230px); }
}
@media (max-width: 560px) {
  .lp-hero__visual--bp { padding: 30px 0; }
  .bp--hero { padding: 10px; border-radius: 22px; }
  .lp-hero__visual--bp .lp-float--a { left: -4px; top: 0; }
  .lp-hero__visual--bp .lp-float--b { right: -4px; bottom: 0; }
}