/* eNoWork: wspólny wygląd prawego panelu rejestracji i logowania (/main/signup.html, /main/signin.html).
   Granat z wolnymi poświatami, żywa siatka kwadratów, telefon z prawdziwym ekranem pod nieruchomą ramką, plakietki.
   Scena = siatka 3 wierszy o stałej wysokości (góra: logo [+ powitanie], środek: telefon, dół: podpis), więc telefon
   ma ten sam rozmiar i to samo położenie na obu stronach, niezależnie od tego, co jest nad nim i pod nim.
   Sterowanie w /main/js/auth-panel.js. Układ kolumn (szerokość, display) ustawia każda strona u siebie;
   ten plik ładować PO stylach strony, bo nadpisuje .enowork-su-right (position, tło). */
      /* ===== Prawa strona v4: granat z poświatami, żywa siatka, telefon z prawdziwym ekranem, scenki ===== */
      .enowork-su-right{position:relative;overflow:hidden;background:#26215C;color:#fff;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;isolation:isolate;container-type:inline-size}
      .enowork-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
      .enowork-glows{position:absolute;inset:-25%;transition:transform 1.6s cubic-bezier(.22,.8,.2,1);will-change:transform}
      .enowork-glow{position:absolute;border-radius:50%;will-change:transform}
      .enowork-glow.is-a{width:62%;height:62%;left:4%;top:2%;background:radial-gradient(circle,rgba(122,90,248,.55) 0%,rgba(122,90,248,0) 62%);animation:enowork-drift-a 28s ease-in-out infinite alternate}
      .enowork-glow.is-b{width:58%;height:58%;left:40%;top:42%;background:radial-gradient(circle,rgba(122,90,248,.42) 0%,rgba(122,90,248,0) 62%);animation:enowork-drift-b 34s ease-in-out infinite alternate}
      .enowork-glow.is-c{width:40%;height:40%;left:54%;top:6%;background:radial-gradient(circle,rgba(167,139,250,.28) 0%,rgba(167,139,250,0) 60%);animation:enowork-drift-c 24s ease-in-out infinite alternate}
      @keyframes enowork-drift-a{to{transform:translate3d(12%,10%,0)}}
      @keyframes enowork-drift-b{to{transform:translate3d(-14%,-8%,0)}}
      @keyframes enowork-drift-c{to{transform:translate3d(-10%,14%,0)}}
      .enowork-su-right[data-role="worker"] .enowork-glows{transform:translate3d(-9%,-7%,0)}
      .enowork-su-right[data-role="company_owner"] .enowork-glows{transform:translate3d(9%,-6%,0)}
      .enowork-su-right[data-role="agency_owner"] .enowork-glows{transform:translate3d(-7%,9%,0)}
      .enowork-su-right[data-role="recruiter"] .enowork-glows{transform:translate3d(9%,8%,0)}
      .enowork-grid{--cell:56px;position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:var(--cell) var(--cell);-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 46%,transparent 30%,#000 82%);mask-image:radial-gradient(ellipse 75% 65% at 50% 46%,transparent 30%,#000 82%)}
      .enowork-cell{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);background:rgba(167,139,250,.24);box-shadow:inset 0 0 0 1px rgba(196,181,253,.28);opacity:0;transition:opacity .9s ease}
      .enowork-cell.is-on{opacity:1;transition-duration:.35s}

      .enowork-stage{--gap-top:clamp(14px,3vh,30px);--gap-cap:clamp(18px,3.5vh,34px);position:relative;z-index:1;display:grid;grid-template-columns:100%;grid-template-rows:calc(84px + var(--gap-top)) auto calc(128px + var(--gap-cap));align-content:center;justify-items:center;width:100%;height:100%}
      /* góra: logo (rejestracja) albo logo + powitanie (logowanie) jako jedna zwarta grupa, dosunięta do telefonu */
      .enowork-stage-top{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;width:100%;height:100%;padding-bottom:var(--gap-top);box-sizing:border-box}
      .enowork-stage-logo{display:block;height:40px;width:auto;margin:0}
      /* dół: podpis pod telefonem (hasło albo nazwa roli + punkty); dłuższy tekst wychodzi w dół, telefon stoi */
      .enowork-caption{position:relative;align-self:start;width:min(440px,88%);padding-top:var(--gap-cap);text-align:center}
      .enowork-caption .enowork-tagline{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.78)}
      /* telefon: rzeczywista szerokość i wysokość (bez transform: scale) */
      .enowork-device-wrap{--dh:min(56vh,560px,100cqw);position:relative;height:var(--dh);width:calc(var(--dh) * .4928);perspective:1400px}
      .enowork-device-tilt{position:relative;width:100%;height:100%;transform:rotateY(-9deg) rotateX(4deg)}
      .enowork-device-float{width:100%;height:100%;animation:enowork-bob 6s ease-in-out infinite alternate}
      @keyframes enowork-bob{from{transform:translate3d(0,-7px,0)}to{transform:translate3d(0,8px,0)}}
      /* cień pod telefonem jako box-shadow osobnej warstwy pod ekranem (filtr na urządzeniu rozmywał też ekran) */
      .enowork-device{position:relative;width:100%;height:100%}
      .enowork-device::before{content:"";position:absolute;left:.7%;right:.7%;top:.2%;bottom:.2%;border-radius:15% / 7.4%;box-shadow:0 30px 40px rgba(8,4,32,.45);pointer-events:none}
      .enowork-device-shadow{position:absolute;left:14%;right:14%;bottom:-6%;height:6%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(5,2,25,.6) 0%,rgba(5,2,25,0) 70%);animation:enowork-shadow 6s ease-in-out infinite alternate;pointer-events:none}
      @keyframes enowork-shadow{from{transform:scaleX(.86);opacity:.55}to{transform:scaleX(1);opacity:.9}}
      /* Ekran: kontener dokładnie pod wyświetlaczem ramki, overflow hidden + zaokrąglenie wyświetlacza (rogi i tak kryje
         ramka phone-frame, nieruchoma warstwa na wierzchu, z-index 2). Bez filtrów, masek i translateZ: ekran się nie rozmywa. */
      .enowork-screen{position:absolute;left:5.2%;top:2.3%;width:89.8%;height:95.4%;z-index:1;overflow:hidden;border-radius:11.3% / 5.25%;background:#0d0b1a}
      /* Każdy ekran = jeden obraz (sam wyświetlacz, srcset). Zmiana: nowy wchodzi na wierzch i przenika się
         (opacity 0→1, scale 1.03→1, 350 ms), stary pod nim gaśnie i znika po przejściu. will-change tylko na czas przejścia. */
      .enowork-slide{position:absolute;inset:0}
      .enowork-slide.is-enter{opacity:0;transform:scale(1.03)}
      .enowork-slide.is-anim{transition:opacity .35s ease,transform .35s cubic-bezier(.22,.8,.2,1);will-change:opacity,transform}
      .enowork-slide img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
      .enowork-frame{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

      .enowork-badges{position:absolute;inset:0;pointer-events:none}
      .enowork-badge{--bw:clamp(176px,15vw,236px);position:absolute;width:var(--bw);display:flex;gap:11px;align-items:center;padding:11px 13px;background:#fff;color:#26215C;border-radius:16px;box-shadow:0 18px 40px rgba(8,4,32,.38),0 2px 6px rgba(8,4,32,.18);opacity:0;transform:translate3d(0,16px,0) scale(.94);transition:opacity .45s ease,transform .6s cubic-bezier(.22,.9,.25,1.12)}
      .enowork-badge.is-in{opacity:1;transform:none}
      .enowork-badge.is-out{opacity:0;transition:opacity .35s ease,transform .45s ease-in}
      .enowork-badge.slot-tl{left:calc(38% - var(--bw));top:9%}
      .enowork-badge.slot-r{left:64%;top:36%}
      .enowork-badge.slot-bl{left:calc(42% - var(--bw));top:66%}
      .enowork-badge.slot-tl.is-out,.enowork-badge.slot-bl.is-out{transform:translate3d(-56px,0,0) scale(.96)}
      .enowork-badge.slot-r.is-out{transform:translate3d(56px,0,0) scale(.96)}
      .enowork-badge-ico{flex:0 0 36px;height:36px;border-radius:11px;background:#f1edff;color:#7A5AF8;display:flex;align-items:center;justify-content:center}
      .enowork-badge-ico svg{width:19px;height:19px}
      .enowork-badge-ico.is-green{background:#ecfdf5;color:#16a34a}
      .enowork-badge-txt{min-width:0;flex:1 1 auto}
      .enowork-badge-title{font-size:13.5px;font-weight:700;line-height:1.25;color:#26215C}
      .enowork-badge-sub{margin-top:2px;font-size:12px;line-height:1.3;color:#64748b}
      .enowork-badge-num{display:inline-block;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#26215C;font-variant-numeric:tabular-nums}
      .enowork-badge-num.is-pop{animation:enowork-pop .35s ease}
      @keyframes enowork-pop{40%{transform:scale(1.18)}}
      .enowork-badge.enowork-chat{--bw:clamp(196px,17vw,262px);flex-direction:column;align-items:stretch;gap:8px}
      .enowork-chat-head{display:flex;align-items:center;gap:8px}
      .enowork-avatar{flex:0 0 28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#9b87ff,#7A5AF8);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
      .enowork-chat-name{font-size:12.5px;font-weight:700;line-height:1.2;color:#26215C}
      .enowork-chat-meta{font-size:11px;line-height:1.2;color:#94a3b8}
      .enowork-chat-bubble{display:grid;background:#f3f0ff;border-radius:4px 14px 14px 14px;padding:9px 11px;font-size:14px;line-height:1.4;color:#26215C}
      .enowork-chat-bubble > span{grid-area:1/1;transition:opacity .35s ease,transform .35s ease}
      .enowork-chat-bubble > span:not(.is-hidden):not(.is-gone):not(.is-sizer){transition:opacity .45s ease .3s,transform .45s ease .3s}
      .enowork-chat-bubble > .is-hidden{opacity:0;transform:translate3d(0,7px,0)}
      .enowork-chat-bubble > .is-gone{opacity:0;transform:translate3d(0,-7px,0)}
      .enowork-chat-bubble > .is-sizer{visibility:hidden}
      .enowork-chat-foot{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#7A5AF8;opacity:0;transform:translate3d(0,4px,0);transition:opacity .45s ease,transform .45s ease}
      .enowork-chat-foot.is-on{opacity:1;transform:none}
      .enowork-chat-foot .fi{font-size:12px;border-radius:2px}
      .enowork-chat-foot svg{width:12px;height:12px}
      .enowork-caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:#7A5AF8;animation:enowork-caret 1s steps(1) infinite}
      @keyframes enowork-caret{50%{opacity:0}}
      /* Tablet (panel ~350 px): plakietki jedna nad drugą: nad telefonem, na jego środku i pod nim */
      @container (max-width:400px){
        .enowork-device-wrap{--dh:min(40vh,100cqw);margin-top:min(100px,11vh);margin-bottom:min(96px,10vh)}
        .enowork-badge{--bw:172px;padding:9px 11px;gap:9px}
        .enowork-badge.enowork-chat{--bw:184px}
        .enowork-badge.slot-tl,.enowork-badge.slot-r,.enowork-badge.slot-bl{left:50%;right:auto;margin-left:calc(var(--bw) / -2)}
        .enowork-badge.slot-tl{top:auto;bottom:calc(100% + 10px)}
        .enowork-badge.slot-r{top:30%}
        .enowork-badge.slot-bl{top:calc(100% + 16px)}
        .enowork-badge-ico{flex-basis:30px;height:30px}
        .enowork-chat-bubble{font-size:13px}
      }

      @keyframes enowork-rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
      .enowork-su-right.is-paused *{animation-play-state:paused !important}
      @media (prefers-reduced-motion: reduce){
        .enowork-glow,.enowork-device-float,.enowork-device-shadow,.enowork-caret,.enowork-badge-num{animation:none !important}
        .enowork-glows,.enowork-slide,.enowork-badge,.enowork-cell,.enowork-chat-bubble > span,.enowork-chat-foot{transition:none !important}
      }