/* r17 · 23.10.2026: the changes from Grzegorz's Figma comments on v16 (Kis Kis). Everything else is r16 as it was.
   Each rule names its comment (#n = order id in strona/figma/komentarze/2026-10-22-23-46.md). */

/* #8 · the white phone outline over the artist on the first frame (as in v1). Same box as .h11-phone at rest;
   r11-hero.js puts it on the singer (left = cx) and fades it while the real phone grows into it. */
.h17-ghost { position: absolute; left: 50%; top: 50%; width: calc(417.3 * var(--u)); height: calc(871.3 * var(--u)); margin: calc(-435.65 * var(--u) - 3vh) 0 0 calc(-208.65 * var(--u)); border-radius: calc(63 * var(--u)); pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 0 0 calc(7 * var(--u)) rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.18), 0 30px 80px -30px rgba(0,0,0,.6);
  background: linear-gradient(140deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.03) 28%, rgba(255,255,255,0) 52%); will-change: opacity; }
.h17-ghost::after { content: ""; position: absolute; inset: calc(13.65 * var(--u)); border-radius: calc(49.35 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
html.rm .h17-ghost { display: none; }
/* phones: as in v1, a smaller outline under the copy (the headline keeps the top); the real phone grows out of it */
@media (max-width: 759px) {
  .h17-ghost { --gh: min(44svh, 400px); top: 40svh; width: calc(var(--gh) * .479); height: var(--gh); margin: 0 0 0 calc(var(--gh) * -.2395); border-radius: calc(var(--gh) * .0723); }
  .h17-ghost::after { inset: calc(var(--gh) * .0157); border-radius: calc(var(--gh) * .0566); }
}

/* #12, #13 · one line beside the phone for each Discover card (desktop: left of the phone; phones: under it) */
.h17-say { position: absolute; left: var(--gut); top: 50%; width: min(30vw, 440px); margin-top: -1.2em; font-weight: 800; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -.035em; color: var(--paper); opacity: 0; pointer-events: none; will-change: transform, opacity; text-wrap: balance; }
.h17-say::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 22px; background: var(--lime); }
@media (max-width: 759px) {
  .h17-say { left: 20px; right: 20px; top: 7svh; width: auto; margin: 0; font-size: 21px; line-height: 1.15; text-align: center; }
  .h17-say::before { display: none; }
}
html.rm .h17-say { display: none; }
.h11-copy { z-index: 2; }

/* #11 · the map as a clip: when it arrives the camera settles onto ENEA Stage, the markers drop in one by one,
   the route marches, people walk to the stage, two beams sweep over it. Time-based inside the phone only. */
.h11-mapimg img { transform-origin: calc(306 * var(--u)) calc(574 * var(--u)); }
.h11-map.live .h11-mapimg img { animation: h17-cam 2.8s cubic-bezier(.2,.7,.2,1) both, h17-drift 16s ease-in-out 2.8s infinite alternate; }
@keyframes h17-cam { from { transform: scale(1.34) translate3d(calc(-14 * var(--u)), calc(26 * var(--u)), 0); filter: brightness(.7); } to { transform: none; filter: none; } }
@keyframes h17-drift { from { transform: scale(1); } to { transform: scale(1.045) translate3d(calc(-4 * var(--u)), calc(-3 * var(--u)), 0); } }
.h11-map .h11-mk, .h11-map .h11-sign, .h11-map .h11-route, .h11-map .h17-flow { opacity: 0; }
.h11-map.live .h11-mk { animation: h17-pop .55s cubic-bezier(.2,.9,.3,1.25) both; }
.h11-map.live .h11-mk.you { animation-delay: 1.1s; }
.h11-map.live .h11-mk[style*="--x:209"] { animation-delay: 1.45s; }
.h11-map.live .h11-mk[style*="--x:120"] { animation-delay: 1.7s; }
@keyframes h17-pop { from { opacity: 0; transform: translate(-50%, -30%) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.h11-map.live .h11-sign { animation: h17-sign .6s cubic-bezier(.2,.7,.2,1) .8s both; }
@keyframes h17-sign { from { opacity: 0; transform: translate(-50%, calc(-14 * var(--u))); } to { opacity: 1; transform: translate(-50%, 0); } }
.h11-map.live .h11-route { animation: h17-in .4s ease-out 2s both; }
.h11-route path { animation: h17-march 1.1s linear infinite; }
@keyframes h17-march { to { stroke-dashoffset: -18; } }
.h17-flow { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(844 * var(--u)); pointer-events: none; fill: #F4F2F8; }
.h17-flow circle { opacity: .72; }
.h11-map.live .h17-flow { animation: h17-in .8s ease-out 1.2s both; }
@keyframes h17-in { from { opacity: 0; } to { opacity: 1; } }
.h17-beam { position: absolute; left: calc(195 * var(--u)); top: calc(300 * var(--u)); width: calc(26 * var(--u)); height: calc(170 * var(--u)); margin-left: calc(-13 * var(--u)); transform-origin: 50% 100%; translate: 0 -100%; background: linear-gradient(0deg, rgba(255,150,190,.55), rgba(255,150,190,0)); clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.h11-map.live .h17-beam.a { animation: h17-in .6s ease-out 1.6s both, h17-sweep 3.4s ease-in-out 1.6s infinite alternate; }
.h11-map.live .h17-beam.b { animation: h17-in .6s ease-out 1.8s both, h17-sweep 3s ease-in-out 1.8s infinite alternate-reverse; background: linear-gradient(0deg, rgba(199,230,53,.45), rgba(199,230,53,0)); }
@keyframes h17-sweep { from { rotate: -34deg; } to { rotate: 30deg; } }
@media (prefers-reduced-motion: reduce) { .h11-map .h11-mk, .h11-map .h11-sign, .h11-map .h11-route, .h11-map .h17-flow { opacity: 1; animation: none !important; } .h11-map .h11-mapimg img, .h17-beam { animation: none !important; } }

/* #19 · the claim is positive now: two white lines, then the rotating lime line. The phrases are long, so the type
   steps down a little and the rotating line keeps its height (no jump between phrases) */
.claim-h { font-size: clamp(34px, 4.6vw, 72px); }
.claim-h .word { display: block; min-height: 1.05em; }
@media (max-width: 759px) { .claim-h .word { min-height: 2.1em; } }

/* #18 · the joke sits in the label, same size */
.bn-joke { font-weight: inherit; color: var(--mute); }

/* #28 · the report pages in A4 proportions (210 × 297), not their size */
.rep-stage { width: min(calc(100% - 32px), calc(min(78vh, 920px) * .7071)); height: auto; aspect-ratio: 210 / 297; top: 50%; }
.rep-card { padding: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px); }
.rc-top { font-size: 9.5px; flex-wrap: wrap; row-gap: 6px; }
.rc-h { margin-top: clamp(12px, 2vh, 22px); font-size: clamp(22px, 2.3vw, 34px); }
.rc-sub { font-size: 12px; }
.rc-more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.rc-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: clamp(12px, 2vh, 20px); }
.rc-slot { min-height: 0; padding-top: 8px; }
.rc-slot b { font-size: clamp(22px, 2.2vw, 32px); }
.rc-row { padding: 7px 0; font-size: 11.5px; } .rc-row .rc-t b { font-size: 12.5px; } .rc-row .rc-v { font-size: 13.5px; }
/* #29 · a chart on the page: people inside the gates, hour by hour */
.rc-chart { margin-top: clamp(12px, 2vh, 20px); padding-top: 10px; border-top: 1px solid rgba(0,0,0,.14); }
.rc-chart figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #4b4b4b; }
.rc-chart figcaption b { font-weight: 750; color: #0B0C0E; }
.rc-bars { margin-top: 8px; height: clamp(36px, 5.6vh, 60px); display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; align-items: end; }
.rc-bars i { display: block; height: calc(var(--h) * 100%); border-radius: 2px 2px 0 0; background: #0B0C0E; opacity: .82; transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.rc-bars i:nth-child(n) { transition-delay: calc(var(--h) * .25s); }
.rc-bars i.pk { background: var(--lime); opacity: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.rep.is-more .rc-bars i { transform: none; }
.rc-ax { margin-top: 4px; display: flex; justify-content: space-between; font-size: 9.5px; color: #777; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .rep-stage { width: min(calc(100% - 24px), calc(64vh * .7071)); top: 51%; }
  .rc-chart figcaption span { display: none; } .rc-bars { height: 44px; }
  .rc-row:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rc-bars i { transform: none; } }

/* #25, #27 · friends on the day's photo carry real faces (Find My / Bump), not emoji */
.kjr__chip--faces { padding-left: 6px; }
.kjr__faces { display: inline-flex; }
.kjr .kjr__faces img { position: static; inset: auto; max-width: none; flex: none; width: 30px !important; height: 30px !important; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0,0,0,.4); }
.kjr .kjr__faces img + img { margin-left: -8px; }
@media (max-width: 700px) { .kjr .kjr__faces img { width: 24px !important; height: 24px !important; } }

/* #31–#34 · Industry vs LineApp, the line-up: the LineApp side is the schedule grid in HTML with the same seven artists
   as the industry list (photos for all of them), and Ellis Rook's tile plays like the Artist View. 1 pt = --p. */
.vs4-ph .lay.us { container-type: inline-size; z-index: 1; }
.g17 { --p: calc(100cqw / 390); position: absolute; inset: 0; background: linear-gradient(180deg, #17121B, #0E0B11); color: #F4F2F8; font-family: var(--f); overflow: hidden; letter-spacing: 0; line-height: 1.2; }
.g17-sb { position: absolute; left: calc(36 * var(--p)); right: calc(30 * var(--p)); top: calc(18 * var(--p)); display: flex; justify-content: space-between; font-size: calc(16 * var(--p)); font-weight: 600; }
.g17-sb i { width: calc(70 * var(--p)); height: calc(12 * var(--p)); background: radial-gradient(circle at 92% 50%, #fff 0 calc(9 * var(--p)), transparent 0); opacity: .9; }
.g17-head { position: absolute; left: calc(18 * var(--p)); right: calc(18 * var(--p)); top: calc(56 * var(--p)); display: flex; justify-content: space-between; align-items: center; }
.g17-head b { font-size: calc(30 * var(--p)); font-weight: 800; letter-spacing: -.02em; }
.g17-seg { display: flex; padding: calc(4 * var(--p)); border-radius: 999px; background: rgba(255,255,255,.08); font-size: calc(13 * var(--p)); font-weight: 600; }
.g17-seg span { padding: calc(6 * var(--p)) calc(14 * var(--p)); border-radius: 999px; color: rgba(244,242,248,.7); }
.g17-seg .on { background: #fff; color: #111; }
.g17-days { position: absolute; left: calc(16 * var(--p)); top: calc(108 * var(--p)); display: flex; gap: calc(8 * var(--p)); font-size: calc(13 * var(--p)); font-weight: 600; white-space: nowrap; }
.g17-days span { padding: calc(8 * var(--p)) calc(13 * var(--p)); border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(244,242,248,.72); }
.g17-days .on { background: #fff; color: #111; }
.g17-cols { position: absolute; left: calc(54 * var(--p)); right: 0; top: calc(156 * var(--p)); height: calc(36 * var(--p)); display: grid; grid-template-columns: repeat(4, calc(84 * var(--p))); align-items: center; font-size: calc(12.5 * var(--p)); font-weight: 600; color: rgba(244,242,248,.82); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.g17-cols span { text-align: center; }
.g17-body { position: absolute; inset: 0; }
.g17-hr { position: absolute; left: calc(8 * var(--p)); top: calc(var(--y) * var(--p)); transform: translateY(-50%); font-size: calc(11 * var(--p)); color: rgba(244,242,248,.5); font-variant-numeric: tabular-nums; }
.g17-hl { position: absolute; left: calc(52 * var(--p)); right: 0; top: calc(var(--y) * var(--p)); height: 1px; background: rgba(255,255,255,.05); }
.g17-t { position: absolute; left: calc(var(--x) * var(--p)); top: calc(var(--y) * var(--p)); width: calc(80 * var(--p)); height: calc(var(--h) * var(--p)); border-radius: calc(12 * var(--p)); overflow: hidden; background: #241c28; padding: calc(7 * var(--p)) calc(7 * var(--p)); display: flex; flex-direction: column; gap: calc(2 * var(--p)); }
.g17-t > img, .g17-t > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.g17-t > video { object-position: 50% 40%; }
.g17-t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,17,.82) 0, rgba(14,11,17,.35) 55%, rgba(14,11,17,.1)); z-index: 1; }
.g17-t b, .g17-t small, .g17-t .g17-eq, .g17-t .g17-ck { position: relative; z-index: 2; }
.g17-t b { font-size: calc(12.5 * var(--p)); font-weight: 750; line-height: 1.1; padding-right: calc(14 * var(--p)); }
.g17-t small { font-size: calc(11 * var(--p)); color: rgba(244,242,248,.82); font-variant-numeric: tabular-nums; }
.g17-t.saved { box-shadow: inset 0 0 0 calc(2 * var(--p)) #fff; }
.g17-t.past { opacity: .5; }
.g17-ck { position: absolute !important; right: calc(6 * var(--p)); top: calc(6 * var(--p)); width: calc(18 * var(--p)); height: calc(18 * var(--p)); border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; }
.g17-ck svg { width: 80%; height: 80%; }
.g17-eq { display: inline-flex; align-items: flex-end; gap: calc(2 * var(--p)); height: calc(12 * var(--p)); margin-top: calc(2 * var(--p)); }
.g17-eq i { width: calc(3 * var(--p)); height: 100%; border-radius: 1px; background: #C7E635; transform-origin: bottom; animation: h11-eq .8s ease-in-out infinite alternate; }
.g17-eq i:nth-child(2) { animation-delay: -.3s; } .g17-eq i:nth-child(3) { animation-delay: -.55s; }
.g17-now { position: absolute; left: calc(4 * var(--p)); right: 0; top: calc(var(--y) * var(--p)); height: 2px; margin-top: -1px; background: #fff; z-index: 3; }
.g17-now b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: calc(3 * var(--p)) calc(7 * var(--p)); border-radius: 999px; background: #fff; color: #111; font-size: calc(11 * var(--p)); font-weight: 700; }
.g17-mini { position: absolute; left: calc(14 * var(--p)); right: calc(14 * var(--p)); bottom: calc(96 * var(--p)); height: calc(58 * var(--p)); border-radius: calc(18 * var(--p)); background: rgba(40,32,46,.94); box-shadow: 0 8px 24px rgba(0,0,0,.5); display: flex; align-items: center; gap: calc(10 * var(--p)); padding: 0 calc(14 * var(--p)) 0 calc(8 * var(--p)); z-index: 4; }
.g17-mini img { width: calc(42 * var(--p)); height: calc(42 * var(--p)); border-radius: calc(8 * var(--p)); object-fit: cover; }
.g17-mini span { flex: 1; display: grid; } .g17-mini b { font-size: calc(14 * var(--p)); } .g17-mini small { font-size: calc(12 * var(--p)); color: rgba(244,242,248,.65); }
.g17-pause { width: calc(14 * var(--p)); height: calc(16 * var(--p)); border-left: calc(4.5 * var(--p)) solid #fff; border-right: calc(4.5 * var(--p)) solid #fff; }
.g17-tab { position: absolute; left: 0; right: 0; bottom: 0; height: calc(84 * var(--p)); padding-top: calc(14 * var(--p)); display: flex; justify-content: space-around; background: rgba(14,11,17,.96); border-top: 1px solid rgba(255,255,255,.08); font-size: calc(11.5 * var(--p)); font-weight: 600; color: rgba(244,242,248,.6); z-index: 4; }
.g17-tab .on { color: #A99AF3; }