/* Copied from index-licht.html (the approved immersive room hero, sentence 2) for index-figma.html?hero=kamer.
   Only the #rm-scoped rules and the Lenis rules; the .lk kaart styles live in figma.css. Do not edit index-licht.html. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

#rm { --z-surface: #F7F6F1; --z-mint: #9DD3A9; --z-mint-mid: #5DAD76; position: relative; }
/* 100lvh: the stage is as tall as the viewport with Safari's bar folded away, so no strip opens under the pinned room when
   the bar collapses mid-scroll (svh left a white band on the iPhone); with the bar out, its lowest strip sits behind the bar */
#rm .rm-stage { position: relative; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; background: #E4E0D9; isolation: isolate; }
#rm .rm-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#rm .rm-anchor { position: absolute; left: 0; bottom: 0; }

/* the image layers: the end frame as plain images (reduced motion), the camera move without WebGL, and the stand-in while
   the 3D room loads; they are also the texture sources for the 3D room */
#rm .rm-gl { visibility: hidden; }
#rm.is-gl .rm-gl { visibility: visible; }
#rm .rm-still { position: absolute; inset: 0; overflow: hidden; visibility: hidden; z-index: 0; }
#rm.is-static .rm-still, #rm.is-layers .rm-still { visibility: visible; }
#rm.is-static .rm-gl { display: none; }
#rm .rm-still img { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; user-select: none; }
#rm.is-layers .rm-still img { will-change: transform; }
#rm .rm-still-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 110% at 50% 42%, rgb(20 16 10 / 0) 62%, rgb(20 16 10 / .14) 100%); }
#rm.is-layers .rm-still-vig { opacity: 0; }
#rm .rm-film { position: absolute; inset: -40px; pointer-events: none; opacity: 0; background-size: 160px 160px; mix-blend-mode: overlay; animation: rm-grain .5s steps(4) infinite; }
#rm.is-static .rm-film { display: none; }

/* the TV screen: one DOM box, mapped onto the TV's four projected corners with matrix3d every frame */
#rm .rm-scr { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; backface-visibility: hidden; }
#rm .rm-face { position: absolute; inset: 0; background: var(--z-surface); }
#rm .rm-tv { position: absolute; left: 0; right: 0; overflow: hidden; container-type: inline-size; background: var(--z-surface); }
#rm .rm-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); }
#rm .rm-slide.is-on { opacity: 1; }
/* the light tekstband slides up into the picture; the kaart's lower part makes room for it (CSS translate, which composes
   with the transform the room script puts on the start kaart's parts) */
#rm .rm-tv .lk-band { pointer-events: none; transform: translate3d(0, 101%, 0); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); z-index: 5; }
#rm .rm-tv.has-band .lk-band { transform: none; }
#rm .rm-tv .lk-foot, #rm .rm-tv .lk-mid { transition: translate 1.1s cubic-bezier(.16, 1, .3, 1); }
#rm .rm-tv.has-band .lk-foot { translate: 0 -7.4cqw; }
#rm .rm-tv.has-band .lk-mid { translate: 0 -3.4cqw; }
#rm .rm-glass { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(116deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / .035) 30%, rgb(255 255 255 / 0) 30.4%),
    radial-gradient(120% 100% at 50% 40%, rgb(255 255 255 / 0) 58%, rgb(50 44 30 / .10) 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), inset 0 2px 6px rgb(0 0 0 / .10); }
#rm .rm-grain { position: absolute; inset: -40px; z-index: 7; pointer-events: none; opacity: 0; background-size: 160px 160px; mix-blend-mode: overlay;
  animation: rm-grain .5s steps(4) infinite; }
@keyframes rm-grain { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-23px, 11px, 0); } 50% { transform: translate3d(14px, -19px, 0); } 75% { transform: translate3d(-9px, -27px, 0); } 100% { transform: translate3d(0, 0, 0); } }

/* the sentence (Workx), ink on the light screen, three centred lines (phones: a balanced column). The room script sets its
   size: on the TV at rest it fills 80% of the screen's width; inside the screen at the start it fits the viewport below the
   nav (layoutStart / placeStart). Its inline objects are light and sit between the baseline and the cap height (.7em). */
#rm .z-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#rm .z-hero { display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; background: var(--z-surface); }
#rm .z-hl { position: relative; z-index: 1; margin: 0; font: 600 100px/.95 var(--f-sans); letter-spacing: -.034em; color: var(--ink); white-space: nowrap; }
#rm:not([data-hero]) .z-hl:not([data-hero="2"]) { display: none; }
#rm .z-nw { white-space: nowrap; }
#rm .z-o { display: inline-block; position: relative; overflow: hidden; }
/* [kaart]: one small TV, a thin graphite bezel, a light kaart that reads "Welkom" */
#rm .z-tv { width: 1.26em; height: .72em; vertical-align: -.01em; margin: 0 .05em 0 .04em; padding: .032em .032em .036em; border-radius: .05em;
  background: linear-gradient(180deg, #46463F 0%, #2A2A26 14%, #222220 100%); box-shadow: inset 0 .006em 0 rgb(255 255 255 / .18), 0 .03em .07em rgb(30 28 26 / .2); }
#rm .z-scr { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: .012em; background: #F7F6F1;
  box-shadow: inset 0 0 0 .004em rgb(0 0 0 / .2); }
#rm .z-k { font: 400 .2em/1 var(--f-display); font-variation-settings: "opsz" 40; letter-spacing: -.012em; color: var(--ink); }
/* [band]: the tekstband as a soft sage pill with its small green dot */
#rm .z-band { height: .68em; vertical-align: -.04em; margin: 0 .04em; border-radius: .34em; background: #E2EADD; box-shadow: inset 0 0 0 .006em rgb(30 28 26 / .06); }
#rm .z-band span { display: flex; align-items: center; gap: .45em; height: 100%; padding: 0 1.45em 0 1.15em; font: 500 .18em/1 var(--f-sans); letter-spacing: -.006em; color: var(--ink); white-space: nowrap; }
#rm .z-band span::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #3E8A57; flex: none; }
/* [->]: the soft mint arrow; on the first scroll it doubles (the room script), the second head a mid mint */
#rm .z-arrow { width: 1.72em; height: .6em; vertical-align: -.033em; margin-left: .02em; overflow: visible; }
#rm .z-as { position: absolute; inset: 0; }
#rm .z-as i { position: absolute; display: block; background: currentColor; }
#rm .z-as .z-ac { left: .01em; top: .2585em; width: .083em; height: .083em; border-radius: 50%; }
#rm .z-as .z-sh { left: .0515em; top: .2585em; width: .82em; height: .083em; transform-origin: 0 50%; }
#rm .z-as svg { position: absolute; top: 0; left: .56em; width: .4em; height: .6em; overflow: visible; }
#rm .z-as path { fill: none; stroke: currentColor; stroke-width: 8.3; stroke-linecap: round; stroke-linejoin: round; }
#rm .z-as .z-h2 { opacity: 0; }
#rm .z-soft { color: var(--z-mint); }
#rm .z-strong { color: var(--z-mint-mid); opacity: 0; }
/* [Kijk mee]: the soft mint pill; it plays the pull-back */
/* the wrapper seats it (an inline-block with overflow hidden has its baseline at its bottom edge; a button's is its text) */
#rm .z-pillw { height: .68em; margin: 0 .04em; vertical-align: -.04em; border-radius: .34em; }
#rm .z-pill { display: block; height: 100%; border: 0; padding: 0; font: inherit; cursor: pointer; border-radius: inherit;
  background: #BCE0C3; color: var(--ink); letter-spacing: 0; transition: background-color .15s ease; }
#rm .z-pill:hover { background: #ACD8B6; }
#rm .z-pill span { display: flex; align-items: center; height: 100%; padding: 0 1.45em; font: 500 .19em/1 var(--f-sans); letter-spacing: -.005em; }
#rm .z-hero.is-on .z-pill { pointer-events: auto; }
#rm .rm-tv.has-band .z-hl { translate: 0 -3.6cqw; }
#rm .rm-tv .z-hl { transition: translate 1.1s cubic-bezier(.16, 1, .3, 1); }
#rm .z-hl .z-bm { display: none; }
@media (max-width: 720px) {   /* phones: five or six short lines, broken where the phrase breaks */
  #rm .z-hl { line-height: .98; }
  #rm .z-hl .z-bd { display: none; }
  #rm .z-hl .z-bm { display: inline; }
  #rm .z-arrow { width: 1.3em; }
}

@media (prefers-reduced-motion: reduce) {
  #rm .rm-grain, #rm .rm-film { animation: none; }
}