/* r18 · 23.10.2026: the artist page in the opening, after Grzegorz's notes on r17.
   Friends zoom (three variants on the test page), Going pinned instead of Listen, the video grid cut, Navigate that reads. */

.h11 { height: 860vh; }   /* more scroll for the same story: the zoom and the map no longer rush */

/* Going: replaces Listen in the hero, then pinned under the top bar (r11-hero.js moves it with translate/scale) */
.h11-page > .h11-go { left: calc(20 * var(--u)); z-index: 6; transform-origin: 0 50%; will-change: translate, scale; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.35); }
.h11-page > .h11-go:not(.on) { background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.h11-page > .h11-go.pinned { box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.55); }

/* the touch dot (Apple demo style) */
.h18-touch { position: absolute; left: calc(var(--tx, 195) * var(--u)); top: calc(var(--ty, 420) * var(--u)); width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.42); box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.7), 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.35); opacity: 0; pointer-events: none; z-index: 30; }
.h18-touch.on { animation: h18-touch .75s cubic-bezier(.2,.7,.2,1) both; }
@keyframes h18-touch { 0% { opacity: 0; transform: scale(1.5); } 25% { opacity: 1; transform: scale(1); } 45% { transform: scale(.82); } 70% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* the friends zoom: avatars pop in turn once the zoom has landed (all variants) */
.jp-big i { transform: scale(var(--grow, 1)); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.z-pop .jp-big span { animation: h18-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.z-pop .jp-big span:nth-child(2) { animation-delay: .08s; } .z-pop .jp-big span:nth-child(3) { animation-delay: .16s; }
.z-pop .jp-big span:nth-child(4) { animation-delay: .24s; } .z-pop .jp-big span:nth-child(5) { animation-delay: .32s; }
@keyframes h18-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.z-pop .jp-big i { box-shadow: 0 0 0 calc(2 * var(--u)) #C7E635, 0 0 calc(18 * var(--u)) rgba(199,230,53,.35); transition: box-shadow .3s ease-out; }
/* B · the glass card with the copy of the row */
.h18-lift { position: absolute; z-index: 7; padding: calc(14 * var(--u)); border-radius: calc(26 * var(--u)); background: rgba(24,19,28,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px -20px rgba(0,0,0,.85); opacity: 0; visibility: hidden; transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity; }
.h18-lift .jp-big { margin: 0; }
/* C · the spotlight: everything in the screen darkens except the row */
.h18-spot { position: absolute; left: calc(var(--sx, 0) * var(--u)); top: calc(var(--sy, 0) * var(--u)); width: calc(var(--sw, 0) * var(--u)); height: calc(var(--sh, 0) * var(--u)); border-radius: calc(20 * var(--u)); box-shadow: 0 0 0 200vmax rgba(5,5,7,.72), inset 0 0 0 calc(1.5 * var(--u)) rgba(199,230,53,.8); opacity: 0; visibility: hidden; pointer-events: none; z-index: 11; }

/* the picker for the three zooms (test page only); shows while the artist page is on */
.h18-pick { position: absolute; right: var(--gut); bottom: 24px; z-index: 9; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed rgba(255,255,255,.35); border-radius: 14px; background: rgba(10,10,11,.7); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .3s ease-out; }
.h18-pick.on { opacity: 1; pointer-events: auto; }
.h18-pick > span { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; color: var(--mute); margin-right: 4px; }
.h18-pick button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: none; color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; }
.h18-pick button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
@media (max-width: 759px) { .h18-pick { left: 12px; right: 12px; bottom: 84px; flex-wrap: wrap; justify-content: center; } .h18-pick > span { width: 100%; text-align: center; } }

/* Navigate to ENEA Stage: bigger, and it glows before the tap so the cut to the map is expected */
.jp-where-btn { height: calc(58 * var(--u)); font-size: calc(17 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(199,230,53,.25); transition: transform .12s ease-out; }
.jp-where-btn.hint { animation: h18-glow 1s ease-in-out infinite; }
@keyframes h18-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(199,230,53,.55), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(199,230,53,.25); } 50% { box-shadow: 0 0 0 calc(10 * var(--u)) rgba(199,230,53,0), 0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(199,230,53,.45); } }
.jp-where-btn.press { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) { .h18-touch, .h18-pick, .h18-lift, .h18-spot { display: none; } .jp-where-btn.hint, .z-pop .jp-big span { animation: none; } }
html.rm .h11-page > .h11-go { translate: none !important; scale: none !important; }