/* =========================================================================
   PALARNIA — „WYPAŁ” · samodzielny arkusz strony /dla-palarni-kawy
   Koncept: scroll = wypał kawy. Sceny nasuwają się jak kadry (sticky deck),
   HUD z krzywą wypału i temperaturą, paleta od pergaminu po espresso.
   Strona kampanijna: świadomie poza głównym design systemem.
   ========================================================================= */

/* ---------- Fonty ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/fraunces-var-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/fraunces-var-normal-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/fraunces-var-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/fraunces-var-italic-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latinext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latinext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latinext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/robotomono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/robotomono-latinext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/robotomono-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/robotomono-latinext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokeny ---------- */
:root{
  --char:#0a0603;          /* zwęglenie — finał */
  --espresso:#150d07;      /* tło bazowe */
  --roast:#241408;         /* wypalone ziarno */
  --amber:#8a5423;         /* karmelizacja */
  --copper:#c96f2e;        /* miedź bębna — akcja */
  --copper-hot:#e08a3c;
  --gold:#d9a05b;
  --crema:#efd9b4;         /* crema — akcent tekstu */
  --milk:#f6ecdc;          /* mleczna biel — tekst na ciemnym */
  --parchment:#ece2cb;     /* łuska pergaminowa — scena chaosu */
  --green:#9aa07b;         /* ziarno zielone */
  --ink-raw:#37301f;       /* tekst na pergaminie */
  --f-disp:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'Roboto Mono',ui-monospace,Menlo,monospace;
  --e:cubic-bezier(.22,1,.36,1);
  --e-snap:cubic-bezier(.2,.7,.1,1);
}

/* ---------- Baza ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Uwaga: ŻADNEGO scroll-snap — snap + sticky talia scen daje skoki na koniec dokumentu */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--espresso);color:var(--milk);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--copper);color:var(--char)}
:focus-visible{outline:2px solid var(--copper-hot);outline-offset:3px;border-radius:3px}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:var(--char)}
html::-webkit-scrollbar-thumb{background:var(--roast);border-radius:5px;border:2px solid var(--char)}
html::-webkit-scrollbar-thumb:hover{background:var(--copper)}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--crema);color:var(--char);padding:10px 16px;font-weight:600}
.skip-link:focus{left:0}

.mono{font-family:var(--f-mono);font-weight:500;font-feature-settings:'tnum' 1}
.ital{font-style:italic;font-weight:420;color:var(--gold)}

/* ---------- Ziarno atmosfery: grain + winieta ---------- */
.grain{position:fixed;inset:-60%;z-index:96;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-jitter .9s steps(4) infinite}
@keyframes grain-jitter{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1.4%)}
  50%{transform:translate(1.6%,-1%)}75%{transform:translate(-.8%,-2%)}100%{transform:translate(0,0)}
}
.vignette{position:fixed;inset:0;z-index:95;pointer-events:none;
  background:radial-gradient(130% 130% at 50% 45%,transparent 58%,rgba(5,2,0,.5) 100%)}

/* ---------- Kursor (tylko pointer:fine) ---------- */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;z-index:150;pointer-events:none;border-radius:50%;opacity:0}
.cursor-dot{width:7px;height:7px;background:var(--copper-hot)}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(239,217,180,.6);transition:width .25s var(--e),height .25s var(--e),border-color .25s}
html.has-cursor .cursor-dot,html.has-cursor .cursor-ring{opacity:1}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor summary{cursor:none}
.cursor-ring.is-link{width:64px;height:64px;border-color:var(--copper-hot)}

/* ---------- HUD wypału ---------- */
.roast-hud{position:fixed;left:22px;bottom:20px;z-index:110;display:flex;align-items:center;gap:14px;
  padding:12px 18px 12px 14px;border:1px solid rgba(239,217,180,.22);border-radius:999px;
  background:rgba(10,6,3,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hud-curve{width:74px;height:30px;overflow:visible}
.hud-curve .hc-path{fill:none;stroke:rgba(239,217,180,.35);stroke-width:1.6;stroke-linecap:round}
.hud-curve .hc-dot{fill:var(--copper-hot)}
.hud-read{display:flex;flex-direction:column;line-height:1.25}
.hud-temp{font-family:var(--f-mono);font-weight:700;font-size:1.02rem;color:var(--crema);letter-spacing:.04em}
.hud-stage{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,236,220,.55)}
.roast-hud.is-crack .hud-temp{color:var(--copper-hot);animation:crack-pulse .5s ease-in-out infinite alternate}
@keyframes crack-pulse{from{opacity:1}to{opacity:.45}}

/* ---------- Nawigacja ---------- */
.rnav{position:fixed;inset:0 0 auto 0;z-index:120;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,3vw,36px);mix-blend-mode:difference;color:#fff}
.rnav-brand{font-family:var(--f-disp);font-weight:640;font-size:1.25rem;letter-spacing:-.01em}
.rnav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.rnav-links a{opacity:.75;transition:opacity .2s}
.rnav-links a:hover{opacity:1}
.rnav-cta{border:1px solid rgba(255,255,255,.85);border-radius:999px;padding:10px 18px;opacity:1 !important}
.rnav-cta:hover{background:#fff;color:#000}

/* ---------- Przyciski ---------- */
.btn-roast{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:1.02rem;
  background:linear-gradient(140deg,var(--copper-hot),var(--copper) 70%);color:#1a0e05;
  padding:18px 34px;border-radius:999px;box-shadow:0 16px 48px -14px rgba(224,138,60,.55);
  transition:transform .25s var(--e),box-shadow .3s var(--e)}
.btn-roast:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 60px -14px rgba(224,138,60,.75)}
.btn-roast:active{transform:translateY(0) scale(.99)}
.btn-ghosty{display:inline-flex;align-items:center;gap:.6em;font-weight:500;font-size:.98rem;color:var(--milk);
  border:1px solid rgba(246,236,220,.32);padding:17px 30px;border-radius:999px;
  transition:border-color .25s,color .25s,transform .25s var(--e)}
.btn-ghosty:hover{border-color:var(--copper-hot);color:var(--crema);transform:translateY(-2px)}
.btn-arrow{display:inline-block;transition:transform .3s var(--e)}
.btn-roast:hover .btn-arrow,.btn-ghosty:hover .btn-arrow{transform:translateX(4px)}
.microline{margin-top:18px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,236,220,.5)}

/* ---------- Talia scen ----------
   Tylko kompaktowe kadry (.scene--deck) są sticky i bywają przykrywane;
   sceny z wysoką treścią (panorama, plany, FAQ, finał) płyną w dokumencie
   i nasuwają się NA przypięty kadr — bez ryzyka ucięcia treści. */
.stack{position:relative}
.scene{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;
  overflow:clip;transform-origin:50% 32%}
.scene--deck{position:sticky;top:0}
.scene-dim{position:absolute;inset:0;z-index:8;background:#050200;opacity:0;pointer-events:none}
.scene-inner{position:relative;z-index:3;width:min(1220px,90vw);padding:clamp(90px,12vh,140px) 0}
.kicker{display:block;font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper-hot);margin-bottom:26px}
.scene h2.h-scene,.h-scene{font-family:var(--f-disp);font-weight:520;font-size:clamp(2.3rem,5.6vw,4.6rem);
  line-height:1.02;letter-spacing:-.015em;color:var(--milk)}
.scene-copy{margin-top:26px;max-width:52ch;font-size:clamp(1.02rem,1rem + .3vw,1.16rem);line-height:1.65;color:rgba(246,236,220,.78)}
.scene-copy b,.scene-copy strong{color:var(--crema);font-weight:600}

/* Odsłony (choreografia wejścia sceny) */
.js-art [data-reveal]{opacity:0;transform:translateY(44px);transition:opacity 1s var(--e),transform 1s var(--e);transition-delay:var(--d,0s)}
.js-art .scene.is-on [data-reveal]{opacity:1;transform:none}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block;transform:none}
.js-art .line>span{transform:translateY(118%);transition:transform 1.1s var(--e-snap);transition-delay:var(--d,0s)}
.js-art .scene.is-on .line>span{transform:none}

/* =========================================================================
   SCENA 0 — HERO · rozgrzewanie bębna
   ========================================================================= */
.scene--hero{background:
  radial-gradient(90% 70% at 70% 10%,#2a1a0d 0%,transparent 55%),
  radial-gradient(120% 90% at 30% 100%,#1d1109 0%,transparent 60%),
  var(--espresso)}
.hero-steam{position:absolute;inset:0;z-index:1;pointer-events:none}
.ghost-word{position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-disp);font-weight:800;font-size:clamp(8rem,24vw,22rem);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(239,217,180,.07);pointer-events:none;user-select:none;white-space:nowrap}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:34px;font-family:var(--f-mono);
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,236,220,.6)}
.hero-eyebrow::before{content:"";width:44px;height:1px;background:var(--copper)}
.h-hero{font-family:var(--f-disp);font-weight:560;font-size:clamp(3.1rem,9.4vw,8.6rem);line-height:.96;letter-spacing:-.02em;color:var(--milk)}
.h-hero .ital{font-weight:400}
.hero-sub{margin-top:34px;max-width:46ch;font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.6;color:rgba(246,236,220,.75)}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:40px}
.bean{position:absolute;z-index:2;pointer-events:none;opacity:.55;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.bean svg{width:100%;height:100%}
.bean--1{width:74px;right:12%;top:16%;rotate:22deg}
.bean--2{width:46px;right:26%;top:58%;rotate:-14deg}
.bean--3{width:96px;right:6%;bottom:22%;rotate:-32deg;opacity:.4}
.bean--4{width:38px;left:8%;bottom:30%;rotate:40deg;opacity:.35}
.scroll-cue{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-mono);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,236,220,.55)}
.scroll-cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--copper-hot),transparent);animation:cue-drip 1.8s var(--e) infinite}
@keyframes cue-drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Ticker integracji na dole hero */
.tick{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(239,217,180,.12);
  padding:16px 0;overflow:hidden;background:rgba(10,6,3,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tick-track{display:flex;width:max-content;animation:tick-roll 46s linear infinite}
.tick:hover .tick-track{animation-play-state:paused}
.tick-set{display:flex;align-items:center;gap:20px;padding-left:20px}
.tick-label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,236,220,.5);white-space:nowrap;padding-right:8px}
.tick-chip{display:flex;align-items:center;background:rgba(246,236,220,.93);border-radius:8px;padding:7px 14px}
.tick-chip img{height:22px;width:auto;max-width:110px;object-fit:contain}
@keyframes tick-roll{to{transform:translateX(-50%)}}

/* =========================================================================
   SCENA I — ZIELONE ZIARNO · poranny chaos (jasna, pergamin)
   ========================================================================= */
.scene--chaos{background:
  radial-gradient(80% 60% at 20% 0%,rgba(154,160,123,.5) 0%,transparent 55%),
  radial-gradient(90% 70% at 100% 100%,#e0d3b4 0%,transparent 60%),
  var(--parchment);
  color:var(--ink-raw)}
.scene--chaos .kicker{color:#7d6c3f}
.scene--chaos .h-scene{color:#241d0e}
.scene--chaos .scene-copy{color:rgba(55,48,31,.82)}
.scene--chaos .scene-copy b{color:#241d0e}
.chaos-stage{position:relative}
.chaos-notes{position:absolute;inset:-8vh -2vw;z-index:1;pointer-events:none}
.note{position:absolute;max-width:240px;padding:14px 16px;font-family:var(--f-mono);font-size:.8rem;line-height:1.5;
  box-shadow:0 22px 44px -18px rgba(40,30,10,.45)}
.note-inner{display:block;animation:note-bob 7s ease-in-out infinite alternate;animation-delay:var(--bob,0s)}
@keyframes note-bob{from{transform:translateY(-6px) rotate(-.6deg)}to{transform:translateY(8px) rotate(.8deg)}}
.note--post{background:#fff6d8;color:#4a3d18;rotate:-4deg;border-bottom:14px solid rgba(0,0,0,.05)}
.note--post2{background:#ffe9c9;color:#5a4014;rotate:3deg}
.note--sms{background:#2d3441;color:#e8edf5;border-radius:16px 16px 16px 4px;rotate:-2deg}
.note--sms small{display:block;margin-top:6px;opacity:.55;font-size:.68rem}
.note--call{background:#fff;color:#8c2f23;border-left:4px solid #c0392b;rotate:2deg;font-weight:700}
.note--mail{background:#f4efe4;color:#37301f;border:1px solid #d8cba6;rotate:-1.5deg}
.note--mail b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n1{left:2%;top:-4%}
.n2{right:6%;top:2%}
.n3{left:-1%;bottom:6%}
.n4{right:2%;bottom:-2%}
.n5{right:24%;top:-12%}
.n6{left:22%;bottom:-14%}
.chaos-punch{margin-top:44px;font-family:var(--f-disp);font-style:italic;font-weight:430;font-size:clamp(1.3rem,2.6vw,1.9rem);color:#6b5320}

/* =========================================================================
   SCENA II — PIERWSZY TRZASK · zwrot akcji
   ========================================================================= */
.scene--crack{background:
  radial-gradient(60% 50% at 50% 42%,rgba(224,138,60,.16) 0%,transparent 60%),
  radial-gradient(100% 80% at 50% 110%,#221204 0%,transparent 55%),
  #170d05}
.crack-temp{position:absolute;z-index:0;right:4%;top:8%;font-family:var(--f-mono);font-weight:700;
  font-size:clamp(5rem,16vw,14rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(224,138,60,.16);user-select:none;pointer-events:none}
.crack-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.shot-frame{position:relative;background:#1d1006;border:1px solid rgba(239,217,180,.16);border-radius:16px;overflow:hidden;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4)}
.shot-frame-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(239,217,180,.06);border-bottom:1px solid rgba(239,217,180,.1)}
.shot-frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(239,217,180,.22)}
.shot-frame-bar i:first-child{background:#c0564a}
.shot-frame-bar i:nth-child(2){background:#c99a3f}
.shot-frame-bar i:nth-child(3){background:#5f9e60}
.shot-frame-url{margin-inline:auto;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:rgba(246,236,220,.55)}
.shot-frame img{width:100%;height:auto}
.crack-shot{perspective:1400px}
.crack-shot .shot-frame{transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d;transition:transform 1s var(--e)}
.crack-shot:hover .shot-frame{transform:rotateY(-3deg) rotateX(1deg)}
.chipset{position:absolute;z-index:4;display:flex;flex-direction:column;gap:10px;right:-18px;top:18%}
.chip-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.06em;padding:9px 14px;border-radius:999px;background:#241408;border:1px solid rgba(239,217,180,.2);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}
.chip-status i{width:8px;height:8px;border-radius:50%}
.chip-status--new{color:#7fb7ff}.chip-status--new i{background:#7fb7ff}
.chip-status--paid{color:#8fdf9a}.chip-status--paid i{background:#8fdf9a}
.chip-status--sent{color:var(--gold)}.chip-status--sent i{background:var(--gold)}
.toast-order{position:absolute;z-index:4;left:-26px;bottom:14%;display:flex;align-items:center;gap:12px;
  background:#f6ecdc;color:#241d0e;padding:13px 18px;border-radius:12px;font-size:.85rem;font-weight:500;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.75)}
.toast-order .mono{font-weight:700}
.toast-dot{width:10px;height:10px;border-radius:50%;background:#2f9e44;box-shadow:0 0 0 0 rgba(47,158,68,.5);animation:toast-ping 2s infinite}
@keyframes toast-ping{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* =========================================================================
   SCENA III — ROZWINIĘCIE · panorama pozioma
   ========================================================================= */
.scene--pan{min-height:0;display:block;place-items:initial;background:var(--espresso)}
.pan-space{height:360vh}
.pan-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(70% 60% at 80% 20%,#241408 0%,transparent 55%),
    radial-gradient(80% 70% at 10% 90%,#1c0f06 0%,transparent 60%),
    var(--espresso)}
.pan-head{position:absolute;top:clamp(84px,11vh,120px);left:50%;transform:translateX(-50%);width:min(1220px,90vw);z-index:4}
.pan-track{display:flex;align-items:stretch;gap:clamp(40px,6vw,100px);padding-inline:clamp(24px,8vw,120px);width:max-content;will-change:transform}
.pan-panel{flex:0 0 auto;width:min(78vw,880px);display:grid;grid-template-columns:1fr;align-content:center;gap:26px}
.pan-panel--wide{width:min(86vw,980px)}
.pan-idx{font-family:var(--f-mono);font-size:.8rem;font-weight:700;letter-spacing:.3em;color:var(--copper-hot)}
.pan-idx::after{content:"";display:inline-block;width:70px;height:1px;background:rgba(224,138,60,.4);margin-left:14px;vertical-align:middle}
.pan-panel h3{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-.012em}
.pan-panel p{max-width:46ch;color:rgba(246,236,220,.75);font-size:1.05rem}
.pan-visual{margin-top:8px}
.pan-visual .shot-frame{max-width:640px}
.logo-shelf{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.logo-shelf .tick-chip{padding:10px 18px}
.logo-shelf .tick-chip img{height:28px;max-width:150px}
.logo-shelf .tick-chip--sm img{height:20px}
.pan-note{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;color:rgba(246,236,220,.5);text-transform:uppercase}
.pan-prog{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:min(420px,60vw);height:2px;background:rgba(239,217,180,.15);z-index:4;border-radius:2px;overflow:hidden}
.pan-prog i{display:block;height:100%;width:100%;background:var(--copper-hot);transform:scaleX(0);transform-origin:0 50%}
.pan-endnote{align-self:center;font-family:var(--f-disp);font-style:italic;font-weight:430;font-size:clamp(1.4rem,2.8vw,2.2rem);color:var(--gold);max-width:15em}

/* =========================================================================
   SCENA IV — PROFIL WYPAŁU · 3 kroki na krzywej
   ========================================================================= */
.scene--curve{background:
  radial-gradient(90% 70% at 50% 0%,#1e1108 0%,transparent 60%),
  #130b06}
.curve-wrap{margin-top:clamp(30px,6vh,70px)}
.curve-svg{width:100%;height:auto;overflow:visible}
.curve-svg .cv-path{fill:none;stroke:var(--copper-hot);stroke-width:2.5;stroke-linecap:round}
.curve-svg .cv-ghost{fill:none;stroke:rgba(239,217,180,.14);stroke-width:1;stroke-dasharray:3 7}
.curve-svg .cv-node{fill:var(--espresso);stroke:var(--crema);stroke-width:2;transform-origin:center;transform-box:fill-box;transition:opacity .5s var(--e),transform .6s var(--e)}
.js-art .curve-svg .cv-node{opacity:0;transform:scale(.2)}
.js-art .curve-svg .cv-node.on{opacity:1;transform:scale(1)}
.curve-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:26px}
.curve-step{transition:opacity .6s var(--e),transform .6s var(--e)}
.js-art .curve-step{opacity:.35;transform:translateY(10px)}
.js-art .curve-step.on{opacity:1;transform:none}
.curve-step .cs-temp{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--copper-hot)}
.curve-step h3{font-family:var(--f-disp);font-weight:520;font-size:clamp(1.2rem,2vw,1.6rem);margin:10px 0 8px}
.curve-step p{font-size:.95rem;color:rgba(246,236,220,.7);max-width:30ch}

/* =========================================================================
   SCENA V — DEGUSTACJA · plany
   ========================================================================= */
.scene--plans{background:
  radial-gradient(70% 55% at 50% 100%,#20120a 0%,transparent 60%),
  #120a05}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(36px,6vh,60px);align-items:stretch}
.cup{position:relative;display:flex;flex-direction:column;gap:0;padding:34px 30px 30px;border-radius:20px;
  background:rgba(38,22,10,.42);border:1px solid rgba(239,217,180,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .5s var(--e),border-color .4s,background-color .4s}
.cup:hover{transform:translateY(-8px);border-color:rgba(239,217,180,.3)}
.cup--hot{border-color:var(--copper);background:rgba(52,28,11,.55);box-shadow:0 40px 90px -40px rgba(224,138,60,.35)}
.cup-tag{position:absolute;top:-13px;left:28px;font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#1a0e05;background:linear-gradient(140deg,var(--copper-hot),var(--copper));padding:6px 13px;border-radius:999px}
.cup-name{font-family:var(--f-disp);font-weight:560;font-size:1.35rem;color:var(--milk)}
.cup-price{margin:16px 0 4px;font-family:var(--f-mono);font-weight:700;font-size:2.6rem;letter-spacing:-.04em;color:var(--crema)}
.cup-price small{font-size:.9rem;font-weight:500;letter-spacing:0;color:rgba(246,236,220,.55)}
.cup-for{font-size:.9rem;color:rgba(246,236,220,.6);min-height:2.7em}
.cup-list{display:grid;gap:10px;margin:22px 0 26px;padding-top:20px;border-top:1px solid rgba(239,217,180,.14);
  font-family:var(--f-mono);font-size:.82rem;color:rgba(246,236,220,.82)}
.cup-list li{display:flex;gap:10px;align-items:baseline}
.cup-list li::before{content:"—";color:var(--copper-hot);flex:none}
.cup-list li.off{opacity:.4}
.cup-list li.off::before{content:"×"}
.cup .btn-roast,.cup .btn-ghosty{margin-top:auto;justify-content:center;width:100%;padding-block:15px}
.plans-note{margin-top:26px;text-align:center;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,236,220,.5)}

/* =========================================================================
   SCENA VI — FAQ
   ========================================================================= */
.scene--faq{background:#0f0804;display:block}
.scene--faq .scene-inner{width:min(860px,90vw)}
.faqx{margin-top:clamp(30px,5vh,54px);border-top:1px solid rgba(239,217,180,.14)}
.faqx details{border-bottom:1px solid rgba(239,217,180,.14)}
.faqx summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:24px 4px;font-family:var(--f-disp);font-weight:480;font-size:clamp(1.08rem,1.9vw,1.45rem);line-height:1.25;color:var(--milk);cursor:pointer;transition:color .25s}
.faqx summary::-webkit-details-marker{display:none}
.faqx summary:hover{color:var(--gold)}
.faqx .fx-plus{flex:none;font-family:var(--f-mono);font-weight:500;font-size:1.3rem;color:var(--copper-hot);transition:transform .4s var(--e)}
.faqx details[open] .fx-plus{transform:rotate(45deg)}
.faqx .fx-a{padding:0 4px 26px;max-width:64ch;color:rgba(246,236,220,.75);font-size:.98rem}
.faqx .fx-a b{color:var(--crema)}
.faqx .fx-a a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
@supports (interpolate-size: allow-keywords){
  .faqx details{interpolate-size:allow-keywords}
  .faqx details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility .45s allow-discrete,opacity .45s var(--e),block-size .45s var(--e)}
  .faqx details[open]::details-content{opacity:1;block-size:auto}
}

/* =========================================================================
   FINAŁ — 218°C · zsyp ziarna
   ========================================================================= */
.scene--final{background:
  radial-gradient(60% 44% at 50% 58%,rgba(224,138,60,.14) 0%,transparent 62%),
  var(--char);
  text-align:center}
.final-kicker{justify-content:center;display:flex}
.h-final{font-family:var(--f-disp);font-style:italic;font-weight:430;font-size:clamp(3rem,10vw,8.4rem);line-height:1;letter-spacing:-.015em;color:var(--crema)}
.final-copy{margin:30px auto 0;max-width:42ch;color:rgba(246,236,220,.72);font-size:1.1rem}
.final-ctas{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:42px}
.final-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,3vw,36px);border-top:1px solid rgba(239,217,180,.12);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,236,220,.45)}
.final-foot a{color:rgba(246,236,220,.65);transition:color .2s}
.final-foot a:hover{color:var(--crema)}
.final-foot nav{display:flex;flex-wrap:wrap;gap:20px}

/* ---------- Paralaksa: JS steruje tylko --py, transformy CSS zostają ---------- */
[data-para]{transform:translate3d(0,var(--py,0px),0)}
.ghost-word[data-para]{transform:translate(-50%,calc(-50% + var(--py,0px)))}

/* ---------- Responsywność ---------- */
@media (max-width:1020px){
  .crack-grid{grid-template-columns:1fr;gap:40px}
  .chipset{right:8px;top:-18px;flex-direction:row}
  .toast-order{left:8px;bottom:-16px}
}
@media (max-width:860px){
  .scene--deck{position:relative}
  .rnav-links a:not(.rnav-cta){display:none}
  .roast-hud{left:12px;bottom:12px;padding:9px 14px 9px 11px;gap:10px}
  .hud-curve{width:56px;height:24px}
  .hud-temp{font-size:.9rem}
  .ghost-word{font-size:34vw;opacity:.8}
  .scene-inner{width:min(1220px,88vw)}
  /* Chaos: notatki wracają do flow jako kolaż */
  .chaos-notes{position:static;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;pointer-events:auto}
  .note{position:static;max-width:none}
  .n5,.n6{display:none}
  /* Panorama: pion zamiast poziomu */
  .pan-space{height:auto}
  .pan-pin{position:static;height:auto;overflow:visible;padding:90px 0 70px}
  .pan-head{position:static;transform:none;width:min(1220px,88vw);margin:0 auto 44px}
  .pan-track{width:auto;flex-direction:column;gap:70px;padding-inline:6vw}
  .pan-panel,.pan-panel--wide{width:100%}
  .pan-prog{display:none}
  .curve-steps{grid-template-columns:1fr;gap:26px}
  .curve-step p{max-width:56ch}
  .plans-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .scroll-cue{display:none}
  .tick-label{display:none}
}
@media (max-width:560px){
  .h-hero{font-size:clamp(2.7rem,13vw,3.6rem)}
  .hero-ctas .btn-roast,.hero-ctas .btn-ghosty,.final-ctas .btn-roast{width:100%;justify-content:center}
  .chaos-notes{grid-template-columns:1fr}
  .bean{display:none}
  .crack-temp{font-size:5.4rem;right:2%;top:4%}
  .final-foot{justify-content:center;text-align:center}
}

/* ---------- Bez JS: panorama w pionie, pełny dostęp do treści ---------- */
html:not(.js-art) .pan-space{height:auto}
html:not(.js-art) .pan-pin{position:static;height:auto;padding:80px 0}
html:not(.js-art) .pan-track{width:auto;flex-direction:column;gap:70px}
html:not(.js-art) .pan-head{position:static;transform:none;margin:0 auto 40px;width:min(1220px,90vw)}
html:not(.js-art) .pan-prog,html:not(.js-art) .scroll-cue{display:none}

/* ---------- Reduced motion: wszystko widoczne, bez teatru ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .scene,.scene--deck{position:relative;min-height:auto;padding-block:40px}
  .scene--pan .pan-space{height:auto}
  .scene--pan .pan-pin{position:static;height:auto;padding:60px 0}
  .pan-track{width:auto;flex-direction:column;transform:none !important}
  .js-art [data-reveal],.js-art .line>span{opacity:1;transform:none;transition:none}
  .curve-svg .cv-node,.curve-step{opacity:1;transform:none}
  .grain,.cursor-dot,.cursor-ring,.scroll-cue{display:none}
  .note-inner{animation:none}
  .tick-track{animation:none;width:100%;flex-wrap:wrap}
  .tick-set[aria-hidden="true"]{display:none}
}