/* A case of WORK, on the helix: the layer the card's picture travels into. codrops' image-to-
   content (scenes/codrops-image-to-content) translated: the original's content grid (a picture
   slot, the stills under it, the words beside) in this page's faces, dark and tokens; the
   overflow-hidden wrappers (.oh) that clip the sliding words are the original's own device.
   Every number is a token of pages/work/tokens.json. */

/* ============ the layer over the helix ============ */
.case{position:absolute;inset:0;z-index:var(--layer-case);pointer-events:none;color:var(--text-on-dark)}
.case.is-open{pointer-events:auto}
html.case-open,html.case-open body{overflow:hidden}   /* the page stands still while a case is open (index.js: body.content-open) */

/* the way back, where the original puts it: top left of the content */
.case-back{position:absolute;left:var(--page-margin);top:var(--case-back-top);opacity:0;z-index:var(--layer-case-back);
  display:inline-flex;align-items:center;gap:var(--case-back-gap);padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--small-size);font-weight:var(--small-weight);line-height:var(--small-line-height);letter-spacing:var(--small-tracking);
  color:rgb(from var(--text-on-dark) r g b / var(--client-name-alpha));transition:color var(--hover-line-duration) var(--hover-line-easing);-webkit-tap-highlight-color:transparent}
.case-back svg{width:var(--case-back-arrow);height:var(--case-back-arrow);fill:currentColor;display:block}
.case-back:hover,.case-back:focus-visible{color:var(--text-on-dark)}

/* ============ one case's content: the original's grid, 'img text' / 'thumbs text' ============ */
.case-content{position:absolute;inset:0;display:none;padding:var(--case-top) var(--page-margin) 0;
  grid-template-columns:var(--case-stage-share) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:var(--case-column-gap);row-gap:var(--case-thumb-air);
  grid-template-areas:"pic text" "thumbs text"}
.case-content.is-current{display:grid}

/* the picture slot: the cards' proportion and corner; the travelled card lands here, absolute in it */
.case-pic{grid-area:pic;position:relative;aspect-ratio:1 / var(--helix-card-aspect);border-radius:var(--card-corner)}
/* the slot clips and has its ground only once the picture has landed in it: while the picture flies
   (a fixed element on the body, case.js) the slot is nothing, so no box stands where it will arrive */
.case-pic.is-landed{overflow:hidden;background:rgb(from var(--text-on-dark) r g b / var(--case-stage-ground-alpha))}
.case-img,.case-still,.case-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;border-radius:var(--card-corner)}
/* the card's picture, while it flies, is a fixed element on the body; here it keeps its corner */
body>.case-img{position:fixed;z-index:var(--layer-case-flight);object-fit:cover;border-radius:var(--card-corner)}
.case-still,.case-pic video{z-index:var(--layer-case-slide);opacity:0;pointer-events:none;transition:opacity var(--case-slide-duration) var(--hover-line-easing)}
.case-still.is-shown,.case-pic video.is-shown{opacity:1;pointer-events:auto}
.case-pic video{object-fit:contain;background:var(--ground-dark)}
/* the clip held: one play mark and nothing else (his word of 2026-09-18) */
.case-pic.is-held::after{content:"\25B6";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:var(--layer-case-back);
  font-size:var(--closing-headline-size);color:var(--text-on-dark);pointer-events:none}
/* the strip under the finger: the shown still and its neighbours side by side (case.js) */
.case-strip{position:absolute;inset:0;z-index:var(--layer-case-back);will-change:transform}
.case-strip img{position:absolute;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--ground-dark)}
.case-strip img.is-phone{object-fit:contain;object-position:50% 50%}
.case-pic.is-dragging>.case-img,.case-pic.is-dragging>.case-still,.case-pic.is-dragging>video{visibility:hidden}
.case-still.is-phone{object-fit:contain;object-position:50% 50%;background:var(--ground-dark)}

/* the stills: the original's row of thumbs, here with the page's fire hairline under the shown one.
   HOW MANY THUMBS A CASE HAS IS DATA (cases.json: the card, every still, the phone, the video), and
   the row must fit the picture's column whatever that number is. Until 2026-09-18 a thumb was a
   fixed --case-thumb-width that could not shrink, so Lebensfluss Sabine's nine ran out of the 58%
   column and stood on top of the words - the widest case simply overflowed its cell. The width is
   the thumb's WISH now (flex-basis on the li, which is the flex item), not its law: few thumbs stand
   at their full size, many share the column evenly. min-width:0 is what lets the shrink happen at
   all - a flex item's automatic minimum is its min-content, and a picture's min-content is itself. */
.case-thumbs{grid-area:thumbs;display:flex;gap:var(--case-thumb-gap);margin:0;padding:0;list-style:none;align-self:start;min-width:0}
.case-thumbs li{flex:0 1 var(--case-thumb-width);min-width:0}
.case-thumbs button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.case-thumbs img{display:block;width:100%;aspect-ratio:1 / var(--helix-card-aspect);object-fit:cover;object-position:50% 0;border-radius:var(--case-thumb-corner);
  opacity:var(--case-thumb-alpha);transition:opacity var(--hover-line-duration) var(--hover-line-easing)}
.case-thumbs button::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--case-thumb-line-drop));height:var(--fire-line);background:var(--accent-fire);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--hover-line-duration) var(--hover-line-easing)}
.case-thumbs button:hover img,.case-thumbs button:focus-visible img,.case-thumbs button.is-on img{opacity:1}
.case-thumbs button.is-on::after{transform:scaleX(1)}
.case-thumbs button:focus-visible{outline:var(--hairline) solid var(--hairline-on-dark);outline-offset:var(--case-thumb-gap)}
.case-thumbs .vlabel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:var(--small-size);color:var(--text-on-dark);pointer-events:none}

/* ============ the words: eyebrow, name, lines, the sentence, the doors; each thaws in the hero's way ============ */
.case-text>*{will-change:opacity,filter,transform}
.case-text{grid-area:text;max-width:var(--case-essay-width);padding-top:var(--case-essay-lift)}
.case-eyebrow{font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);line-height:var(--eyebrow-line-height);
  color:rgb(from var(--text-on-dark) r g b / var(--client-name-alpha));margin-bottom:var(--case-eyebrow-gap)}
.case-name{font-family:var(--closing-headline-font);font-weight:var(--closing-headline-weight);font-size:var(--closing-headline-size);line-height:var(--closing-headline-line-height);
  margin:0 0 var(--case-name-gap)}
.case-line{font-size:var(--body-default-size);line-height:var(--body-default-line-height);font-weight:var(--body-default-weight);margin:0}
.case-line + .case-line{margin-top:var(--case-line-gap)}
.case-quote{margin:var(--case-quote-air) 0 0;font-family:var(--case-quote-font);font-size:var(--case-quote-size);font-weight:var(--case-quote-weight);line-height:var(--case-quote-line-height)}
.case-quote p{margin:0;quotes:"\201C" "\201D"}
:lang(de) .case-quote p{quotes:"\201E" "\201C"}
.case-quote p::before{content:open-quote}.case-quote p::after{content:close-quote}
.case-quote footer{margin-top:var(--client-name-gap);font-size:var(--small-size);font-weight:var(--small-weight);line-height:var(--small-line-height);letter-spacing:var(--small-tracking);
  color:rgb(from var(--text-on-dark) r g b / var(--client-name-alpha))}
.case-doors{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--doors-gap);margin-top:var(--case-doors-air)}
/* the way onward, at the right end of the doors' row, as quiet as All work above: his words of 2026-09-16, "ein kleiner next
   button unten rechts, so dass man eine Fallstudie nach der anderen anschauen kann", "so dezent wie oben der allwork button" */
.case-next{display:inline-flex;align-items:center;align-self:center;gap:var(--case-back-gap);padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--small-size);font-weight:var(--small-weight);line-height:var(--small-line-height);letter-spacing:var(--small-tracking);
  color:rgb(from var(--text-on-dark) r g b / var(--client-name-alpha));transition:color var(--hover-line-duration) var(--hover-line-easing);-webkit-tap-highlight-color:transparent}
.case-next svg{width:var(--case-back-arrow);height:var(--case-back-arrow);fill:currentColor;display:block}
.case-next:hover,.case-next:focus-visible{color:var(--text-on-dark)}

/* ============ the phone: one column, the stills a row that scrolls ============ */
@media (max-width:767px){
  /* one column in the document's own order (picture, stills, text), as plain blocks: the case is a
     screen-high scroller, and in a grid of that fixed height the rows were squeezed to fit it */
  .case-content{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .case-content.is-current{display:block}
  .case-content>*+*{margin-top:var(--case-thumb-air)}
  .case-content>.case-text{margin-top:var(--case-text-air)}
  /* the way back stands in a head of glass while the case scrolls under it (his word of 2026-09-18:
     "eine art kopfzeile, also mit hintergrund, und vl liquid glas übergang") */
  .case::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--case-head-height);z-index:var(--layer-case-head);pointer-events:none;
    background:rgb(from var(--ground-dark) r g b / var(--case-head-alpha));-webkit-backdrop-filter:blur(var(--case-head-blur));backdrop-filter:blur(var(--case-head-blur));
    -webkit-mask-image:linear-gradient(to bottom,var(--mask-show) 60%,transparent);mask-image:linear-gradient(to bottom,var(--mask-show) 60%,transparent);
    opacity:0;transition:opacity var(--case-slide-duration) var(--hover-line-easing)}
  .case.is-open::before{opacity:1}
  /* the row belongs to the sideways thumb alone: pan-x, so a slanted swipe never drags the case up */
  /* a box that scrolls sideways scrolls up and down too unless told not to, and the fire line under
     the shown still hung out of it: the row could be pulled out of its bar (his phone, 2026-09-18) */
  .case-thumbs{overflow-x:auto;overflow-y:hidden;padding-bottom:calc(var(--case-thumb-line-drop) + var(--fire-line));touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--page-margin);scrollbar-width:none;margin-inline:calc(-1 * var(--page-margin));padding-inline:var(--page-margin)}
  .case-thumbs::-webkit-scrollbar{display:none}
  /* here the row is longer than the screen ON PURPOSE and the finger travels it, so a thumb keeps
     its full width instead of sharing the way it does on the desktop's fixed column */
  .case-thumbs li{flex:0 0 var(--case-thumb-width);scroll-snap-align:center}
  /* the foot air is inside the scroll, and clears the browser's bar (his phone, 2026-09-18) */
  .case-text{max-width:none;padding-top:0;padding-bottom:calc(var(--section-air) + env(safe-area-inset-bottom,0px))}
}

/* ============ reduced motion: the case stands at once, the way back is a cut ============ */
@media (prefers-reduced-motion:reduce){
  .case-still,.case-pic video,.case-thumbs img,.case-thumbs button::after,.case-back{transition:none}
}