/* The Visualizer page's hero animation (showreel.js; Joep, 2026-10-27). Its layers join the hero's own: the room
   under the hero's scrim (z 0), the menu, the designer and the cursor over it (z 2), under the text (z 3). */
.showreel { position: absolute; inset: 0; pointer-events: none; }  /* no z-index: its layers stack with the hero's */
.sr-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0; transition: opacity 900ms ease; background: #0b1218; }
.sr-on .sr-stage { opacity: 1; }
.sr-slot { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.sr-out { visibility: hidden; }
.sr-out.on { visibility: visible; }
.sr-in { box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45); }
.sr-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
/* a bright room (showreel.json "shade") gets darker behind the hero's text than the hero's own scrim makes it */
.sr-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1200ms ease;
  background: linear-gradient(90deg, rgba(11, 18, 24, 0.56) 0%, rgba(11, 18, 24, 0.44) 34%, rgba(11, 18, 24, 0.14) 60%, rgba(11, 18, 24, 0) 76%); }
.sr-narrow .sr-shade { background: linear-gradient(180deg, rgba(11, 18, 24, 0.5) 0%, rgba(11, 18, 24, 0.42) 56%, rgba(11, 18, 24, 0.1) 76%, rgba(11, 18, 24, 0) 88%); }
.sr-cam canvas, .sr-cam svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.sr-svg { overflow: visible; --sw: 1; }
.sr-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sr-grid { opacity: 0; }
.sr-grid path { stroke: #fff; stroke-width: calc(var(--sw) * 1px); }
.sr-g1 { opacity: 0.55; }
.sr-g2 { opacity: 0.25; }
.sr-glow { stroke: rgba(158, 202, 250, 0.55); stroke-width: calc(var(--sw) * 7px); opacity: 0; }
.sr-edge { stroke: #fff; stroke-width: calc(var(--sw) * 1.8px); opacity: 0; }
.sr-comet { stroke: #fff; stroke-width: calc(var(--sw) * 4px); opacity: 0; filter: drop-shadow(0 0 3px rgba(190, 220, 255, 0.9)); }

/* the menu and the designer: glass panels at the right, like the visualizer's own panel. Sized for a 1440 px wide
   hero and grown with a wider one (--k, set by showreel.js, 1 to 1.6; Joep, 2026-10-27: bigger on his screen) */
.showreel { --k: 1; }
.sr-ui { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.sr-panel { position: absolute; right: clamp(24px, 4.4vw, 64px); top: 52%; color: #fff;
  padding: calc(var(--k) * 14px) calc(var(--k) * 14px) calc(var(--k) * 16px);
  background: rgba(14, 22, 31, 0.6); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: calc(var(--k) * 10px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translate(32px, -50%); transition: opacity 380ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sr-panel.open { opacity: 1; transform: translate(0, -50%); }
.sr-menu { width: calc(var(--k) * 232px); }
.sr-design { width: calc(var(--k) * 252px); }
.sr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: calc(var(--k) * 12px);
  font-family: var(--font-mono); font-size: calc(var(--k) * 10px); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); }
.sr-sub { color: rgba(255, 255, 255, 0.5); letter-spacing: 0.1em; }
.sr-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--k) * 12px) calc(var(--k) * 9px); }
.sr-sw { display: flex; flex-direction: column; gap: calc(var(--k) * 6px); min-width: 0; font-size: calc(var(--k) * 11px); line-height: 1.2;
  color: rgba(255, 255, 255, 0.82); }
.sr-sw i { display: block; aspect-ratio: 1; border-radius: calc(var(--k) * 5px); background: #333 center / cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); transition: transform 160ms ease, box-shadow 200ms ease; }
.sr-sw span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sw.hover i { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.sr-sw.press i { transform: scale(0.93); }
.sr-sw.on i { box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(158, 202, 250, 0.7); }
.sr-sw.on span { color: #fff; }
/* the Layout under the floors, where a room changes its planks' laying pattern: the patterns as the visualizer's
   Layout panel shows them, a drawing and its name (Joep, 2026-10-27) */
.sr-lay { margin-top: calc(var(--k) * 16px); padding-top: calc(var(--k) * 12px); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sr-lay[hidden] { display: none; }
.sr-lay .sr-head { margin-bottom: calc(var(--k) * 10px); }
.sr-pats { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--k) * 9px); }
.sr-pat { display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * 6px); min-width: 0;
  padding: calc(var(--k) * 9px) calc(var(--k) * 4px) calc(var(--k) * 7px); border-radius: calc(var(--k) * 5px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono); font-size: calc(var(--k) * 8.5px); letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 200ms ease, color 200ms ease, background 200ms ease; }
.sr-pat svg { width: calc(var(--k) * 40px); height: calc(var(--k) * 40px); flex: none; }
.sr-pat span { white-space: nowrap; }
.sr-pat.hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); color: #fff; }
.sr-pat.on { background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(158, 202, 250, 0.7); color: #fff; }
.sr-grid4 { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: calc(var(--k) * 3px); margin-bottom: calc(var(--k) * 14px); }
.sr-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); overflow: hidden; }
.sr-cell i { display: block; width: 100%; height: 100%; background: var(--tile) center / cover; opacity: 0; transform: scale(0.6); }
.sr-cell.set i { opacity: 1; transform: none; transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sr-cell.pop i { animation: sr-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sr-pop { 0% { transform: scale(0.55); filter: brightness(1.9); } 100% { transform: none; filter: none; } }
.sr-palette { grid-template-columns: repeat(5, 1fr); gap: calc(var(--k) * 7px); }
.sr-palette .sr-sw span { display: none; }
.sr-acts { display: flex; gap: calc(var(--k) * 8px); margin-top: calc(var(--k) * 14px); }
.sr-btn { font-size: calc(var(--k) * 11px); padding: calc(var(--k) * 6px) calc(var(--k) * 10px); border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.9); }

/* the cursor: an arrow, a hand while carrying a floor; on phones a fingertip */
.sr-cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 260ms ease; will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.sr-cursor.on { opacity: 1; }
.sr-cursor svg { position: absolute; transition: transform 110ms ease; }
.sr-arrow { left: -4px; top: -2.5px; transform-origin: 4px 2.5px; }
.sr-hand { left: -14px; top: -14px; display: none; }
.sr-cursor.grab .sr-arrow { display: none; }
.sr-cursor.grab .sr-hand { display: block; }
.sr-cursor.down svg { transform: scale(0.86); }
.sr-touch { display: none; position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.28); transition: transform 110ms ease, background 110ms ease; }
/* a click's ring and the dragged tile: the outer box only follows the cursor; the ring grows and the tile appears
   and sinks inside it (a scale on the outer box would scale its position too: the tile flew in from the top) */
.sr-ripple { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sr-ripple i { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.sr-ripple.go i { animation: sr-ripple 520ms ease-out; }
@keyframes sr-ripple { 0% { opacity: 0.85; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.25); } }
.sr-ghost { position: absolute; left: 0; top: 0; width: calc(var(--k) * 54px); height: calc(var(--k) * 54px); }
.sr-ghost i { display: block; width: 100%; height: 100%; border-radius: 6px; background: #333 center / cover;
  box-shadow: 0 0 0 2px #fff, 0 12px 28px rgba(0, 0, 0, 0.45); opacity: 0; transform: scale(0.7);
  transition: opacity 160ms ease, transform 200ms ease; }
.sr-ghost.on i { opacity: 0.96; transform: none; }
.sr-ghost.drop i { opacity: 0; transform: scale(0.2); transition: opacity 260ms ease, transform 260ms ease-in; }

/* the hero's own image, as the animation's first room starts: covering the hero, a little enlarged so the photo has
   room to pan sideways (showreel.js reads this, so the animation takes over without a jump) */
.hero-bg.sr-poster { transform: scale(1.1); transform-origin: 0 60%; }
@media (max-width: 900px) { .hero-bg.sr-poster { transform: scale(1.04); transform-origin: 50% 60%; } }

/* the captions as page text (showreel.js reads them): off the page by their class "hidden", which the site admin's
   editor takes away, so there they show along the hero's foot to be edited */
.sr-steps { position: absolute; z-index: 3; left: 9vw; right: 9vw; bottom: 34px; display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.sr-steps.hidden { display: none; }

/* the caption: under the hero's buttons, as quiet as its Scroll hint; its pause button for everyone */
.sr-cap { position: absolute; z-index: 3; left: 9vw; bottom: 34px; display: flex; align-items: center; gap: 12px; opacity: 0;
  transition: opacity 600ms ease; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.sr-on .sr-cap { opacity: 1; }
.sr-cap.sr-cap-right { left: auto; right: calc(clamp(24px, 4.4vw, 64px) + 100px); }
.sr-cap-text { transition: opacity 280ms ease, transform 280ms ease; }
.sr-cap-text.out { opacity: 0; transform: translateY(6px); }
.sr-cap-text b { font-weight: 500; color: rgba(255, 255, 255, 0.55); margin-right: 10px; }
.sr-pause { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(11, 18, 24, 0.3);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.sr-pause:hover { border-color: #fff; background: rgba(11, 18, 24, 0.5); }
.sr-pause svg { fill: currentColor; }
.sr-pause .sr-i-play, .sr-cap.paused .sr-i-pause { display: none; }
.sr-cap.paused .sr-i-play { display: inline; }

/* phones and narrow windows: the text covers the top, so the menu lies along the bottom, over the caption, and the
   floor is dropped between it and the hero's buttons */
.sr-narrow .sr-panel { left: 12px; right: 12px; top: auto; bottom: 44px; width: auto; padding: 9px 10px; border-radius: 9px; transform: translateY(26px); }
.sr-narrow .sr-panel.open { transform: none; }
.sr-narrow .sr-head { display: none; }
.sr-narrow .sr-menu .sr-items { grid-template-columns: repeat(6, 1fr); gap: 7px; }
.sr-narrow .sr-sw span { display: none; }
.sr-narrow .sr-lay { margin-top: 8px; padding-top: 6px; }
.sr-narrow .sr-lay .sr-head { display: none; }
.sr-narrow .sr-pats { grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px; }
.sr-narrow .sr-pat { flex-direction: row; gap: 7px; padding: 4px 10px 4px 5px; font-size: 9px; }
.sr-narrow .sr-pat svg { width: 24px; height: 24px; }
.sr-narrow .sr-design { display: grid; grid-template-columns: 82px 1fr; gap: 6px 12px; align-items: center; }
.sr-narrow .sr-grid4 { grid-row: span 2; margin: 0; gap: 2px; }
.sr-narrow .sr-palette { gap: 6px; }
.sr-narrow .sr-acts { margin: 0; }
.sr-narrow .sr-btn { font-size: 10px; padding: 4px 8px; }
.sr-narrow .sr-cursor svg { display: none !important; }
.sr-narrow .sr-touch { display: block; }
.sr-narrow .sr-cursor.down .sr-touch, .sr-narrow .sr-cursor.grab .sr-touch { transform: scale(0.85); background: rgba(255, 255, 255, 0.5); }
.sr-on.sr-narrow .sr-cap { left: 14px; bottom: 11px; gap: 10px; font-size: 10px; letter-spacing: 0.12em; }
.sr-on.sr-narrow .hero-scroll { opacity: 0; }

/* the test page's stills (#showreel-test-static): every state at once, no fades */
.sr-static *, .sr-static *::before { transition: none !important; animation: none !important; }