/* The box: the Cyprus page's one showpiece (2026-10-11, Noel: "Das mit der
   Kiste kannst du auf die entsprechende Seite machen"). A moving box,
   built and rendered in Blender, opens as the visitor scrolls; what we take
   off their hands rises out of it, one line of the list lights up for each
   thing, and the box closes again.

   Without script, and under reduced motion, this file lays the section out
   as a still picture beside the whole list: nothing sticks, nothing plays.
   The film is switched on by box.js with the class bx-go on <html>, and only
   there does the section become tall and its stage sticky. */

.bx { padding-block: clamp(64px, 9vw, 136px); }
.bx__stage { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: center; }
.bx__view { grid-column: 1 / 7; min-width: 0; margin: 0; }
.bx__view img, .bx__view canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.bx__view canvas { display: none; }
/* the frames carry the night ground baked in, and a codec lands a level or two
   beside it; the edge of the picture fades out so no rectangle can show */
.bx__view img, .bx__view canvas {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.bx__txt { grid-column: 8 / 13; min-width: 0; }
.bx__k { color: var(--signal); text-transform: uppercase; margin: 0 0 14px; }
.bx__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2.7vw, 3.6rem); line-height: 1.12; margin: 0; text-wrap: balance; }
.bx__h > span { display: block; }
.bx__h .bx__end { display: none; }
.bx__list { list-style: none; margin: clamp(22px, 3.4vh, 40px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.bx__list li { display: grid; grid-template-columns: 3em 1fr; align-items: baseline; padding: clamp(7px, 1.2vh, 12px) 0; border-bottom: 1px solid var(--line); }
.bx__list .mono { color: var(--fg-3); }
.bx__list b { font-weight: 600; font-stretch: 108%; }
.bx__list small { display: block; font-size: .9375rem; color: var(--fg-2); }
.bx__go { margin-top: clamp(22px, 3.4vh, 40px); }
.bx__bar { display: none; }

@media (max-width: 899px) {
  .bx__view, .bx__txt { grid-column: 1 / -1; }
  .bx__view img { max-height: 70svh; width: auto; margin: 0 auto; }
}

/* ── the film ─────────────────────────────────────────────────────── */
.bx-go .bx { padding-block: 0; height: 480vh; }
.bx-go .bx__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--nav-h); align-items: center; }
.bx-go .bx__view { height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; }
.bx-go .bx__view img { display: none; }
.bx-go .bx__view canvas { display: block; width: min(100cqw, 80cqh); }
.bx-go .bx__h { position: relative; }
.bx-go .bx__h > span { transition: opacity .35s; }
.bx-go .bx__h .bx__end { display: block; position: absolute; left: 0; top: 0; opacity: 0; }
.bx-go .bx.is-done .bx__h .bx__start { opacity: 0; }
.bx-go .bx.is-done .bx__h .bx__end { opacity: 1; }
.bx-go .bx__list li { opacity: .34; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.bx-go .bx__list li.is-on { opacity: 1; transform: none; }
.bx-go .bx__list li.is-now .mono { color: var(--signal); }
.bx-go .bx__go { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity .35s, transform .35s, visibility 0s .35s; }
.bx-go .bx.is-done .bx__go { opacity: 1; transform: none; visibility: visible; transition: opacity .35s, transform .35s, visibility 0s; }
.bx-go .bx__bar { display: block; grid-column: 1 / -1; align-self: end; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: var(--line); }
.bx-go .bx__bar i { display: block; height: 1px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }

/* side by side: heading, eight lines and the button have to fit one screen,
   so they scale with its height, and a low screen drops the second lines */
@media (min-width: 900px) {
  .bx-go .bx__h { font-size: min(clamp(1.6rem, .8rem + 2.7vw, 3.6rem), 6.2vh); }
  .bx-go .bx__list, .bx-go .bx__go { margin-top: clamp(14px, 2.6vh, 40px); }
  .bx-go .bx__list li { padding: clamp(4px, .85vh, 12px) 0; }
}
@media (min-width: 900px) and (max-height: 779px) {
  .bx-go .bx__list small { display: none; }
}

/* phone: the picture takes the screen, one line of the list at a time */
@media (max-width: 899px) {
  .bx-go .bx { height: 440vh; }
  .bx-go .bx__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; align-items: stretch; padding-bottom: 40px; }
  .bx-go .bx__txt { display: contents; }
  .bx-go .bx__head { grid-row: 1; padding-top: 14px; }
  .bx-go .bx__view { grid-row: 2; }
  .bx-go .bx__foot { grid-row: 3; position: relative; min-height: 84px; }
  .bx-go .bx__h { font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .bx-go .bx__list { margin: 0; border: 0; position: relative; height: 62px; }
  .bx-go .bx__list li { position: absolute; inset: 0; border: 0; padding: 0; opacity: 0; transform: translateY(8px); grid-template-columns: 2.6em 1fr; }
  .bx-go .bx__list li.is-on { opacity: 0; }
  .bx-go .bx__list li.is-now { opacity: 1; transform: none; }
  .bx-go .bx.is-done .bx__list { visibility: hidden; }
  .bx-go .bx__go { position: absolute; left: 0; top: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-go .bx__h > span, .bx-go .bx__list li, .bx-go .bx__go { transition: none; }
}