/* ReadEden — „podróż" (scrollytelling na stronie głównej). Domyślnie WYŁĄCZONA (display:none) — włącza ją journey.js klasą body.journey-on, tylko na desktopie i bez prefers-reduced-motion. Bez JS / na telefonie strona zostaje klasyczna. Wszystko scope'owane pod #journey, żeby nie gryźć styles.css. */ #journey{display:none} html.journey-on #journey{display:block} html.journey-on .hero{display:none} /* klasyczny hero chowamy — podróż go zastępuje */ /* nagłówek serwisu: podczas podróży CAŁKOWICIE poza układem (fixed + wysunięty), żeby nie zostawiał beżowego pasa u góry; wjeżdża przy klasycznej treści. Klasa .journey-on siedzi na i jest nadawana skryptem w PRZED pierwszym renderem — dzięki temu pasek nie miga przy odświeżeniu. */ html.journey-on header.site{position:fixed;top:0;left:0;right:0;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .45s ease,opacity .45s ease} html.journey-on.jpast header.site{transform:none;opacity:1;pointer-events:auto} #journey{height:700vh;position:relative;background:#14100a; --jink:#F2E8D5;--jgold:#C9A273;--jgold2:#E0C079} #jstage{position:sticky;top:0;height:100vh;overflow:hidden;color:var(--jink)} /* obraz pokoju + nakładki — rozmiar liczony w JS (cover z ochroną dołu: pies!) */ #jart{position:absolute;will-change:transform;transform-origin:50% 92%} #jart img{position:absolute;inset:0;width:100%;height:100%;display:block} #jart svg{position:absolute;inset:0;width:100%;height:100%} #jdusk{position:absolute;inset:0;background:linear-gradient(180deg,#1a2440 0%,#2a1f33 60%,#120d08 100%);mix-blend-mode:multiply;opacity:0;pointer-events:none} #jglowT,#jglowF{position:absolute;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;filter:blur(2px)} #jglowT{background:radial-gradient(circle,rgba(255,196,110,.55) 0%,rgba(255,170,80,.18) 45%,transparent 70%)} #jglowF{background:radial-gradient(circle,rgba(255,210,140,.6) 0%,rgba(255,180,90,.2) 45%,transparent 70%)} #jvignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 55%,rgba(10,7,4,.55) 100%)} #jcloseup{position:absolute;inset:0;pointer-events:none;opacity:0;background:url('img/library-room_part.webp?v=1') center/cover no-repeat} .jmote{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,230,180,.5);filter:blur(1.2px);animation:jfloat 14s linear infinite;pointer-events:none} @keyframes jfloat{0%{transform:translateY(30px);opacity:0}12%{opacity:.7}85%{opacity:.4}100%{transform:translateY(-80vh);opacity:0}} /* teksty podróży */ .jcap{position:absolute;left:50%;transform:translateX(-50%) translateY(24px);opacity:0;text-align:center;width:min(680px,88vw);pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.9)} .jcap h1,.jcap h2{color:var(--jink);margin:0} .jcap h1{font-size:clamp(38px,7vw,72px);font-weight:700;line-height:1.06;letter-spacing:-.5px} .jcap h2{font-size:clamp(26px,4.6vw,44px);font-weight:700;line-height:1.15} .jcap p{font-size:clamp(16px,2.2vw,21px);margin:12px 0 0;color:#E7DAC0} .jbrand{display:block;font-size:clamp(20px,2.8vw,28px);letter-spacing:.08em;color:var(--jgold2);margin-bottom:14px;font-weight:600} #jcap1{top:24vh} #jcap2{top:8vh} #jcap3{top:8vh} #jcap4{top:10vh} #jcap5{top:50%} /* finał w idealnym centrum — JS domyka -50% */ /* licznik przeczytanych */ #jcounter{position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none; background:rgba(20,14,8,.55);border:1px solid rgba(201,162,115,.5);border-radius:999px;padding:7px 20px;font-size:15px;color:var(--jgold2);backdrop-filter:blur(4px)} /* karta ukończenia */ #jfin{position:absolute;top:14vh;left:50%;transform:translateX(-50%) scale(.8);opacity:0;pointer-events:none; background:rgba(28,20,12,.78);border:1px solid rgba(201,162,115,.55);border-radius:22px;padding:26px 40px;text-align:center;backdrop-filter:blur(6px); box-shadow:0 20px 60px rgba(0,0,0,.5);color:var(--jink)} #jfin .big{font-size:clamp(30px,5vw,46px);font-weight:700} #jfin .sub{margin-top:6px;color:#E7DAC0;font-size:clamp(15px,2vw,19px)} #jfin .stats{display:flex;gap:26px;justify-content:center;margin-top:14px;color:var(--jgold2);font-size:14.5px} #jfin .stats b{display:block;font-size:22px;color:var(--jink)} /* odznaki */ .jach{position:absolute;opacity:0;pointer-events:none;transform:scale(.7);color:var(--jink)} .jachIn{display:flex;gap:12px;align-items:center;cursor:pointer;user-select:none; background:rgba(28,20,12,.82);border:1px solid rgba(201,162,115,.55);border-radius:16px;padding:12px 18px;backdrop-filter:blur(6px); box-shadow:0 12px 40px rgba(0,0,0,.45);transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .18s,border-color .18s} .jachIn:hover{transform:scale(1.07) rotate(-1deg);border-color:var(--jgold2);box-shadow:0 16px 50px rgba(201,162,115,.28)} .jachIn:active{transform:scale(.96)} .jach .ic{font-size:26px} .jach .t{font-weight:700;font-size:15.5px;line-height:1.2} .jach .d{font-size:12.5px;color:#CBBB9C} #jach1{top:15vh;left:6vw} #jach2{top:32vh;right:5vw} #jach3{bottom:30vh;left:9vw} #jach4{bottom:14vh;right:9vw} #jach5{top:52vh;left:4vw} #jach6{top:14vh;right:16vw} #jach7{bottom:13vh;left:26vw} #jach8{top:44vh;right:13vw} #jach9{top:30vh;left:27vw} #jach10{top:27vh;right:30vw} #jach11{top:48vh;left:38vw} #jach12{top:56vh;right:27vw} #jach13{bottom:26vh;right:38vw} #jach14{top:36vh;left:14vw} /* paski postępu — duże, centralne, pierwszy plan sceny wieczorów */ .jprog{position:absolute;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;width:min(560px,90vw); background:rgba(28,20,12,.86);border:1px solid rgba(201,162,115,.6);border-radius:20px;padding:22px 28px;backdrop-filter:blur(7px); box-shadow:0 18px 60px rgba(0,0,0,.55);color:var(--jink)} .jprog .pt{font-weight:700;font-size:20px;margin-bottom:12px} .jprog .track{height:15px;border-radius:8px;background:rgba(242,232,213,.16);overflow:hidden} .jprog .fill{height:100%;width:0%;border-radius:8px;background:linear-gradient(90deg,var(--jgold),var(--jgold2))} .jprog .pv{margin-top:10px;font-size:16px;color:#CBBB9C} #jprog1{top:32vh} #jprog2{top:52vh} /* konfetti + iskry */ #jconfetti{position:absolute;inset:0;overflow:hidden;pointer-events:none} #jconfetti i{position:absolute;width:10px;height:14px;top:-20px;border-radius:2px;display:block} /* CTA finału */ #jcta{pointer-events:auto;display:inline-flex;gap:10px;align-items:center;margin-top:22px;background:var(--jgold);color:#241a10;font-weight:700;font-size:18px;font-family:inherit;padding:15px 34px;border-radius:16px;border:0;cursor:pointer;text-decoration:none;text-shadow:none;box-shadow:0 6px 30px rgba(201,162,115,.35);transition:transform .15s} #jcta:hover{transform:translateY(-2px) scale(1.03);text-decoration:none} /* wariant "wkrotce": to jest zapowiedz, nie przycisk. Nie udajemy celu do kliniecia, dopoki apki nie ma w sklepie. */ #jcta.soon{cursor:default;background:transparent;color:var(--jgold);border:1px solid var(--jgold);box-shadow:none;font-size:16px;padding:13px 28px} #jcta.soon:hover{transform:none} /* wskazówka scrolla */ #jhint{position:absolute;bottom:4.5vh;left:50%;transform:translateX(-50%);opacity:.85;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:#E7DAC0;text-shadow:0 1px 6px rgba(0,0,0,.8);text-align:center} #jhint .chev{display:block;margin:8px auto 0;width:14px;height:14px;border-right:2px solid var(--jgold2);border-bottom:2px solid var(--jgold2);transform:rotate(45deg);animation:jbob 1.6s ease-in-out infinite} @keyframes jbob{0%,100%{translate:0 0}50%{translate:0 7px}} /* dyskretne pominięcie podróży - prosto do sekcji "Jak to działa" */ #jskip{position:absolute;right:26px;bottom:4.5vh;z-index:6;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#CBBB9C;text-decoration:none;opacity:.7;border:1px solid rgba(201,162,115,.35);border-radius:999px;padding:8px 16px;background:rgba(20,14,8,.35);backdrop-filter:blur(3px);transition:opacity .2s,border-color .2s,color .2s} #jskip:hover{opacity:1;color:#F2E8D5;border-color:#E0C079;text-decoration:none}