/* Dockvi landing scenes: boot hero (scene 1) and chaos scanner (scene 2).
   Visual layer only: every word stays in HTML, effects respect pause and reduced motion. */
:root{--alert:#ff5c7a}

/* Production CSP (style-src 'self') blocks style="" attributes, so this lives here. */
.demo-note.demo-note-flush{margin-left:0;margin-bottom:24px}

/* ---------- Scene 1: glitch title ---------- */
.hero.scene-boot h1{font-size:clamp(46px,5.3vw,84px);letter-spacing:-.05em;line-height:1}
.glitch-line{display:block;position:relative;width:max-content;max-width:100%}
.hero-accent{color:var(--lime);text-shadow:0 0 50px #dbff5733}
.glitch-line:before,.glitch-line:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;white-space:nowrap;opacity:0}
.glitch-line:before{color:var(--cyan);text-shadow:-3px 0 var(--pink);animation:glitch-a 1.1s steps(1,end) .15s 1,glitch-idle-a 9s steps(1,end) 2.6s infinite}
.glitch-line:after{color:var(--pink);text-shadow:3px 0 var(--cyan);animation:glitch-b 1.1s steps(1,end) .25s 1,glitch-idle-b 9s steps(1,end) 2.8s infinite}
.glitch-line:nth-child(2):before{animation-delay:.35s,4.1s}.glitch-line:nth-child(2):after{animation-delay:.45s,4.3s}
.glitch-line:nth-child(3):before{animation-delay:.55s,6.2s}.glitch-line:nth-child(3):after{animation-delay:.6s,6.4s}
.scene-boot .glitch-line{animation:line-jitter .9s steps(1,end) .1s 1}
.scene-boot .glitch-line:nth-child(2){animation-delay:.3s}.scene-boot .glitch-line:nth-child(3){animation-delay:.5s}
.motion-paused .glitch-line:before,.motion-paused .glitch-line:after,.page-hidden .glitch-line:before,.page-hidden .glitch-line:after{opacity:0!important}
@keyframes glitch-a{0%{opacity:1;clip-path:inset(10% 0 70% 0);transform:translate(-7px,0)}12%{clip-path:inset(60% 0 12% 0);transform:translate(6px,0)}24%{clip-path:inset(30% 0 45% 0);transform:translate(-3px,0)}36%{clip-path:inset(80% 0 4% 0);transform:translate(8px,0)}48%{clip-path:inset(4% 0 84% 0);transform:translate(-4px,0)}60%{clip-path:inset(45% 0 35% 0);transform:translate(2px,0)}72%,100%{opacity:0;clip-path:inset(0);transform:none}}
@keyframes glitch-b{0%{opacity:1;clip-path:inset(70% 0 8% 0);transform:translate(6px,0)}14%{clip-path:inset(15% 0 62% 0);transform:translate(-8px,0)}28%{clip-path:inset(50% 0 30% 0);transform:translate(4px,0)}42%{clip-path:inset(2% 0 78% 0);transform:translate(-5px,0)}56%{clip-path:inset(66% 0 18% 0);transform:translate(3px,0)}70%,100%{opacity:0;clip-path:inset(0);transform:none}}
@keyframes glitch-idle-a{0%,93%{opacity:0}94%{opacity:1;clip-path:inset(22% 0 58% 0);transform:translate(-5px,0)}96%{clip-path:inset(64% 0 16% 0);transform:translate(4px,0)}98%,100%{opacity:0;transform:none}}
@keyframes glitch-idle-b{0%,94%{opacity:0}95%{opacity:1;clip-path:inset(58% 0 26% 0);transform:translate(5px,0)}97%{clip-path:inset(12% 0 72% 0);transform:translate(-4px,0)}99%,100%{opacity:0;transform:none}}
@keyframes line-jitter{0%{transform:translateX(-4px) skewX(-8deg)}20%{transform:translateX(3px)}40%{transform:translateX(-2px) skewX(5deg)}60%{transform:translateX(1px)}80%,100%{transform:none}}

/* ---------- Scene 1: boot sequence over the hologram ---------- */
.scene-boot .holo-stage{transition:transform .6s ease-out,opacity .7s ease}
.scene-boot:not(.is-online) .holo-stage{opacity:.35}
.boot-hud{position:absolute;left:24px;top:62px;z-index:4;display:grid;gap:7px;font:600 11px/1.3 var(--font-display);letter-spacing:.14em;color:var(--cyan);pointer-events:none;opacity:0;text-shadow:0 0 10px #69f5e055}
.boot-hud b{color:var(--lime);font-weight:600}
.boot-line{display:block;white-space:nowrap;overflow:hidden;max-width:0}
.scene-boot:not(.is-online) .boot-hud{opacity:1}
.scene-boot:not(.is-booting):not(.is-online) .boot-line:first-child{max-width:40ch;animation:caret-blink 1s steps(1,end) infinite}
.scene-boot.is-booting .boot-line{animation:boot-type .38s steps(16,end) forwards}
.scene-boot.is-booting .boot-line:nth-child(2){animation-delay:.4s}
.scene-boot.is-booting .boot-line:nth-child(3){animation-delay:.8s}
.scene-boot.is-booting .boot-line:nth-child(4){animation-delay:1.2s}
.boot-bar{display:block;width:210px;height:4px;margin-top:4px;background:#69f5e022;position:relative;overflow:hidden}
.boot-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--lime));box-shadow:0 0 12px var(--lime);transform:scaleX(0);transform-origin:left}
.scene-boot.is-booting .boot-bar i{animation:boot-fill 1.55s cubic-bezier(.6,.1,.3,1) .3s forwards}
.scene-boot.is-online .boot-hud{opacity:0}
.scene-boot.is-online:not(.is-instant) .boot-hud{animation:hud-out .45s steps(5,end) both}
@keyframes boot-type{to{max-width:40ch}}
@keyframes boot-fill{to{transform:scaleX(1)}}
@keyframes caret-blink{50%{opacity:.25}}
@keyframes hud-out{0%{opacity:1}25%{opacity:.2;transform:translateX(7px)}50%{opacity:.8;transform:translateX(-4px)}100%{opacity:0;transform:none}}

.glitch-slices{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen}
.glitch-slices:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#69f5e012 0 1px,transparent 1px 3px)}
.glitch-slices i{position:absolute;left:-4%;right:-4%;background:linear-gradient(90deg,transparent,#69f5e055 20%,#ee85e744 60%,transparent)}
.glitch-slices i:nth-child(1){top:18%;height:3%}.glitch-slices i:nth-child(2){top:34%;height:7%}.glitch-slices i:nth-child(3){top:52%;height:2%}.glitch-slices i:nth-child(4){top:63%;height:9%}.glitch-slices i:nth-child(5){top:80%;height:4%}
.scene-boot.is-booting .glitch-slices{animation:slices-flash 2.6s steps(1,end) forwards}
.scene-boot.is-booting .glitch-slices i{animation:slice-shift .16s steps(2,end) infinite alternate}
.scene-boot.is-booting .glitch-slices i:nth-child(2n){animation-duration:.22s;animation-direction:alternate-reverse}
@keyframes slices-flash{0%{opacity:.9}8%{opacity:0}14%{opacity:.7}22%,58%{opacity:0}62%{opacity:1}68%{opacity:.25}74%{opacity:.9}82%,100%{opacity:0}}
@keyframes slice-shift{to{transform:translateX(22px)}}

/* The ghost waits for the boot; a CSS failsafe reveals it if the script never runs. */
.hero.scene-boot:not(.is-online) .hero-drone{opacity:0;animation:ghost-failsafe 0s 7s forwards}
.hero.scene-boot.is-materializing .hero-drone{animation:ghost-materialize 1s steps(1,end) forwards}
@keyframes ghost-failsafe{to{opacity:1}}
@keyframes ghost-materialize{0%{opacity:1;clip-path:inset(48% 0 48% 0);filter:brightness(3) drop-shadow(-6px 0 #ee85e7) drop-shadow(6px 0 #69f5e0)}10%{opacity:0}18%{opacity:1;clip-path:inset(20% 0 30% 0);transform:translateX(-8px)}26%{clip-path:inset(60% 0 5% 0);transform:translateX(6px)}34%{opacity:.3;clip-path:inset(0 0 55% 0);transform:none}44%{opacity:1;clip-path:inset(0);transform:translateX(-3px);filter:brightness(1.8) drop-shadow(-4px 0 #ee85e7) drop-shadow(4px 0 #69f5e0)}56%{transform:translateX(2px)}70%{transform:none;filter:brightness(1.3) drop-shadow(-2px 0 #ee85e788) drop-shadow(2px 0 #69f5e088)}100%{opacity:1;clip-path:inset(0);transform:none;filter:none}}


.hero-hail{position:absolute;z-index:5;left:2%;top:12%;width:min(250px,38%);padding:12px 14px 13px;border:1px solid #dbff5788;background:linear-gradient(120deg,#161d08f0,#0a141aeb);box-shadow:0 0 30px #dbff5722,0 10px 35px #0008;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.hail-tag{display:flex;gap:8px;align-items:center;font:600 9px var(--font-display);letter-spacing:.16em;color:var(--lime);margin-bottom:6px}
.hail-text{display:block;font:600 17px/1.3 var(--font-display);color:var(--text);min-height:2.6em}
.scene-boot.is-online .hero-hail{opacity:1;transform:none}
.hero-hail:after{content:"";position:absolute;right:-9px;top:26px;width:16px;height:2px;background:#dbff5788}
/* Calm hologram: the ghost, two soft rings and its projector — nothing on top of it. */

.hero.scene-boot [data-magnetic]{transition:background .25s,color .25s,box-shadow .25s,transform .25s,translate .3s cubic-bezier(.2,.8,.2,1)}

/* Phone: the ghost leads the first screen, the copy follows. */
@media(max-width:800px){
  .hero.scene-boot{display:flex;flex-direction:column;padding:6px 0 48px;gap:0}
  .hero.scene-boot:before{bottom:48px}
  .scene-boot .hologram{order:-1;height:330px;width:100%;margin:0 0 4px}
  .scene-boot .holo-scene{inset:0 0 78px}
  .scene-boot .holo-stage{scale:.7}
  .boot-hud{left:6px;top:36px;font-size:9px;gap:5px}
  .boot-bar{width:150px}
  .scene-boot .scroll-cue{display:none}
  .hero-hail{left:0;right:0;top:auto;bottom:0;width:auto;padding:10px 12px}
  .hero-hail:after{display:none}
  .hail-text{font-size:15px}
  .hero.scene-boot h1{font-size:clamp(38px,10.6vw,60px)}
  .scene-boot .eyebrow{margin-bottom:16px}
  .scene-boot .tagline{margin:18px 0 12px}
}
@media(max-width:480px){
  .scene-boot .hologram{height:310px}
  .scene-boot .holo-stage{scale:.78}
  .scene-boot .actions .button{flex:1 1 100%}
}

/* Thumb-zone call to action on phones only. */
.thumb-cta{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:14px;padding:10px 12px;background:#0b1117f2;border:1px solid #dbff5755;box-shadow:0 0 30px #dbff5718,0 12px 40px #000a;backdrop-filter:blur(12px);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));animation:thumb-in .35s steps(4,end) both}
.thumb-cta[hidden]{display:none}
.thumb-cta .button{flex:1;min-height:48px;padding:12px 18px}
.thumb-note{font:600 10px/1.3 var(--font-display);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
@keyframes thumb-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(min-width:801px){.thumb-cta{display:none!important}}

/* ---------- Scene 2: chaos → order ---------- */
.scene-order{padding-bottom:70px}
.scene-order h2{font-size:clamp(36px,4vw,58px)}
.order-sticky{display:grid;grid-template-columns:minmax(280px,.72fr) 1.28fr;gap:clamp(28px,3.5vw,48px);align-items:center}
.order-copy .section-intro{margin:22px 0 26px;font-size:20px}
.order-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.order-steps li{display:flex;gap:16px;padding:13px 16px;border-left:2px solid var(--line);color:var(--muted);font-size:18px;line-height:1.45;transition:border-color .3s,background .3s,color .3s}
.order-steps strong{color:var(--text);font-family:var(--font-display);font-weight:600}
.step-index{font:600 13px var(--font-display);color:#6c9d9c;padding-top:4px}
.order-steps li.is-active{border-left-color:var(--lime);background:linear-gradient(90deg,#dbff5712,transparent);color:#cfdcdf}
.order-steps li.is-active .step-index{color:var(--lime)}

.order-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);gap:14px;height:min(640px,calc(100vh - 110px));min-height:520px;padding:16px;border:1px solid #2b4247;background:linear-gradient(160deg,#0d151cf2,#080b10f7);overflow:hidden;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.order-stage:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#69f5e008 0 1px,transparent 1px 4px);pointer-events:none}
.order-hud{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;font:600 10px var(--font-display);letter-spacing:.16em;color:#6c9d9c}
.order-hud [data-order-status]{color:var(--alert)}
.order-hud [data-order-count]{color:var(--lime)}
.is-complete .order-hud [data-order-status]{color:var(--lime)}

.chaos-field{position:relative;min-height:0;border:1px dashed #ff5c7a40;background:radial-gradient(ellipse at 40% 45%,#ff5c7a17,transparent 70%)}
.chaos-bit{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);max-width:60%;overflow:hidden;text-overflow:ellipsis;padding:8px 11px;font:600 15px/1.25 var(--font-display);color:#ffd7de;background:#1a0d14eb;border:1px solid #ff5c7a77;box-shadow:0 0 18px #ff5c7a22;white-space:nowrap;z-index:2;will-change:transform,opacity}
.chaos-bit.is-alert{color:#fff;border-color:var(--alert);background:#2a0c16f0;box-shadow:0 0 22px #ff5c7a44}
.chaos-bit.is-note{color:#fff1a8;border-color:#f5d76e88;background:#1d1a0aeb;box-shadow:0 0 18px #f5d76e1f}
.chaos-bit:nth-child(1){--x:5%;--y:7%;--r:-6deg}
.chaos-bit:nth-child(2){--x:44%;--y:3%;--r:4deg}
.chaos-bit:nth-child(3){--x:16%;--y:23%;--r:3deg}
.chaos-bit:nth-child(4){--x:38%;--y:36%;--r:-5deg}
.chaos-bit:nth-child(5){--x:3%;--y:50%;--r:7deg}
.chaos-bit:nth-child(6){--x:42%;--y:59%;--r:-3deg}
.chaos-bit:nth-child(7){--x:9%;--y:74%;--r:-8deg}
.chaos-bit:nth-child(8){--x:45%;--y:85%;--r:5deg}
.scene-order.is-live .chaos-bit:not(.is-scanned){animation:bit-jitter 2.6s steps(1,end) infinite}
.scene-order.is-live .chaos-bit:nth-child(2n){animation-delay:-.9s;animation-duration:3.1s}
.scene-order.is-live .chaos-bit:nth-child(3n){animation-delay:-1.7s;animation-duration:2.2s}
.chaos-bit.is-scanned{color:#0a1006;background:var(--lime);border-color:var(--lime);box-shadow:0 0 26px #dbff5788;z-index:4}
@keyframes bit-jitter{0%,100%{translate:0 0;opacity:1}7%{translate:-3px 1px;opacity:.55}9%{translate:2px 0;opacity:1}50%{translate:0 0}52%{translate:4px -1px;filter:hue-rotate(40deg)}54%{translate:0 0;filter:none}}

/* The beam line and its trail fade with the sweep; the drone riding it stays in view. */
.scan-beam{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;z-index:3;pointer-events:none;transform:translateX(calc(var(--beam,0) * var(--field-w,0px)))}
.scan-beam:before,.scan-beam:after{content:"";position:absolute;opacity:0;transition:opacity .3s}
.scan-beam:after{inset:0;background:linear-gradient(var(--lime),var(--cyan));box-shadow:0 0 14px var(--lime),0 0 40px #dbff5755}
.scan-beam:before{top:0;bottom:0;right:2px;width:110px;background:linear-gradient(90deg,transparent,#dbff5716)}
.is-scanning .scan-beam:before,.is-scanning .scan-beam:after{opacity:1}
.chaos-field:after{content:"CHAOS UPORZĄDKOWANY";position:absolute;left:0;right:0;top:50%;text-align:center;font:600 11px var(--font-display);letter-spacing:.2em;color:var(--lime);text-shadow:0 0 12px #dbff5788;opacity:0;transition:opacity .5s}
.is-live .is-complete .chaos-field:after{opacity:1}

.day-plan{position:relative;display:flex;flex-direction:column;min-height:0;padding:14px 14px 12px;border:1px solid #69f5e033;background:#0a1419eb;transition:border-color .4s,box-shadow .4s}
.plan-head,.plan-foot{display:flex;justify-content:space-between;font:600 10px var(--font-display);letter-spacing:.16em;color:var(--cyan)}
.plan-head{padding-bottom:10px;border-bottom:1px solid #69f5e022;margin-bottom:6px}
.plan-slots{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:5px;flex:1;min-height:0}
.plan-slots li{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 10px;border-left:2px solid #69f5e055;background:#69f5e008;font-size:15px;line-height:1.2}
.plan-slots span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-slots time{font:600 12px var(--font-display);color:var(--cyan)}
.plan-slots em{font:normal 600 9px var(--font-display);letter-spacing:.12em;color:var(--lime);border:1px solid #dbff5755;padding:3px 5px}
.plan-slots em.is-cal{color:var(--cyan);border-color:#69f5e055}
.plan-slots em.is-shop{color:#f5d76e;border-color:#f5d76e55}
.plan-slots em.is-note{color:var(--pink);border-color:#ee85e755}
.day-plan{container-type:inline-size}
.plan-slots li:has(em.is-cal){border-left-color:#69f5e0aa}
.plan-slots li:has(em.is-shop){border-left-color:#f5d76eaa}
.plan-slots li:has(em.is-note){border-left-color:#ee85e7aa}
@container (max-width:340px){.plan-slots em{display:none}.plan-slots li{grid-template-columns:40px minmax(0,1fr)}}
.plan-foot{margin-top:10px;padding-top:10px;border-top:1px solid #69f5e022;color:var(--lime);transition:opacity .4s,text-shadow .4s}
.is-live .plan-slots li:not(.is-filled){border-left-color:#26383e;background:transparent}
.is-live .plan-slots li:not(.is-filled) span,.is-live .plan-slots li:not(.is-filled) em{opacity:0}
.is-live .plan-slots li:not(.is-filled):after{content:"";position:absolute;left:62px;right:32%;top:50%;height:2px;background:repeating-linear-gradient(90deg,#3a5258 0 6px,transparent 6px 11px)}
.is-live .plan-slots li.is-filled{animation:slot-in .45s steps(4,end) both}
@keyframes slot-in{0%{background:#dbff5733;transform:translateX(6px)}50%{transform:translateX(-3px)}100%{background:#69f5e008;transform:none}}
.is-live .order-stage:not(.is-complete) .plan-foot{opacity:.25}
.is-complete .plan-foot{text-shadow:0 0 14px var(--lime)}
.is-complete .day-plan{border-color:#dbff5788;box-shadow:0 0 40px #dbff571c}

/* Without the live scene (no JS, paused, reduced motion): a calm before/after picture. */
.scene-order:not(.is-live) .chaos-bit{opacity:.38;text-decoration:line-through}
.scene-order:not(.is-live) .scan-beam{display:none}

/* Desktop: the whole scene pins while the scanner sweeps left → right. */
@media(min-width:901px){
  .scene-order.is-live .order-track{height:230vh}
  .scene-order.is-live .order-sticky{position:sticky;top:0;height:100vh}
}

/* Phone: the copy scrolls first, then the stage pins and the scanner sweeps top → bottom. */
@media(max-width:900px){
  .order-sticky{display:block}
  .order-copy{margin-bottom:24px}
  .order-copy .section-intro{font-size:18px}
  .order-steps li{font-size:16px;padding:11px 12px;gap:12px}
  .order-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(150px,1fr) auto;height:auto;min-height:0;padding:12px;gap:10px}
  .chaos-field{min-height:230px}
  .order-hud{font-size:9px;letter-spacing:.1em}
  .chaos-bit{font-size:13px;padding:6px 9px;max-width:54%}
  .chaos-bit:nth-child(1){--x:2%;--y:5%;--r:-4deg}
  .chaos-bit:nth-child(2){--x:48%;--y:2%;--r:3deg}
  .chaos-bit:nth-child(3){--x:6%;--y:23%;--r:2deg}
  .chaos-bit:nth-child(4){--x:44%;--y:31%;--r:-3deg}
  .chaos-bit:nth-child(5){--x:1%;--y:49%;--r:4deg}
  .chaos-bit:nth-child(6){--x:50%;--y:57%;--r:-2deg}
  .chaos-bit:nth-child(7){--x:6%;--y:73%;--r:-5deg}
  .chaos-bit:nth-child(8){--x:45%;--y:83%;--r:3deg}
  .scan-beam{top:0;bottom:auto;left:-6px;right:-6px;width:auto;height:2px;transform:translateY(calc(var(--beam,0) * var(--field-h,0px)))}
  .scan-beam:after{background:linear-gradient(90deg,var(--cyan),var(--lime))}
  .scan-beam:before{top:auto;bottom:2px;left:0;right:0;width:auto;height:70px;background:linear-gradient(0deg,#dbff5716,transparent)}
  .plan-slots li{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:6px 8px;font-size:13px}
  .plan-slots time{font-size:11px}
  .plan-slots em{font-size:8px;padding:2px 4px}
  .is-live .plan-slots li:not(.is-filled):after{left:52px}
  /* Sticky stays inside its parent's content box, so the scroll runway is content, not padding. */
  .scene-order.is-live .order-sticky:after{content:"";display:block;height:100svh}
  .scene-order.is-live .order-stage{position:sticky;top:10px;height:calc(100svh - 96px)}
  .scene-order.is-live .chaos-field{min-height:0}
}

/* ---------- Scene 3: Twój dzień (neon city 06:00 → 22:00) ---------- */
.scene-day{padding-bottom:70px}
.scene-day h2{font-size:clamp(36px,4vw,58px)}
.day-sticky{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;grid-template-areas:"copy city" "moments city";column-gap:clamp(28px,3.5vw,48px);row-gap:20px;align-items:start}
.day-copy{grid-area:copy}
.day-copy .section-intro{margin:20px 0 0;font-size:19px}
.day-city{grid-area:city;align-self:center}
.day-moments{grid-area:moments;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.day-moment{padding:11px 16px;border-left:2px solid var(--line);color:var(--muted);transition:border-color .3s,background .3s,color .3s}
.day-moment h3{font-size:20px;margin:4px 0;color:var(--text)}
.day-moment p{margin:0;font-size:16px;line-height:1.45}
.moment-time{all:unset;cursor:pointer;font:600 11px var(--font-display);letter-spacing:.16em;color:#6c9d9c}
.moment-time:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.moment-time time{color:var(--cyan);margin-right:6px}
.day-moment.is-active{border-left-color:var(--lime);background:linear-gradient(90deg,#dbff5712,transparent);color:#cfdcdf}
.day-moment.is-active .moment-time time{color:var(--lime)}

.day-city{position:relative;height:min(620px,calc(100vh - 120px));min-height:500px;overflow:hidden;border:1px solid #22343b;background:linear-gradient(#070b1c,#140b28 70%,#2a0f3a);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.city-base,.city-fx{position:absolute;inset:0;display:block;width:100%;height:100%}
.city-fx{mix-blend-mode:screen}
/* Cinematic finish: a soft vignette and faint scan lines over the rendered city. */
.day-city:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 52%,#000b 100%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
.phone-glow{position:absolute;z-index:3;right:calc(7% - 80px);top:54%;width:380px;height:380px;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,#69f5e024,transparent 62%);pointer-events:none}
.day-hud{position:absolute;z-index:4;right:20px;top:16px}
.day-clock{font:600 30px var(--font-display);letter-spacing:.06em;color:#eafcff;text-shadow:0 0 18px #69f5e066}
.day-bar{position:absolute;z-index:4;left:20px;right:20px;bottom:14px;height:2px;background:#ffffff14}
.day-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--lime));transform:scaleX(var(--day-p,0));transform-origin:left;box-shadow:0 0 10px var(--lime)}
.day-sample{position:absolute;z-index:4;left:20px;bottom:24px;font:600 9px var(--font-display);letter-spacing:.16em;color:#ffffff5c}
.day-phone{position:absolute;z-index:5;right:7%;top:54%;width:min(220px,38%);aspect-ratio:9/19;translate:0 -50%;border:1.5px solid #3b5761;border-radius:34px;background:#04070b;box-shadow:0 0 0 5px #0a1116,0 0 0 6.5px #2a3d45,0 40px 80px #000e,0 0 50px #69f5e022;overflow:hidden}
.phone-notch{position:absolute;z-index:2;top:9px;left:50%;width:64px;height:16px;margin-left:-32px;border-radius:10px;background:#000}
.day-phone:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#ffffff12,transparent 30%,transparent 72%,#69f5e00a)}
.phone-status{position:absolute;top:11px;left:20px;right:20px;display:flex;justify-content:space-between;margin:0;font:600 8px var(--font-display);letter-spacing:.06em;color:#9fb8bd;pointer-events:none}
.day-screen{position:absolute;inset:42px 12px 16px;display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;font-size:13px;line-height:1.3;color:#d6e4e6}
.day-screen.is-active{opacity:1;visibility:visible;animation:screen-in .45s steps(4,end)}
@keyframes screen-in{0%{opacity:0;clip-path:inset(0 0 70% 0);transform:translateX(6px)}50%{opacity:1;clip-path:inset(30% 0 0 0);transform:translateX(-3px)}100%{clip-path:inset(0);transform:none}}
.scr-head{display:flex;justify-content:space-between;gap:6px;margin:0;font:600 9px var(--font-display);letter-spacing:.14em;color:var(--cyan)}
.scr-head b{color:var(--lime);font-weight:600}
.scr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.scr-stats span{display:grid;padding:6px 2px;border:1px solid #69f5e033;background:#69f5e00c;font-size:10px;color:var(--muted);text-align:center}
.scr-stats b{font:700 20px var(--font-display);color:var(--text)}
.scr-stats .is-late b,.scr-list .is-late{color:var(--alert)}
.scr-list,.scr-notes,.scr-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.scr-list li,.scr-checks li,.scr-notes li{display:flex;gap:8px;align-items:center;padding:7px 8px;border-left:2px solid #69f5e055;background:#ffffff08}
.scr-list time{font:600 10px var(--font-display);color:var(--cyan)}
.scr-list i{width:9px;height:9px;border:1px solid currentColor;flex:none}
.scr-ghost{margin:auto 0 0;padding:8px;border:1px solid #dbff5766;color:var(--lime);font-size:12px}
.scr-input{margin:0;padding:10px;border:1px solid var(--lime);background:#dbff570d;font-family:var(--font-display)}
.scr-input i{display:inline-block;width:7px;height:13px;margin-left:3px;background:var(--lime);vertical-align:-2px;animation:cursor 1s steps(1,end) infinite}
.scr-chips{display:flex;gap:6px;flex-wrap:wrap}
.scr-chips span{padding:4px 8px;border:1px solid #2f5358;font-size:11px}
.scr-chips .is-on{border-color:var(--lime);color:var(--lime)}
.scr-ok{margin:auto 0 0;color:var(--lime);font:600 12px var(--font-display);letter-spacing:.06em}
.scr-title{margin:0;font:600 16px var(--font-display);color:var(--text)}
.scr-notes li:before{content:"•";color:var(--cyan)}
.scr-notes .is-pick{border-left-color:var(--lime);background:#dbff5714;color:var(--text)}
.scr-link{margin:0;color:var(--pink);font-size:12px}
.scr-checks li:before{content:"";width:11px;height:11px;border:1px solid #69f5e099;flex:none}
.scr-checks .is-done{color:#8fa3a8;text-decoration:line-through}
.scr-checks .is-done:before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 8px #dbff5788}
.scr-move{margin:0;color:var(--pink);font-size:12px}

/* Desktop: the city pins and the clock follows the scroll; only the current moment is expanded. */
@media(min-width:901px){
  .scene-day.is-live .day-track{height:320vh}
  .scene-day.is-live .day-sticky{position:sticky;top:0;height:100vh;align-content:center}
  .scene-day.is-live .day-moment:not(.is-active) p{display:none}
}

/* Phone: the city stays in place, the moments are cards you swipe sideways. */
@media(max-width:900px){
  .day-sticky{display:block}
  .day-copy{margin-bottom:20px}
  .day-copy .section-intro{font-size:18px}
  .day-city{height:420px;min-height:0}
  .day-city:after{content:"PRZESUŃ KARTY →";position:absolute;z-index:4;right:16px;bottom:22px;font:600 9px var(--font-display);letter-spacing:.16em;color:#ffffff99}
  .phone-glow{right:50%;translate:50% -50%;width:300px;height:300px}
  .day-phone{right:50%;translate:50% -50%;top:52%;width:156px;border-radius:26px}
  .phone-notch{width:48px;height:12px;margin-left:-24px;top:7px}
  .phone-status{top:8px;left:14px;right:14px;font-size:7px}
  .day-screen{font-size:10px;gap:6px;inset:30px 9px 12px}
  .scr-stats b{font-size:16px}
  .scr-list li,.scr-checks li,.scr-notes li{padding:5px 6px}
  .day-clock{font-size:22px}
  .day-sample{display:none}
  .day-moments{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 2px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .day-moments::-webkit-scrollbar{display:none}
  .day-moment{flex:0 0 84%;scroll-snap-align:center;border:1px solid var(--line);border-left-width:2px;background:#0b1117;padding:14px}
  .day-moment p{font-size:15px}
}

/* ---------- Scene 4: Spróbuj sam z duszkiem ---------- */
.scene-try h2{font-size:clamp(34px,3.6vw,54px)}
.try-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:start}
.try-copy .section-intro{margin:20px 0 24px;font-size:19px}
.try-terminal{border:1px solid #69f5e055;background:#070c12f2;box-shadow:0 0 40px #69f5e014;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.term-bar{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #69f5e022;font:600 10px var(--font-display);letter-spacing:.16em;color:#6c9d9c}
.term-line{display:flex;align-items:center;gap:10px;padding:14px}
.term-prompt{font:700 22px var(--font-display);color:var(--lime)}
.term-line input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid #69f5e055;border-radius:0;padding:10px 2px;font:600 19px var(--font-display);color:var(--text);caret-color:var(--lime);outline:none}
.term-line input:focus{border-bottom-color:var(--lime)}
.term-line input::placeholder{color:#58707a}
.term-send{min-height:46px;padding:10px 18px;font-size:16px;gap:10px}
.term-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.term-chips button{min-height:36px;padding:7px 11px;border:1px dashed #69f5e055;background:#69f5e00a;color:#bfe9e3;font:600 13px var(--font-display);cursor:pointer}
.term-chips button:hover,.term-chips button:focus-visible{border-style:solid;border-color:var(--lime);color:var(--lime)}
.term-log{list-style:none;margin:0;padding:0 14px;display:grid;gap:4px;font:600 12px var(--font-display);letter-spacing:.08em;color:var(--cyan)}
.term-log:not(:empty){padding-bottom:14px}
.term-log b{color:var(--lime);font-weight:600}
.try-card{display:grid;gap:6px;margin-top:16px;padding:16px 18px;border:1px solid var(--lime);background:linear-gradient(120deg,#161d08f0,#0a141aeb);box-shadow:0 0 30px #dbff5726}
.try-card[hidden]{display:none}
.try-card.is-new{animation:card-in .5s steps(4,end) both}
.try-path{font:600 10px var(--font-display);letter-spacing:.16em;color:var(--cyan)}
.try-card strong{font:600 22px var(--font-display);color:var(--text);overflow-wrap:anywhere}
.try-due{justify-self:start;padding:4px 8px;border:1px solid #dbff5788;color:var(--lime);font:600 12px var(--font-display);letter-spacing:.1em}
.try-due.is-none{border-color:#69f5e055;color:var(--cyan)}
@keyframes card-in{0%{opacity:0;clip-path:inset(0 0 80% 0);transform:translateX(8px)}50%{opacity:1;clip-path:inset(40% 0 0 0);transform:translateX(-4px)}100%{clip-path:inset(0);transform:none}}
.try-companion .companion-lab{min-height:380px}
.try-companion .companion-dialogue{margin-top:20px}
.try-companion .drone-quote{font-size:clamp(20px,1.9vw,28px);min-height:110px}
.ghost-lab{margin:18px 0 12px;border:1px solid #2f5358;background:#0b151b}
.ghost-lab summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:10px 16px;cursor:pointer;list-style:none;font:600 15px var(--font-display);letter-spacing:.06em;color:var(--cyan)}
.ghost-lab summary::-webkit-details-marker{display:none}
.ghost-lab-sign{font-size:22px;transition:transform .25s}
.ghost-lab[open] .ghost-lab-sign{transform:rotate(45deg)}
.ghost-lab>p{margin:0 16px;font-size:15px;color:var(--muted)}
.ghost-lab .companion-tools{margin:14px 16px 16px}
/* Phone: heading, ghost, terminal, result, then the ghost's words — so the reaction stays in view. */
@media(max-width:900px){
  .try-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .try-copy,.try-companion{display:contents}
  .try-copy>.eyebrow{order:1}.try-copy>h2{order:2}.try-copy>.section-intro{order:3}
  .try-companion .companion-lab{order:4;min-height:230px;margin-bottom:18px}
  .try-terminal{order:5}.try-card{order:6}
  .try-companion .companion-dialogue{order:7}
  .try-copy>.demo-note{order:8;margin:18px 0 0}
  .term-line{flex-wrap:wrap}
  .term-line input{flex:1 1 70%;font-size:17px}
  .term-send{flex:1 1 100%}
  .try-companion .drone-quote{min-height:90px}
}

/* Desktop: hero, ghost and dock share the first screen. */
@media(min-width:801px){
  .hero.scene-boot{min-height:0;padding:40px 0 34px;row-gap:4px}
  .scene-boot .hologram{height:clamp(480px,calc(100vh - 330px),600px)}
}
.scene-boot.is-talking .hero-hail{border-color:var(--cyan);box-shadow:0 0 34px #69f5e033,0 10px 35px #0008}

/* ---------- Scanner: the ghost narrates from the stage header, the beam stays a clean line ---------- */
.order-hud{align-items:center}
.order-assistant{display:flex;align-items:center;gap:10px;min-width:0}
.order-ghost{flex:none;width:52px;height:56px;color:var(--cyan);filter:drop-shadow(0 0 10px #69f5e088);animation:levitate 4s ease-in-out infinite}
.order-ghost svg{width:100%;height:100%;overflow:visible}
.order-say{margin:0;padding:7px 12px;border:1px solid #69f5e066;background:#0d1d22e6;font:600 13px/1.35 var(--font-display);letter-spacing:0;color:var(--text);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.order-say:before{content:"DOCKVI AI";display:block;margin-bottom:2px;font-size:9px;letter-spacing:.16em;color:var(--lime)}
.order-count{align-self:flex-start;color:var(--lime)}
.is-complete .order-say{border-color:var(--lime)}
.is-complete .order-ghost{color:var(--lime)}
@media(max-width:900px){.order-ghost{width:40px;height:44px}.order-say{font-size:12px;padding:6px 10px}}

/* ---------- Beta: the panel unfolds like a hatch, then the answers open one by one ---------- */
.story-access{--unfold:1;--faq:0;display:block}
.access-panel{--t:calc((1 - var(--unfold)) * 48%);--b:calc(100% - (1 - var(--unfold)) * 48%);position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:start;padding:clamp(28px,4vw,52px);border:1px solid #dbff5740;background:linear-gradient(150deg,#101b0ff2,#080b10f7 55%);box-shadow:0 0 60px #dbff570f;clip-path:polygon(0 var(--t),calc(100% - 26px) var(--t),100% calc(var(--t) + 26px),100% var(--b),26px var(--b),0 calc(var(--b) - 26px))}
.hatch-lines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.hatch-lines i{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--lime) 12%,var(--cyan) 88%,transparent);box-shadow:0 0 22px #dbff57aa}
.hatch-lines i:nth-child(1){top:var(--t)}
.hatch-lines i:nth-child(2){top:calc(var(--b) - 3px)}
.hatch-lines span{position:absolute;left:0;right:0;top:50%;translate:0 -50%;text-align:center;font:600 12px var(--font-display);letter-spacing:.28em;color:var(--lime);text-shadow:0 0 12px #dbff5788}
.story-access.is-unfolding .hatch-lines{opacity:clamp(0,(1 - var(--unfold)) * 4,1)}
.story-access.is-unfolding .access-copy,.story-access.is-unfolding .access-faq{opacity:clamp(0,(var(--unfold) - .45) * 2.4,1)}
.access-faq{position:relative;padding-left:20px;border-left:2px solid var(--line)}
.access-faq:before{content:"";position:absolute;left:-2px;top:0;width:2px;height:calc(var(--faq) * 100%);background:var(--lime);box-shadow:0 0 12px #dbff5799;transition:height .35s ease}
.access-faq details.is-current summary{color:var(--lime)}
.access-faq details[open] p{animation:answer-in .4s steps(4,end)}
@keyframes answer-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@media(min-width:901px){
  .story-access.is-unfolding .access-track{height:240vh}
  .story-access.is-unfolding .access-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  .story-access.is-unfolding .access-panel{width:100%}
}
@media(max-width:900px){.access-panel{grid-template-columns:1fr;padding:24px 18px}}