/* ==========================================================
   Paamon homepage opening: one cinematic scene (10/2026)
   The live banner and the hero merged into a single full screen:
   waves, a pulse that lights "people · processes · technology",
   a bell, then the headline and the call to action — all within
   ~2 seconds. Afterwards only the waves and the pulse keep moving
   (pause button included).
   Then "the live diagnosis": pick a symptom, see where it may start.
   ========================================================== */

/* ---------- 1 · the scene ---------- */
.scene{--sc-gold:#D8B776;position:relative;overflow:hidden;color:#fff;
  min-height:clamp(560px,calc(100svh - 68px),860px);display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#26387D 0%,#1A2A5E 46%,#0F1A3D 100%)}
.scene .sc-waves{position:absolute;inset-inline:0;bottom:0;width:100%;height:46%}
.scene .sc-waves .w{animation:scDrift 26s linear infinite}
.scene .sc-waves .w2{animation-duration:36s;animation-direction:reverse}
.scene .sc-waves .w3{animation-duration:20s}
@keyframes scDrift{from{transform:translateX(0)}to{transform:translateX(-600px)}}

.scene-inner{position:relative;z-index:2;text-align:center;padding-block:3rem 7rem}
.sc-kicker{display:inline-flex;align-items:center;gap:1.1rem;margin:0 0 2rem;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.3rem,2.9vw,2.15rem);color:rgba(255,255,255,.92);letter-spacing:.01em}
.sc-kicker .wd{animation:scLight .7s ease-out both}
.sc-kicker .w1{animation-delay:.35s}
.sc-kicker .w2{animation-delay:.8s}
.sc-kicker .w3{animation-delay:1.25s}
.sc-kicker .sep{color:rgba(255,255,255,.35)}
@keyframes scLight{from{opacity:.12;text-shadow:0 0 0 transparent}55%{opacity:1;text-shadow:0 0 18px rgba(216,183,118,.85)}to{opacity:1;text-shadow:0 0 0 transparent}}
.sc-bell{width:clamp(30px,3.2vw,42px);height:auto;overflow:visible}
.sc-bell .draw{fill:none;stroke:var(--sc-gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:0;animation:scDraw .6s ease-out 1.2s both}
.sc-bell .dot{fill:var(--sc-gold);animation:scFade .3s 1.7s both}
@keyframes scDraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.sc-bell{transform-origin:50% 8%;animation:scRing .9s ease-in-out 1.75s both}
@keyframes scRing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}45%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}}

.scene h1{color:#fff;font-size:clamp(2.4rem,6.2vw,5.2rem);line-height:1.04;letter-spacing:-.015em;margin:0 auto;max-width:none}
.scene h1 span{display:block;animation:scRise .8s cubic-bezier(.2,.7,.2,1) both}
.scene h1 span:nth-child(1){animation-delay:1.4s}
.scene h1 span:nth-child(2){animation-delay:1.55s}
.scene .lede{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:rgba(255,255,255,.74);max-width:42rem;margin:1.6rem auto 0;text-wrap:balance;animation:scRise .8s cubic-bezier(.2,.7,.2,1) 1.8s both}
.scene .actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.2rem 1.8rem;margin-top:2.3rem;animation:scRise .8s cubic-bezier(.2,.7,.2,1) 2.05s both}
.scene .btn-quiet{color:#fff;box-shadow:inset 0 -2px 0 var(--sc-gold)}
@keyframes scRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes scFade{from{opacity:0}to{opacity:1}}
@media(min-width:900px){html[lang="he"] .scene h1 span{white-space:nowrap}}
html[lang="en"] .scene h1{font-size:clamp(2.1rem,4.6vw,3.8rem)}

/* the pulse line: a long heartbeat trace that keeps writing itself across the
   screen (lighting the three words on its first pass), holds, clears from the
   start and writes again — over a faint copy of the line, so it is never empty */
.sc-track{position:absolute;inset:0;pointer-events:none;z-index:1}
html[dir="ltr"] .sc-track{transform:scaleX(-1)}
.scene .ecg{position:absolute;inset-inline:0;bottom:11%;width:100%;height:clamp(44px,6vw,64px);overflow:visible}
.scene .ecg path{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.scene .ecg .base{opacity:.22}
.scene .ecg .run{stroke-dasharray:1000;stroke-dashoffset:1000;animation:ecgRun 4.2s linear .1s infinite;filter:drop-shadow(0 0 5px rgba(216,183,118,.55))}
@keyframes ecgRun{0%{stroke-dashoffset:1000}38%{stroke-dashoffset:0}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-1000}}

.sc-down{position:absolute;z-index:2;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;
  color:rgba(255,255,255,.72);text-decoration:none;font-size:.85rem;animation:scFade .8s 2.7s both}
.sc-down svg{width:20px;height:20px;animation:scNudge 2.4s ease-in-out 3.6s infinite}
.sc-down:hover{color:#fff}
@keyframes scNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.sc-ctl{position:absolute;z-index:3;bottom:1rem;inset-inline-end:1rem;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(15,26,61,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.65}
.sc-ctl:hover,.sc-ctl:focus-visible{opacity:1}
.sc-ctl svg{width:13px;height:13px}
.sc-ctl .i-play{display:none}.scene.paused .sc-ctl .i-play{display:block}.scene.paused .sc-ctl .i-pause{display:none}
.scene.paused .sc-waves .w,.scene.paused .ecg .run,.scene.paused .sc-down svg{animation-play-state:paused!important}
.scene :focus-visible{outline-color:var(--sc-gold)}

@media(max-width:600px){
  .scene-inner{padding-block:2.5rem 6.5rem}
  .sc-kicker{gap:.55rem;flex-wrap:wrap;justify-content:center}
  .scene .ecg{bottom:10%}
}

/* ---------- 2 · the live diagnosis ---------- */
.diag .sec-intro{max-width:46rem}
.diag-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.diag-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.diag-list li{border-bottom:1px solid var(--line)}
.diag-list button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;gap:.8rem;padding:1.05rem .4rem;
  font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.3;color:var(--navy);transition:color .2s,padding .2s}
.diag-list button::after{content:"";margin-inline-start:auto;width:.55rem;height:.55rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.35;flex-shrink:0}
html[dir="ltr"] .diag-list button::after{transform:rotate(-135deg)}
.diag-list button:hover{color:var(--burgundy);padding-inline-start:.8rem}
.diag-list button:focus-visible{outline:3px solid var(--burgundy);outline-offset:2px;border-radius:6px}
.diag-list button[aria-pressed="true"]{color:var(--burgundy);padding-inline-start:.8rem}
.diag-list button[aria-pressed="true"]::after{opacity:1}

.diag-out{position:sticky;top:5.5rem;min-height:21rem;border-radius:20px;background:var(--navy);color:#fff;padding:clamp(1.6rem,3.5vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.diag-empty{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;color:rgba(255,255,255,.92)}
.diag-empty small{display:block;margin-top:1rem;font-family:var(--sans);font-size:1rem;line-height:1.6;color:rgba(255,255,255,.62)}
.diag-res[hidden]{display:none}
.diag-res .was{display:block;font-size:1.05rem;color:rgba(255,255,255,.6);text-decoration:line-through;text-decoration-color:rgba(216,183,118,.9);text-decoration-thickness:2px}
.diag-res .maybe{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.2;margin:.7rem 0 1rem}
.diag-res .note{color:rgba(255,255,255,.72);margin-bottom:1.6rem}
.diag-res .acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.diag-res .btn-quiet{color:#fff;box-shadow:inset 0 -2px 0 #D8B776}
.diag-res.show .was{animation:scFade .4s both}
.diag-res.show .maybe{animation:scRise .6s cubic-bezier(.2,.7,.2,1) .25s both}
.diag-res.show .note,.diag-res.show .acts{animation:scFade .5s .55s both}
@media(max-width:820px){.diag-grid{grid-template-columns:1fr}.diag-out{position:static;min-height:0}.diag-list button::after,html[dir="ltr"] .diag-list button::after{transform:rotate(-45deg)}}