/* roybosch.nl — helix, DesignDetail-modal en Lightbox (fase 3). */

/* ---------- Helix (live, met JavaScript) ---------- */
/* .js staat al in <head>, zodat de hoogte niet verspringt als helix.js laadt. */
.js .helix { --stage-h: min(100vh, 1080px); height: calc(var(--stage-h) + 2400px); }
.js .helix.is-home { --stage-h: min(100vh, 960px); height: calc(var(--stage-h) + 1800px); }
.js .helix .helix-stage { position: sticky; top: 0; height: var(--stage-h); }
.js .helix:not(.is-live) .helix-items { visibility: hidden; }
.helix-cam { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform, filter; }
.helix.is-live .helix-grid { position: absolute; inset: 0; }
.helix-persp { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 50%; }
.helix-scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.helix-fade { position: absolute; left: 0; right: 0; height: 22%; z-index: 150; pointer-events: none; }
.helix-fade.is-top { top: 0; background: linear-gradient(to bottom, rgba(236, 234, 227, 1) 0%, rgba(236, 234, 227, 0.85) 35%, rgba(236, 234, 227, 0) 100%); }
.helix-fade.is-bottom { bottom: 0; background: linear-gradient(to top, rgba(236, 234, 227, 1) 0%, rgba(236, 234, 227, 0.85) 35%, rgba(236, 234, 227, 0) 100%); }
.helix.is-live .helix-head, .helix.is-live .helix-current, .helix.is-live .helix-progress { z-index: 200; }
.helix.is-live .helix-head { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; }
.helix-current .signal { color: var(--signal); }

/* Een item: 0×0-punt in de 3D-scène; de kaart bestaat uit 12 verticale stroken op de cilinder. */
/* Tekst op de kaarten iets donkerder dan --ink, voor contrast op het beeld. */
.hx-item { --hx-ink: #1e3128; position: absolute; left: 0; top: 0; width: 0; height: 0; color: var(--hx-ink); text-decoration: none; transform-style: preserve-3d; --op: 1; --tf: 0; }
.hx-item:focus-visible { outline: none; }
.hx-item:focus-visible .hx-strip { box-shadow: inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.hx-item:focus-visible .hx-strip:first-child { box-shadow: inset 2px 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.hx-strip { position: absolute; box-sizing: border-box; opacity: var(--op); cursor: pointer; }
/* Papierkleurig verloop boven en onder op de voorste kaart, zodat nummer, pijl en bijschrift op elk beeld leesbaar zijn.
   Het verloop loopt alleen verticaal, dus de 12 stroken sluiten naadloos op elkaar aan. */
.hx-strip::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--tf);
  background:
    linear-gradient(to bottom, rgba(236, 234, 227, 0.6) 0%, rgba(236, 234, 227, 0.25) 7%, rgba(236, 234, 227, 0) 15%),
    linear-gradient(to top, rgba(236, 234, 227, 0.75) 0%, rgba(236, 234, 227, 0.5) 14%, rgba(236, 234, 227, 0) 34%);
}
.hx-item.is-more .hx-strip::after { content: none; }
.hx-num { position: absolute; z-index: 1; left: 12px; top: 12px; white-space: nowrap; color: var(--hx-ink); opacity: var(--tf); }
.hx-arrow { position: absolute; z-index: 1; right: 10px; top: 10px; font-size: 18px; line-height: 1; opacity: var(--tf); }
.hx-item.is-more .hx-num { color: var(--on-graphite); }
/* Titel, jaar en soort alleen op het gecentreerde item; laat en snel weg (tf). */
.hx-cap { position: absolute; box-sizing: border-box; padding-bottom: 18px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; opacity: calc(var(--op) * var(--tf)); }
.hx-cap-title { display: block; font-size: 18px; line-height: 1.3; font-weight: 600; }
.hx-cap-meta { display: block; margin-top: 4px; color: var(--hx-ink); }
.hx-cap.is-more { padding: 24px 32px; color: var(--on-graphite); }
.hx-more-title { font: 400 36px/1 var(--font-serif); }

/* ---------- DesignDetail-modal ---------- */
.hx-dialog { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); }
.hx-dialog[hidden] { display: none; }
.hx-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(52, 78, 65, 0.28); cursor: default; }
.hx-sheet {
  position: relative; width: 100%; max-width: var(--sheet-max); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper-raised); border-radius: var(--radius-photo); box-shadow: var(--shadow-sheet);
}
.hx-hero { position: relative; aspect-ratio: 16 / 9; background: var(--tint-project); border-radius: var(--radius-photo) var(--radius-photo) 0 0; overflow: hidden; }
.hx-hero-media, .hx-flyer-media { position: absolute; inset: 0; display: block; }
.hx-hero-media picture, .hx-hero-media img, .hx-flyer-media picture, .hx-flyer-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-hero-media .placeholder, .hx-flyer-media .placeholder { position: absolute; inset: 0; background: transparent; }
.hx-close {
  position: absolute; right: 16px; top: 16px; min-width: 44px; min-height: 44px; background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: opacity 200ms ease;
}
.hx-close:hover { border-color: var(--ink); }
.hx-content { padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 32px 48px; }
.hx-text { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hx-text .signal { color: var(--signal); }
.hx-text p { font-size: 18px; line-height: 1.65; }
.hx-specs { flex: 1 1 220px; margin: 0; border-top: 1px solid var(--ink); font: 400 14px/1.5 var(--font-mono); }
.hx-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hx-specs dt { color: var(--ink-muted); }
.hx-specs dd { overflow-wrap: anywhere; text-align: right; }
.hx-foot { padding: 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.hx-steps { display: flex; gap: 8px; }
.hx-step { min-width: 48px; min-height: 48px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--ink); font-size: 20px; cursor: pointer; }
.hx-step:hover { background: var(--paper); border-color: var(--ink); }
.hx-flyer {
  position: absolute; z-index: 3; display: none; pointer-events: none; border-radius: var(--radius-photo); overflow: hidden;
  background: var(--tint-project);
}

/* ---------- Lightbox (theatermodus) ---------- */
.lb {
  --lb-ground: var(--theater-ground);
  position: fixed; inset: 0; z-index: 600; display: flex; flex-direction: column; gap: 24px;
  padding: 24px clamp(16px, 3vw, 32px); overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 255, 255, 0.05), transparent 70%), var(--lb-ground);
  color: var(--theater-ink); transition: background-color var(--dur-slow) var(--ease-out);
  opacity: 0;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; transition: opacity var(--dur-base) var(--ease-out), background-color var(--dur-slow) var(--ease-out); }
.lb.is-instant { transition: none; }
.lb :focus-visible { outline: 2px solid var(--theater-focus); outline-offset: 2px; }
.lb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--theater-line); }
.lb-count { font: 400 14px/1.4 var(--font-mono); color: var(--theater-ink-muted); }
.lb-count-n { color: var(--theater-accent); }
.lb-title { font: 400 36px/1 var(--font-serif); text-align: center; flex: 1 1 auto; }
.lb-btn { min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--theater-line); border-radius: var(--radius-md); color: var(--theater-ink); font-size: 22px; line-height: 1; cursor: pointer; }
.lb-btn:hover { border-color: var(--theater-ink-muted); }
.lb-nav { flex: 0 0 auto; min-width: 48px; min-height: 48px; font-size: 20px; }
.lb-stage { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; min-height: 0; }
.lb-figure { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.lb-frame {
  position: relative; max-width: 100%; max-height: calc(100vh - 320px); aspect-ratio: 3 / 2; height: calc(100vh - 320px);
  border-radius: var(--radius-photo); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lb-frame picture, .lb-frame img:not(.lb-wm-sig) { display: block; width: 100%; height: 100%; object-fit: contain; }
.lb-frame.is-empty { width: min(1040px, 100%); height: auto; background: #2b3b47; }
.lb-frame.is-empty.alt { background: #3a3832; }
.lb-placeholder { position: absolute; inset: 0; }
.lb-placeholder::before, .lb-placeholder::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.08); }
.lb-placeholder::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.lb-placeholder::after { top: 50%; left: 0; right: 0; height: 1px; }
/* Watermerk als laag (tot het CMS het inbrandt) en het schild erboven. */
.lb-wm-tile { position: absolute; inset: 0; opacity: var(--wm-tile); background-repeat: repeat; background-size: 22% auto; pointer-events: none; }
.lb-wm-sig { position: absolute; right: 3%; bottom: 3%; width: 16%; min-width: 120px; height: auto; opacity: var(--wm-mark); pointer-events: none; }
.lb-shield { position: absolute; inset: 0; }
.lb-info { width: 100%; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; color: var(--theater-ink); }
.lb-info p { max-width: var(--measure); font-size: 16px; line-height: 1.55; }
.lb-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.lb-tag { padding: 4px 8px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--theater-line); font: 500 13px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.lb-exif { margin: 0 auto; width: 100%; max-width: 1040px; display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 16px; border-top: 1px solid var(--theater-line); font: 400 14px/1.5 var(--font-mono); }
.lb-exif > div { display: flex; gap: 8px; }
.lb-exif dt { color: var(--theater-ink-muted); }
@media (max-width: 700px) {
  .lb { gap: 16px; }
  .lb-title { font-size: 26px; order: -1; flex-basis: 100%; text-align: left; }
  .lb-stage { flex: 0 0 auto; flex-wrap: wrap; justify-content: center; margin-top: auto; }
  .lb-info { margin-bottom: auto; }
  .lb-figure { flex-basis: 100%; order: -1; }
  .lb-frame { height: auto; max-height: 60vh; width: 100%; }
}