/* ═══════════════════════════════════════════════════════════════════════════
   LED Event Manager — warstwa animacji i interakcji.
   Ładowana po style.css. Wszystkie efekty wyłączają się przy prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --sa { syntax: '<number>'; inherits: false; initial-value: 0; }

/* ── Pasek postępu przewijania ────────────────────────────────────────────── */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 70; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: var(--spectrum); box-shadow: 0 0 14px rgba(168, 85, 247, .7); pointer-events: none; }

/* ── Nawigacja: aktywna sekcja ────────────────────────────────────────────── */
.nav__links a.is-active { color: var(--text); background: rgba(74, 158, 255, .1); box-shadow: inset 0 -2px 0 var(--blue); }

/* ── Warianty odsłaniania elementów ───────────────────────────────────────── */
.js .reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal[data-fx="pop"]:not(.is-in)   { transform: translateY(28px) scale(.92); filter: blur(8px); }
.js .reveal[data-fx="rise"]:not(.is-in)  { transform: translateY(50px) scale(.985); filter: blur(5px); }
.js .reveal[data-fx="slide"]:not(.is-in) { transform: translateX(-36px); filter: blur(4px); }
.js .reveal[data-fx="left"]:not(.is-in)  { transform: translateX(-64px) rotate(-1.2deg); filter: blur(4px); }
.js .reveal[data-fx="right"]:not(.is-in) { transform: translateX(64px) rotate(1.2deg); filter: blur(4px); }
.js .reveal[data-fx="zoom"]:not(.is-in)  { transform: scale(.94); filter: blur(7px); }

/* ── Nagłówki: słowa wjeżdżają po kolei ───────────────────────────────────── */
.js .fx-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .12em .03em .2em; margin: -.12em -.03em -.2em; }
.js .fx-words .wi { display: inline-block; transform: translateY(118%) rotate(5deg); transform-origin: 0 100%; opacity: 0; }
.js .fx-words.is-split-in .wi { transform: none; opacity: 1; transition: transform .95s var(--ease), opacity .6s ease; transition-delay: calc(var(--base, 0ms) + var(--i, 0) * 80ms); }
.js .fx-words .wi-block { display: inline-block; opacity: 0; transform: translateY(34px) scale(.96); filter: blur(12px); }
.js .fx-words.is-split-in .wi-block { opacity: 1; transform: none; filter: none; transition: transform 1s var(--ease), opacity .8s ease, filter .9s ease; transition-delay: calc(var(--base, 0ms) + var(--i, 0) * 80ms + 120ms); }

/* Gradient „wędruje” po napisie */
.spectrum-text { background-image: linear-gradient(90deg, #ff2fa0, #a855f7, #22d3ee, #a855f7, #ff2fa0); background-size: 220% 100%; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ── Hero: rotujące hasło ─────────────────────────────────────────────────── */
.hero__for { margin-top: 20px; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 500; color: var(--muted); }
.rotator { position: relative; display: inline-block; vertical-align: top; height: 1.6em; line-height: 1.6; overflow: hidden; font-weight: 700; transition: width .6s var(--ease); }
.rotator__word { position: absolute; left: 0; top: 0; line-height: inherit; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .7s var(--ease), opacity .45s ease; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.rotator__word.is-on { transform: none; opacity: 1; }
.rotator__word.is-out { transform: translateY(-105%); opacity: 0; }

/* Zielona kropka „działa offline” pulsuje */
.pill__dot { position: relative; }
.pill__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--green); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

/* ── Hero: pole LED reagujące na kursor ───────────────────────────────────── */
.hero__leds--fx { pointer-events: none; }

/* Zrzut w hero: pochylenie za kursorem, poświata i przebłysk */
.hero__stage .window { transform: rotateX(calc(4deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; }
.hero__stage:hover .window { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero__stage .window::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(560px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .11), transparent 55%); }
.hero__stage:hover .window::after { opacity: 1; }
.hero__stage .window::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%); transform: translateX(-130%); animation: sweep 8s ease-in-out 2s infinite; }
@keyframes sweep { 0%, 55% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
.chip { translate: calc(var(--px, 0) * var(--k, 1) * 18px) calc(var(--py, 0) * var(--k, 1) * 12px); transition: translate .35s ease-out; }
.chip--a { --k: 1.5; } .chip--b { --k: -1.1; } .chip--c { --k: 2; }

/* Przyciski: przebłysk i pulsowanie głównego CTA */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-125%); pointer-events: none; }
.btn--primary:hover::after { transform: translateX(125%); transition: transform .8s var(--ease); }
.hero__cta .btn--primary:not(:hover) { animation: glowpulse 3.4s ease-in-out infinite; }
@keyframes glowpulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 30px -8px rgba(74, 158, 255, .65); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 12px 46px -4px rgba(168, 85, 247, .85); }
}
.btn--lg { transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s, translate .25s ease-out; }

/* ── Tablica LED (ticker) ─────────────────────────────────────────────────── */
.ticker { position: relative; overflow: hidden; background: #05050b; border-block: 1px solid var(--line); }
.ticker canvas { display: block; width: 100%; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #05050b, transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, #05050b, transparent); }

/* ── Podświetlenie kart za kursorem ───────────────────────────────────────── */
.spot { --mx: 50%; --my: 50%; }
.card.spot, .proj-card.spot, .layout-card.spot, .number.spot, .tab.spot, .kpi.spot, .calc__big.spot {
  background-image: radial-gradient(380px circle at var(--mx) var(--my), rgba(74, 158, 255, var(--sa)), transparent 62%);
  transition: --sa .4s ease, border-color .25s, transform .3s var(--ease), background-color .25s;
}
.spot:hover { --sa: .17; }

/* ── „Dlaczego”: skreślanie starego i odhaczanie nowego ───────────────────── */
.js .panel--old .panel__list li { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: transparent; transition: text-decoration-color .8s ease, color .8s ease; transition-delay: calc(var(--n, 0) * 170ms + 600ms); }
.js .panel--old.is-in .panel__list li { text-decoration-color: rgba(248, 113, 113, .85); color: #6d7590; }
.js .panel--new .panel__list li { opacity: 0; transform: translateX(16px); transition: opacity .6s ease, transform .7s var(--ease); transition-delay: calc(var(--n, 0) * 160ms + 500ms); }
.js .panel--new.is-in .panel__list li { opacity: 1; transform: none; }
.js .panel--new .panel__list li .icon { transform: scale(0); transition: transform .55s cubic-bezier(.3, 1.7, .5, 1); transition-delay: calc(var(--n, 0) * 160ms + 720ms); }
.js .panel--new.is-in .panel__list li .icon { transform: scale(1); }

/* ── Eksplorator: autoodtwarzanie, pasek postępu i „przewinięcie” zrzutu ──── */
.tab { position: relative; overflow: hidden; }
.explorer.is-auto .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--spectrum); transform-origin: 0 50%; animation: tabfill var(--auto, 6500ms) linear forwards; }
.explorer.is-auto:hover .tab[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes tabfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); filter: brightness(1.9) saturate(1.4); }
  60% { filter: brightness(1.25); }
  to { clip-path: inset(0 0 0 0); filter: none; }
}
.window img.fx-wipe { animation: wipe .8s var(--ease) both; }

/* Kaskada słupków w kalkulatorze */
.bars i { animation: barin .4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes barin { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: .9; } }

/* ── Historia „krok po kroku” (przyklejony podgląd) ───────────────────────── */
.story__view { display: none; }
@media (min-width: 1000px) {
  .story { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 5vw, 76px); align-items: start; }
  .story .steps { display: block; }
  .story .step { display: flex; flex-direction: column; justify-content: center; min-height: 62vh; margin: 0; padding: 26px 0 26px 30px; background: transparent; border: 0; border-left: 2px solid var(--line-2); border-radius: 0; transition: opacity .6s ease, border-color .6s ease, transform .6s var(--ease); }
  .story .step:hover { transform: none; }
  .js .story .step.reveal.is-in { opacity: .34; transition-delay: 0s; }
  .js .story .step.reveal.is-in.is-active { opacity: 1; border-left-color: var(--blue); transform: translateX(6px); }
  .story .step.is-active { border-left-color: var(--blue); }
  .story .step::after { display: none; }
  .story .step__mod { margin-top: 18px; padding-top: 0; }
  .story .step h3 { font-size: 1.45rem; }
  .story .step p { font-size: 1rem; max-width: 42ch; }
  .story__view { display: block; position: sticky; top: max(96px, calc(50vh - 250px)); }
  .story__imgs { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0a14; }
  .story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(1.02); transition: opacity .8s ease, transform 3.2s var(--ease); }
  .story__img.is-active { opacity: 1; transform: scale(var(--z, 1.25)); }
  .story__dots { position: absolute; right: 14px; top: 50%; z-index: 3; display: grid; gap: 8px; transform: translateY(-50%); }
  .story__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: transform .4s var(--ease), background .4s; }
  .story__dots i.is-active { background: var(--blue); transform: scale(1.5); box-shadow: 0 0 10px var(--blue); }
  .story__badge { position: absolute; left: 14px; bottom: 14px; z-index: 3; padding: 6px 11px; border-radius: 9px; background: rgba(6, 6, 12, .82); border: 1px solid var(--line-2); backdrop-filter: blur(8px); font-family: var(--mono); font-size: .74rem; color: var(--blue); }
}

/* ── Widok 3D: obracana scena z prawdziwych klatek aplikacji ──────────────── */
.orbit { max-width: 1120px; margin-inline: auto; }
.orbit__scenes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.orbit__window { position: relative; }
.orbit__window::before { content: ""; position: absolute; inset: 8% 6% -6% 6%; z-index: -1; background: var(--spectrum); filter: blur(90px); opacity: .24; border-radius: 40px; }
.orbit__view { position: relative; aspect-ratio: 16 / 10; background: #0a0a14; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; }
.orbit__view.is-drag { cursor: grabbing; }
.orbit__view:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.orbit__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.orbit__hint { position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px; border-radius: 999px; background: rgba(6, 6, 12, .8); border: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .82rem; color: var(--muted); transition: opacity .5s; pointer-events: none; white-space: nowrap; }
.orbit__hint .icon { animation: nudge 2.2s ease-in-out infinite; color: var(--blue); }
@keyframes nudge { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
.orbit__hint.is-gone { opacity: 0; }
.orbit__load { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px; background: rgba(255, 255, 255, .06); transition: opacity .6s .3s; }
.orbit__load i { display: block; height: 100%; width: 0; background: var(--spectrum); transition: width .2s linear; }
.orbit__load.is-done { opacity: 0; }
.orbit__range { display: block; width: min(100%, 520px); margin: 18px auto 0; accent-color: var(--blue); }
.orbit__caption { margin-top: 12px; text-align: center; font-size: .88rem; color: var(--dim); }

/* ── Piaskownica: poprowadź sygnał ────────────────────────────────────────── */
.sandbox { margin-top: clamp(44px, 6vw, 80px); border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(20px, 3vw, 38px); background: radial-gradient(60% 90% at 100% 0%, rgba(74, 158, 255, .1), transparent 60%), linear-gradient(180deg, rgba(20, 20, 38, .9), rgba(10, 10, 20, .95)); box-shadow: 0 40px 100px -56px rgba(74, 158, 255, .5); }
.sandbox__head h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.02em; }
.sandbox__head p { margin-top: 8px; color: var(--muted); max-width: 62ch; }
.sandbox__body { display: grid; gap: 26px; margin-top: 24px; }
@media (min-width: 900px) { .sandbox__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.sandbox__board { position: relative; padding: 10px; border-radius: 16px; background: #07070f; border: 1px solid var(--line); }
.sandbox__grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.cab { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; cursor: crosshair; background: repeating-conic-gradient(rgba(255, 255, 255, .07) 0 25%, rgba(255, 255, 255, .025) 0 50%) 0 0 / 50% 50%; transition: transform .15s ease, background .3s ease, box-shadow .3s ease; }
.cab:hover { transform: scale(1.09); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset; z-index: 2; }
.cab.is-owned { background: var(--cbg, rgba(74, 158, 255, .4)); box-shadow: 0 0 0 1px var(--c, #4a9eff) inset; }
.cab.is-head { box-shadow: 0 0 0 2px #fff inset, 0 0 14px var(--c, #4a9eff); animation: headpulse 1s ease-in-out infinite; }
@keyframes headpulse { 50% { transform: scale(1.07); } }
.sandbox__lines { position: absolute; left: 10px; top: 10px; pointer-events: none; overflow: visible; }
.sandbox__lines line { stroke-linecap: round; stroke-width: 3; stroke-dasharray: 7 6; animation: dashflow 1s linear infinite; }
.sandbox__lines polygon { stroke: none; }
@keyframes dashflow { to { stroke-dashoffset: -26; } }
.sandbox__side { display: grid; gap: 16px; align-content: start; }
.meter__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.meter__label b { font-family: var(--mono); font-size: 1rem; letter-spacing: -.01em; color: var(--text); text-transform: none; }
.meter__bar { margin-top: 10px; height: 16px; border-radius: 9px; background: #07070f; border: 1px solid var(--line-2); overflow: hidden; }
.meter__bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--c, var(--blue)); border-radius: 9px; transition: width .35s var(--ease), background .3s; }
.meter.is-warn .meter__bar i { background: var(--amber); }
.meter.is-over .meter__bar i { background: #f87171; animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.meter__nums { margin-top: 8px; display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sandbox__msg { min-height: 3.2em; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--muted); font-size: .92rem; transition: border-color .3s, background .3s, color .3s; }
.sandbox__msg.is-warn { border-color: rgba(251, 191, 36, .5); color: var(--amber); background: rgba(251, 191, 36, .06); }
.sandbox__msg.is-over { border-color: rgba(248, 113, 113, .55); color: #fca5a5; background: rgba(248, 113, 113, .07); }
.sandbox__msg.is-done { border-color: rgba(74, 222, 128, .5); color: var(--green); background: rgba(74, 222, 128, .07); }
.sandbox__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sandbox__acts .btn { min-height: 40px; padding: 0 14px; font-size: .88rem; }
.sandbox__acts .btn.is-hot { border-color: var(--blue); color: var(--blue); animation: glowpulse 1.6s ease-in-out infinite; }
.sandbox__cover { font-family: var(--mono); font-size: .8rem; color: var(--dim); }
.sandbox.is-done .cab.is-owned { animation: sparkle .9s ease-in-out; animation-delay: calc(var(--k, 0) * 18ms); }
@keyframes sparkle { 40% { transform: scale(1.14); filter: brightness(1.8); } }

/* ── Preferencje: mniej ruchu ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .spectrum-text, .pill__dot::after, .hero__stage .window::before, .hero__cta .btn--primary, .orbit__hint .icon, .sandbox__lines line, .cab.is-head { animation: none !important; }
  .js .reveal[data-fx] { transform: none !important; filter: none !important; }
  .js .fx-words .wi, .js .fx-words .wi-block { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .panel--old .panel__list li { text-decoration-color: rgba(248, 113, 113, .85); }
  .js .panel--new .panel__list li, .js .panel--new .panel__list li .icon { opacity: 1 !important; transform: none !important; }
  .story__img { transition: opacity .2s !important; transform: none !important; }
  .hero__stage .window, .chip { transform: none; translate: none; }
  .window img.fx-wipe { animation: none; }
}

/* Wjazdy z boku nie mogą poszerzać strony (clip nie tworzy kontenera przewijania, więc sticky działa) */
.section, .footer { overflow-x: clip; }

/* Bez JavaScriptu: elementy, które bez skryptu byłyby puste, znikają, a pierwszy obraz historii jest widoczny */
html:not(.js) .ticker, html:not(.js) #obrot, html:not(.js) .sandbox, html:not(.js) .hero__for { display: none; }
html:not(.js) .story__img:first-of-type { opacity: 1; }