/* The pinned scene: hero words, story beats, pins, the no-WebGL stack. Loaded after style.css. */
/* ========== the scene ========== */
.jr { position: relative; height: 700vh; background: var(--gece); --game: #7B2EFF; --p0: 1; --end: 0; --mx: 0; --my: 0;
  --hx-top: max(84px, 10.2vh); --hx-fs: min(8.2vw, 11vh); --hx-eb: 34px; }
.anchor { position: absolute; left: 0; width: 1px; pointer-events: none; }
.jr-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.jr-bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(40% 50% at 24% 62%, color-mix(in srgb, var(--game) 20%, transparent), transparent 72%),
  radial-gradient(36% 60% at 80% 52%, rgb(123 46 255 / .3), transparent 74%),
  radial-gradient(90% 60% at 50% 0%, rgb(66 34 140 / .22), transparent 70%),
  var(--gece); }
.jr-bg::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); }
/* the last stop melts into the next dark section while the pinned scene scrolls away */
.jr-pin::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; z-index: 2; pointer-events: none; opacity: var(--end);
  background: linear-gradient(to bottom, transparent, var(--gece)); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.still-art { display: none; }

.hx { position: absolute; z-index: 0; left: 0; right: 0; top: var(--hx-top); margin: 0; padding-inline: var(--gutter);
  font-size: var(--hx-fs); font-stretch: 125%; font-weight: 480; letter-spacing: -.034em; line-height: 1; color: #F7F4FF;
  opacity: var(--p0); transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -10px), 0); }
.hx span { display: block; animation: rise 1.1s var(--ease) both; }
.hx-eyebrow { font-size: 15px; line-height: 18px; margin-bottom: 16px; font-stretch: 100%; font-weight: 560; letter-spacing: .01em; color: var(--sinyal); }
.hx-b { text-align: right; animation-delay: .12s !important; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.hx-side { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--hx-top) + var(--hx-eb) + var(--hx-fs) * 1.1); display: grid; gap: 10px; justify-items: start; max-width: 25em; opacity: var(--p0); animation: rise 1.1s var(--ease) .2s both; }
.hx-lead { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; color: rgb(246 243 252 / .8); }
/* words, one idea at a time */
.beat { position: absolute; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; color: #fff; will-change: opacity, transform; }
.beat h2 { font-stretch: 125%; font-weight: 480; letter-spacing: -.032em; line-height: 1.02; }
.beat p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.35; color: rgb(246 243 252 / .78); margin-top: 12px; }
.b-devices { left: 0; right: 0; top: max(100px, 12vh); text-align: center; }
.b-devices h2 { font-size: min(7.4vw, 14vh); }
.b-signal { left: var(--gutter); top: max(100px, 12vh); max-width: 40em; }
.bigms-label { margin: 0 0 4px !important; font-size: 15px !important; font-weight: 560; letter-spacing: .01em; color: rgb(246 243 252 / .72) !important; }
.b-signal h2 { max-width: 12em; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; font-stretch: 112%; font-weight: 540; line-height: 1.12; margin-top: 8px; }
.bigms { display: flex; align-items: baseline; gap: .06em; margin: 0 !important; color: var(--sinyal) !important; font-size: min(17vw, 30vh) !important; line-height: .86 !important; font-stretch: 125%; font-weight: 240; letter-spacing: -.07em; text-shadow: 0 0 80px rgb(25 211 197 / .4); }
.bigms small { font-size: .2em; letter-spacing: -.02em; font-weight: 400; }
.b-kasa { left: var(--gutter); top: 50%; translate: 0 -50%; max-width: 7em; font-size: min(5.4vw, 11vh); }
.b-kasa h2 { font-size: 1em; }
.b-kasa p { max-width: 15em; }
.b-rtx { left: 0; right: 0; bottom: 9vh; text-align: center; }
.b-rtx h2 { font-size: min(11vw, 22vh); text-shadow: 0 10px 70px rgb(0 0 0 / .65); }
.b-rtx p { color: rgb(246 243 252 / .9); text-shadow: 0 2px 24px rgb(0 0 0 / .85); }
.b-ask { left: 0; right: 0; top: max(104px, 13vh); text-align: center; }
.b-ask h2 { font-size: min(5.6vw, 9.4vh); text-shadow: 0 6px 50px rgb(0 0 0 / .7); }
.b-end { left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; padding-inline: var(--gutter); }
.b-end::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(64vw, 110vh); height: 56vh; translate: -50% -50%; z-index: -1; background: radial-gradient(closest-side, rgb(16 11 29 / .5), transparent); }
.b-end h2 { font-size: min(4.5vw, 7.4vh); text-shadow: 0 4px 40px rgb(0 0 0 / .6); }
.b-end h2 span { display: block; font-weight: 600; }
.b-end p { max-width: 24em; margin-inline: auto; color: rgb(255 255 255 / .9); text-shadow: 0 2px 20px rgb(0 0 0 / .7); }
.pin { position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 10px; font-size: 13px; font-weight: 520; color: #fff; white-space: nowrap; background: rgb(24 18 40 / .66); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); backdrop-filter: blur(14px); }
/* no WebGL, reduced motion or no JS at all: a plain stack over one still, every word readable */
:is(.jr.is-still, html:not(.js) .jr) { height: auto; }
:is(.jr.is-still, html:not(.js) .jr) .jr-pin { position: relative; height: auto; overflow: visible; display: grid; gap: 22px; padding: 96px var(--gutter) 40px; }
:is(.jr.is-still, html:not(.js) .jr) .jr-pin::after { display: none; }
:is(.jr.is-still, html:not(.js) .jr) :is(#gl, .pin, .tray-btn) { display: none; }
:is(.jr.is-still, html:not(.js) .jr) :is(.hx, .hx-side, .dock) { position: static; padding: 0; opacity: 1; transform: none; }
:is(.jr.is-still, html:not(.js) .jr) .hx { font-size: min(9vw, 96px); }
:is(.jr.is-still, html:not(.js) .jr) .hx-b { text-align: left; }
:is(.jr.is-still, html:not(.js) .jr) .dock { justify-content: flex-start; }
:is(.jr.is-still, html:not(.js) .jr) .dock-in { flex-wrap: wrap; }
:is(.jr.is-still, html:not(.js) .jr) .still-art { display: block; width: 100%; max-width: 980px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; }
:is(.jr.is-still, html:not(.js) .jr) .beat { position: static; opacity: 1; visibility: visible; transform: none !important; translate: none; text-align: left; max-width: none; padding: 0; font-size: 40px; }
:is(.jr.is-still, html:not(.js) .jr) .beat::before { display: none; }
:is(.jr.is-still, html:not(.js) .jr) .beat h2 { font-size: min(6vw, 52px); text-shadow: none; }
:is(.jr.is-still, html:not(.js) .jr) .beat p { margin-inline: 0; max-width: 32em; text-shadow: none; }
:is(.jr.is-still, html:not(.js) .jr) .bigms { font-size: 96px !important; }

@media (max-width: 1023px) {
  .jr { height: 680svh; --hx-top: 72px; --hx-fs: 12.6vw; }
  .hx { font-stretch: 112%; line-height: 1.02; white-space: nowrap; }
  .hx-side { top: calc(var(--hx-top) + var(--hx-eb) + var(--hx-fs) * 2.16); left: var(--gutter); right: var(--gutter); max-width: none; }
  .hx-side .status { display: none; }
  .b-devices { top: 76px; }
  .b-devices h2 { font-size: 12.6vw; }
  .b-signal { right: var(--gutter); top: 70px; }
  .bigms { font-size: 30vw !important; }
  .b-signal h2 { max-width: none; font-size: 20px; }
  .b-kasa { right: var(--gutter); top: 76px; translate: none; font-size: 11vw; max-width: none; }
  .b-rtx { bottom: 110px; }
  .b-rtx h2 { font-size: 13vw; }
  .b-ask { top: 84px; }
  .b-ask h2 { font-size: 9.4vw; }
  .b-end { top: 84px; translate: none; }
  .b-end::before { display: none; }
  .b-end h2 { font-size: 8.6vw; }
  .pin { font-size: 11.5px; height: 26px; padding: 0 8px; }
}