/* ==========================================================
   Paamon live banner — "people · processes · technology"
   A coded version of the approved brand film (Paamon_Pulse v11):
   waves, a travelling pulse that lights up three words, then the
   pulse becomes a bell with the name. Brand palette, 14s seamless loop.
   Markup: see the .bb block on the homepage.
   ========================================================== */
.bb{--bb-navy:#1A2A5E;--bb-deep:#101B40;--bb-gold:#D8B776;--bb-ink:#FFFFFF;--bb-soft:rgba(255,255,255,.72);--bb-t:14s;
  position:relative;height:clamp(250px,28vw,360px);overflow:hidden;color:var(--bb-ink);
  background:radial-gradient(120% 140% at 50% 0%,#24367A 0%,var(--bb-navy) 45%,var(--bb-deep) 100%)}
.bb *{animation-duration:var(--bb-t);animation-iteration-count:infinite;animation-timing-function:linear}
.bb.paused *{animation-play-state:paused!important}

/* waves */
.bb-waves{position:absolute;inset:0;width:100%;height:100%}
.bb-waves .w{animation-name:bbDrift;animation-duration:24s}
.bb-waves .w2{animation-duration:34s;animation-direction:reverse}
.bb-waves .w3{animation-duration:18s}
@keyframes bbDrift{from{transform:translateX(0)}to{transform:translateX(-600px)}}

/* baseline + travelling pulse */
.bb-line{position:absolute;inset-inline:6%;top:70%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(216,183,118,.55) 12%,rgba(216,183,118,.55) 88%,transparent)}
.bb-track{position:absolute;inset:0;pointer-events:none}
html[dir="ltr"] .bb-track{transform:scaleX(-1)}
.bb-spike{position:absolute;top:70%;width:64px;height:44px;margin:-34px 0 0 -32px;left:104%;animation-name:bbTravel;animation-timing-function:linear}
.bb-spike svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(216,183,118,.8))}
@keyframes bbTravel{0%{left:104%;opacity:1}55%{left:-4%;opacity:1}55.1%,100%{left:104%;opacity:0}}

/* the three words */
.bb-words{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.bb-words li{position:absolute;top:44%;transform:translate(50%,-50%);font-family:'Frank Ruhl Libre','David Libre',Georgia,serif;font-weight:700;font-size:clamp(1.2rem,3.4vw,2.8rem);line-height:1;white-space:nowrap;opacity:0}
html[dir="rtl"] .bb-words li:nth-child(1){right:20%}
html[dir="rtl"] .bb-words li:nth-child(2){right:50%}
html[dir="rtl"] .bb-words li:nth-child(3){right:80%}
html[dir="ltr"] .bb-words li{transform:translate(-50%,-50%)}
html[dir="ltr"] .bb-words li:nth-child(1){left:20%}
html[dir="ltr"] .bb-words li:nth-child(2){left:50%}
html[dir="ltr"] .bb-words li:nth-child(3){left:80%}
/* explicit names (no var() in animation-name: older Safari ignores it) */
.bb-words li:nth-child(1){animation-name:bbW1}.bb-words li:nth-child(2){animation-name:bbW2}.bb-words li:nth-child(3){animation-name:bbW3}
@keyframes bbW1{0%,11%{opacity:0;filter:blur(6px)}14%{opacity:1;filter:blur(0)}58%{opacity:1;filter:blur(0)}63%,100%{opacity:0;filter:blur(4px)}}
@keyframes bbW2{0%,26%{opacity:0;filter:blur(6px)}29%{opacity:1;filter:blur(0)}58%{opacity:1;filter:blur(0)}63%,100%{opacity:0;filter:blur(4px)}}
@keyframes bbW3{0%,41%{opacity:0;filter:blur(6px)}44%{opacity:1;filter:blur(0)}58%{opacity:1;filter:blur(0)}63%,100%{opacity:0;filter:blur(4px)}}

/* the bell and the name */
.bb-sign{position:absolute;inset-inline:0;bottom:33%;display:flex;flex-direction:column;align-items:center;gap:.15rem;opacity:0;animation-name:bbSign}
.bb-bell{width:clamp(48px,6vw,84px);height:auto;overflow:visible;margin-bottom:.35rem}
.bb-bell .draw{fill:none;stroke:var(--bb-gold);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation-name:bbDraw;filter:drop-shadow(0 0 5px rgba(216,183,118,.6))}
.bb-bell .dot{fill:var(--bb-gold);opacity:0;animation-name:bbDots}
.bb-name{font-family:'Frank Ruhl Libre','David Libre',Georgia,serif;font-weight:700;font-size:clamp(1.55rem,3.4vw,2.5rem);line-height:1.05}
.bb-tag{font-size:clamp(.82rem,1.35vw,1.02rem);color:var(--bb-soft)}
.bb-name,.bb-tag{opacity:0;animation-name:bbName}
@keyframes bbSign{0%,61%{opacity:0}62%,92%{opacity:1}99%,100%{opacity:0}}
@keyframes bbDraw{0%,62%{stroke-dashoffset:420}74%,100%{stroke-dashoffset:0}}
@keyframes bbDots{0%,72%{opacity:0}75%,100%{opacity:1}}
@keyframes bbName{0%,73%{opacity:0;transform:translateY(6px)}78%,100%{opacity:1;transform:none}}

/* pause / play (needed: the motion loops) */
.bb-ctl{position:absolute;bottom:.75rem;inset-inline-end:.75rem;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(16,27,64,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.65;transition:opacity .2s;animation:none!important}
.bb-ctl:hover,.bb-ctl:focus-visible{opacity:1}
.bb-ctl:focus-visible{outline:3px solid var(--bb-gold);outline-offset:2px}
.bb-ctl svg{width:13px;height:13px;animation:none!important}
.bb-ctl .i-play{display:none}.bb.paused .bb-ctl .i-play{display:block}.bb.paused .bb-ctl .i-pause{display:none}


/* Motion stays on for everyone (Inbal, 08.10.2026): it is slow and calm, and the
   pause button covers the accessibility requirement for moving content. */

/* ===== slim variant: the connecting strip on inner pages =====
   The three words stay in place; under them a long pulse line keeps writing
   itself across the width, over a faint copy. Pause button stops it all. */
.bb--slim{height:clamp(70px,7.4vw,90px)}
.bb--slim .bb-sign,.bb--slim .sr-only{display:none}
.bb--slim .bb-words li{top:34%;opacity:1;filter:none;animation:none;font-size:clamp(.95rem,1.7vw,1.3rem);font-weight:600;letter-spacing:.01em}
.bb--slim .bb-track{position:absolute;inset:0;transform:none}
html[dir="ltr"] .bb--slim .bb-track{transform:scaleX(-1)}
.bb--slim .ecg{position:absolute;inset-inline:0;bottom:4%;width:100%;height:42%;overflow:visible}
.bb--slim .ecg path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.bb--slim .ecg .base{opacity:.22;animation:none!important}
.bb--slim .ecg .run{stroke-dasharray:1000;stroke-dashoffset:1000;animation:bbEcg 4.2s linear .15s infinite!important;filter:drop-shadow(0 0 4px rgba(216,183,118,.5))}
@keyframes bbEcg{0%{stroke-dashoffset:1000}38%{stroke-dashoffset:0}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-1000}}
.bb--slim .bb-waves{height:240%;top:-70%}
.bb--slim .bb-ctl{width:26px;height:26px;bottom:auto;top:50%;margin-top:-13px;inset-inline-end:.6rem}
.bb--slim .bb-ctl svg{width:10px;height:10px}
@media(max-width:480px){.bb--slim .bb-ctl{top:.4rem;margin-top:0}}