/* ZS LC-R3 K2 (Growth package page /paket/growth): the Growth effect layer's page styling, on top of r3-fx.css (attributes: evidence/r3/final10/FXG/FX_GUIDE.md).
   Loaded AFTER r3x-packages.css (shared, not edited). Everything that hides or moves hangs on html.lib-on:not(.no-motion):not(.r3fx-off); under reduced motion / page toggle OFF / no JS
   this file only does static layout (the hero chip anchor, the batch frame). Notes: evidence/r3/final10/K2/.
   GM, round 3d: THIS FILE LOADS WITHOUT BLOCKING THE FIRST PAINT (index.html: link media="print" + onload, <noscript> fallback, and R3FX.refresh() when it has arrived so that the two chapters are measured
   with their final CSS). What the first screen needs (hero chip, hero delays, the docked cards' entrance override, the hero film control, the default of the batch's second layer, and a guard that keeps
   the two chapters undrawn until this file is applied) is the inline <style id="r3xg-critical"> of index.html; its commented master is evidence/r3/final11/GM/src/critical.master.css. */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------
   1. Hero: the "Film i toppen" chip sits INSIDE the frame, on the photograph's top-left corner (panel 4: P4-014, P4-074, P4-088: it hung 13 px out of the
   frame at 1440 and covered the mock's "Meny" at 390). The chip is anchored in the CAPTURE's own coordinates (the film region is 47.08 / 11.45 percent of the
   1100 x 840 capture), so it keeps its place at every frame width.
   --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* (moved to the inline critical block of index.html, style#r3xg-critical; commented master: evidence/r3/final11/GM/src/critical.master.css) */

/* Keyboard: a control that takes focus is drawn at once, also while its own reveal (a wait, a wipe) is still running (r3-fx draws a focused control that has not been revealed yet; this
   covers the case where the reveal had already been started by the scroll). */
html.lib-on:not(.no-motion) [data-fx~="up"]:focus-within, html.lib-on:not(.no-motion) [data-fx~="up"]:focus-visible { animation: none !important; opacity: 1 !important; translate: none !important; }
html.lib-on:not(.no-motion) [data-fx~="wipe"]:focus-within { animation: none !important; clip-path: none !important; }
html.lib-on:not(.no-motion) [data-fx~="wipe"]:focus-within :is(img, video) { animation: none !important; scale: none !important; }
html.lib-on:not(.no-motion) [data-fx~="stagger"] > :focus-within { animation: none !important; opacity: 1 !important; }   /* (no translate here: a depth card lifts on focus) */

/* Where the copy sits below the frame (stacked hero: phones, portrait tablets) the lead, the price and the ask are reached by scrolling: they come in at once, no wait. */
/* (moved to the inline critical block of index.html, style#r3xg-critical; commented master: evidence/r3/final11/GM/src/critical.master.css) */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------
   2. The three docked cards (G-13): the page's own entrance (r3x-packages.css) is replaced by the effect layer (stagger on the list, wipe on the picture,
   depth on the card), one system per element.
   --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* (moved to the inline critical block of index.html, style#r3xg-critical; commented master: evidence/r3/final11/GM/src/critical.master.css) */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------
   3. The monthly batch: a two-state chapter (r3-fx "chapter"). The static composition is the old one (promise, three figures, the clean capture); the
   live chapter pins the frame for 1.15 screens: state 1 the page as it is + the promise, state 2 the same page after one batch (four changed lines)
   + the three figures. Both layers are captures of the real Kvarteret start page in the same crop (1100 x 688); the second one is rendered with the four lines changed. The first one stays
   underneath, the second one fades in over it (no overlay boxes, no outlines).
   --------------------------------------------------------------------------------------------------------------------------------------------------- */
.r3xg-batch { --r3fx-top: var(--nav-h, 68px); position: relative; }
.r3xg-states { display: block; }
.r3xg-dev { --r3-ar: 1100 / 688; }
@media (max-width: 767px) { .r3xg-dev { --r3-ar: 16 / 9; } }
/* (moved to the inline critical block of index.html, style#r3xg-critical; commented master: evidence/r3/final11/GM/src/critical.master.css) */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xg-batch.fx-live .r3xg-shot2 { display: block; }
/* the first capture stays under the second layer: the layers do not cross-fade through the dark frame (no dip), the second one fades in over it */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xg-batch.fx-live .r3xg-shot[data-fx-in="1"].fx-layer { opacity: 1; transition: none; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xg-batch.fx-live .r3xg-shot2[data-fx-in].fx-layer { transition: opacity .25s var(--r3fx-ease-quick); }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xg-batch.fx-live .r3xg-shot2[data-fx-in].fx-layer.fx-on { transition: opacity .3s var(--r3fx-ease-quick) .08s; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------
   4. K2F: the two examples as the SECOND two-state chapter (r3-fx "chapter"). The first chapter (the monthly batch, section 3) changes four lines inside one
   frame; this one swaps two whole sites in place and each opens its five pages (the page strip) as it comes on: the pages leave the front sheet one after
   the other on the 0.075 s step. Static / reduced motion / no JS / short windows: the two examples side by side (stacked on phones), each with its five
   pages already open and the caption under it; the two links stand under the heading, OUTSIDE the two states, because the chapter takes the controls of its off state out of the
   tab order and a keyboard visitor has to reach both examples: the same words as before. The live frame is a wide stage on the LEFT, the heading on the right
   (the batch chapter keeps its copy on the left), so the two chapters do not read as one layout twice.
   --------------------------------------------------------------------------------------------------------------------------------------------------- */
.r3xe-ex { --r3fx-top: var(--nav-h, 68px); position: relative; margin-top: calc(var(--r3-sec) + 16px); }
.r3xe-pin { display: grid; gap: 28px; }
.r3xe-copy .r3-h2 { margin: 14px 0 10px; }
.r3xe-copy .r3-lead { margin: 0; }
.r3xe-nb { white-space: nowrap; }   /* "Growth-exempel" stays one word on the static heading (the live rise already treats it as one) */
.r3xe-fans { display: grid; gap: 44px; min-width: 0; }
.r3xe-fan { position: relative; isolation: isolate; margin: 0; display: grid; align-content: start; justify-items: start; min-width: 0; }
.r3xe-fan::before { content: ""; position: absolute; z-index: -1; inset: -6% -8% -4%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--r3-glow), .2), rgba(var(--r3-glow), 0)); }
.r3xe-fan .r3-cap { margin: 16px 0 0; font-size: .875rem; }
.r3xe-links { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 26px 0 0; }
.r3xe-links .r3-link { transition: opacity .5s var(--r3fx-ease-quick), text-decoration-color var(--r3-d-micro); }
/* the five pages: front sheet bottom left, each further sheet one step up and to the right (the W-64 stack of the first card, larger) */
.r3xe-sheets { position: relative; width: 100%; aspect-ratio: 100 / 62; }
.r3xe-sheet { position: absolute; left: 0; bottom: 0; width: 70%; margin: 0; padding: 4px; border-radius: 13px; z-index: calc(10 - var(--k));
  transform: translate(calc(var(--k) * 10.4%), calc(var(--k) * -8.6%)) rotate(calc(var(--k) * .5deg)); }
.r3xe-sheet img { display: block; width: 100%; aspect-ratio: 720 / 454; object-fit: cover; object-position: top; border-radius: 9px; }
@media (min-width: 900px) {
  .r3xe-pin { grid-template-columns: minmax(min-content, 4fr) minmax(0, 8fr); gap: 56px; align-items: end; }
  .r3xe-fans { grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
}
@media (max-width: 899px) { .r3xe-pin { gap: 30px; } }
@media (max-width: 767px) { .r3xe-ex { margin-top: 40px; } .r3xe-fans { gap: 38px; } .r3xe-copy .r3-h2 { margin: 10px 0 6px; } .r3xe-sheet { padding: 3px; border-radius: 10px; } .r3xe-sheet img { border-radius: 7px; } }

/* LIVE: one frame, the two examples overlay (the module stacks the second layer on the first), the five pages open when an example comes on */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fans { grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; max-width: 780px; }   /* 70 percent of 780 = 546 px, below the 560 px of the narrowest page capture: no sheet is ever enlarged on a wide window */   /* stays a grid on purpose: display:block here made Chrome report a layout shift of 0.34 for the sheets at 360 px with delayed fonts (bisected, evidence/r3/final10/K2F/data/cls_bisect.txt) */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fan { width: 100%; height: auto; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fan.fx-l2 { height: 100%; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fan .r3xe-sheet { transform: none; transition: transform 0s linear .9s; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fan.fx-on .r3xe-sheet {
  transform: translate(calc(var(--k) * 10.4%), calc(var(--k) * -8.6%)) rotate(calc(var(--k) * .5deg));
  transition: transform var(--r3fx-d-calm) var(--r3fx-ease-settle) calc(.06s + var(--k) * var(--r3fx-step)); }
html.r3xe-gate.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live:not(.r3xe-arrived) .r3xe-fan.fx-on .r3xe-sheet { transform: none; transition: none; }   /* held closed until the stage has arrived (r3x-growth.js) */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fan:focus-within .r3xe-sheet { transform: translate(calc(var(--k) * 10.4%), calc(var(--k) * -8.6%)) rotate(calc(var(--k) * .5deg)); transition: none; }
@media (min-width: 900px) {
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-pin { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "frame copy"; gap: clamp(36px, 5.5vw, 88px); align-items: center; }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-copy { grid-area: copy; }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fans { grid-area: frame; }
}
/* the link of the example that is shown is the full one; the other waits a little dimmer (it is still a link, and a real one for the keyboard) */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live[data-fx-state="1"] .r3xe-links .r3-link:nth-child(2), html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live[data-fx-state="2"] .r3xe-links .r3-link:nth-child(1) { opacity: .74; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live[data-fx-state] .r3xe-links .r3-link:is(:hover, :focus-visible) { opacity: 1; }   /* a link the visitor points at or tabs to is always drawn in full */
/* the glow of the example under its pages follows the example (the world host animates --r3-glow) and is a little stronger while the pages are open */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fan::before { opacity: 0; transition: opacity .6s var(--r3fx-ease-settle); }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xe-ex.fx-live .r3xe-fan.fx-on::before { opacity: 1; transition: opacity 1.25s var(--r3fx-ease-settle) .2s; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------
   5. K2F: the monthly batch chapter: the second state is a camera move, not only four outlines. The frame (with its caption) pushes in 7 percent (compositor scale, calm 1.25 s, settle
   curve) towards the card with the changed lines while the outlines draw one by one; back out when the first state returns. Phones keep the frame at its size (the
   column is the full width there).
   --------------------------------------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 900px) {
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xg-batch.fx-live .r3xg-fig { transform-origin: 100% 30%; transition: scale var(--r3fx-d-calm) var(--r3fx-ease-settle); }   /* frame AND caption move together; the push grows left, into the gap, never past the page edge */
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xg-batch.fx-live[data-fx-state="2"] .r3xg-fig { scale: 1.07; }
  /* the two state ticks of the chapter sit bottom RIGHT by default, which is where this frame (and its push-in) ends: they stand bottom LEFT, under the copy, here */
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xg-batch.fx-live > .fx-pin > .fx-ticks { right: auto; left: 0; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------
   6. K2F: both chapters pin for 90 percent of the window on wide windows (desktop, landscape tablets): the stage sits a little higher, there is less dead air above and below it
   when it is pinned, and the saved screen length goes into the dwell (data-fx-run). Phones keep the whole window (the pin has to clear the 72 px dock there).
   --------------------------------------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .r3xe-ex, .r3xg-batch { --r3fx-u: max(90vh, 500px); }
  @supports (height: 100svh) { .r3xe-ex, .r3xg-batch { --r3fx-u: max(90svh, 500px); } }
}
@media (min-width: 900px) and (max-height: 820px) {   /* laptops and landscape tablets (1366 x 768, 1024 x 768): a little less again, so that the live page stays within 1.4 x its static length there */
  .r3xe-ex, .r3xg-batch { --r3fx-u: max(85vh, 500px); }
  @supports (height: 100svh) { .r3xe-ex, .r3xg-batch { --r3fx-u: max(85svh, 500px); } }
}
@media (min-width: 900px) and (min-height: 1000px) {   /* tall desktop windows (1920 x 1080): 80 percent is plenty for a stage that is about 600 px high, and keeps the live page within 1.5 x its static length there */
  .r3xe-ex, .r3xg-batch { --r3fx-u: max(80vh, 500px); }
  @supports (height: 100svh) { .r3xe-ex, .r3xg-batch { --r3fx-u: max(80svh, 500px); } }
}
@media (min-width: 900px) and (max-width: 1099px) and (orientation: landscape) and (min-height: 821px) {   /* GMF: landscape tablets taller than 820 px (1080 x 810 is the 85 percent rule above; 1099 x 860 would take 90): the hero's page run (index.html, section 7) adds 300 px there, so the chapters pin for 80 percent to keep the live page within 1.4 x */
  .r3xe-ex, .r3xg-batch { --r3fx-u: max(80vh, 500px); }
  @supports (height: 100svh) { .r3xe-ex, .r3xg-batch { --r3fx-u: max(80svh, 500px); } }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------
   7. GM: the two motion controls, one constant name each, aria-pressed carries the state, 44 px (hero film: r3-core.js example-kind control; belt: r3x-growth.js mirrors is-paused). The state is drawn
   as a small switch (the Glöd / Lumen idiom: knob left = running, knob right on gold = paused), so the 2 px ring r3-tokens draws for aria-pressed is off.
   --------------------------------------------------------------------------------------------------------------------------------------------------- */
/* the hero film control's own rules (44 px, the drawn switch in its .r3-tg__s span) are in the inline critical block (it is in the first screen); the belt control is below the fold and stays here */
.r3x-kg-pause { display: inline-flex; align-items: center; gap: .65em; }
.r3x-kg-pause::after {
  content: ""; flex: none; box-sizing: border-box; display: block; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(243, 240, 234, .66); overflow: hidden;
  font-size: 0; line-height: 0; color: transparent;
  background: radial-gradient(circle at center, #F3F0EA 0 5.5px, transparent 6px) 2px 50% / 13px 13px no-repeat;
  transition: background-position .22s cubic-bezier(.22, 1, .36, 1), background-color .2s, border-color .2s; }
.r3x-kg-pause[aria-pressed="true"]::after {
  border-color: #DCBC7E; background: radial-gradient(circle at center, #0C0C0F 0 5.5px, transparent 6px) calc(100% - 2px) 50% / 13px 13px no-repeat #DCBC7E; }
html.no-motion .r3x-kg-pause::after { transition: none; }

/* b6 NB-200 */
@media (max-width: 599px) { .r3xe-nb { white-space: normal; } }