/* Arcturis — /website-analyse: die Bildeingriffe.
   Die Seite verkauft eine Prüfung. Also darf kein Bild dekorieren: jedes muss
   entweder zeigen, WAS geprüft wird, oder WAS zurückkommt. Fünf Bauteile:

   A · 01 Kopf      Der Prüfblick. Ein Ausdruck auf dem Tisch, in Ruhe
                    entsättigt — unter dem Zeiger liegt eine Lupe, und nur
                    darin steht das Blatt scharf und in Farbe. Der Besucher
                    macht mit der Hand genau das, was wir für ihn tun.
   B · 02 Inhalt    Die Randspalte. Die zwei Seiten, die zurückkommen, stehen
                    als hohes Blatt neben der Liste und bleiben stehen,
                    während die sechs Zeilen vorbeilaufen. Der Ausschnitt
                    wandert dabei die Blätter hinab.
   C · 03 Muster    Die Tischplatte. Der Musterbericht liegt nicht im Nichts,
                    sondern auf einem Tisch. Schlägt man eine Seite auf,
                    tritt der Tisch zurück: dunkler, unscharf, leiser.
   D · 04 Blickwinkel  Drei Fenster, eins je Blickwinkel, in der Zeile selbst.
                    Sie ziehen von oben herein — jedes an seiner Stelle, also
                    zeitversetzt ohne Kunstgriff. Beim Zeigen kommen sie in
                    Farbe, und ein Lichtstreifen geht darüber.
   E · 05 Grenze    Der Schnitt. Ein Blatt, links unberührt, rechts bearbeitet.
                    Beim Rollen läuft die Farbe von links nach rechts durch —
                    Feststellen wird zu Beheben, in einer Bewegung.

   Bildgesetz wie überall: keine lesbare Schrift, keine Gesichter,
   Gebrauchsspuren, seitliches Licht.

   Wird in Astro zu src/styles/analyse-bild.css. */

/* ══ Das Bauteil ═══════════════════════════════════════════════════════════
   Überall dasselbe: das Foto steht in --bild, darunter liegt ein sichtbares
   Raster mit der Beschriftung, was an diese Stelle gehört. Sobald die Datei
   wirklich lädt, setzt das Skript data-foto und die Beschriftung geht weg —
   es ist also nichts nachzutragen außer der Datei. */
.ab-b{position:relative;display:grid;place-items:center;overflow:hidden;
  background-color:#DDD8CA;
  background-image:var(--bild,none),var(--ab-raster);
  --ab-raster:repeating-linear-gradient(135deg,
    rgba(84,91,102,.17) 0 10px,rgba(84,91,102,0) 10px 20px);
  background-repeat:no-repeat,repeat;
  background-size:cover,auto;
  background-position:50% 50%,0 0}
.ab-b > i{font-style:normal;font-family:var(--f-m);font-size:.6rem;line-height:1.65;
  letter-spacing:.09em;text-transform:uppercase;color:#5C6472;text-align:center;
  padding:0 1em;max-width:100%;overflow-wrap:anywhere;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.ab-b[data-foto] > i{display:none}
.ab-unter{margin:12px 0 0;font-family:var(--f-m);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:9px}
.ab-unter::before{content:"";width:16px;height:1px;background:currentColor;flex:0 0 auto}

/* ══ A · Der Prüfblick im Kopf ═════════════════════════════════════════════
   Zwei Lagen desselben Bildes übereinander: unten entsättigt und leicht
   abgedunkelt, oben in Farbe, aber nur durch eine kreisrunde Maske sichtbar,
   die dem Zeiger folgt. Der Ring ist gezeichnet, nicht fotografiert — er
   gehört zur Oberfläche, nicht zum Motiv.

   Farbe allein wäre aber kein Fund: das Blatt sähe unter der Lupe genauso aus
   wie daneben. Deshalb liegen FÜNF BEFUNDMARKEN auf dem Blatt — an den
   Stellen, an denen im Motiv wirklich etwas ist (ein Bleistiftkreis, ein
   Häkchen, ein Druckblock). Sie sind unsichtbar, bis die Lupe sie erfasst;
   dann rasten sie ein und bleiben gefunden. Nach fünf Funden steht der ganze
   Befund auf dem Blatt. Die Werte sind dieselben wie im Musterbericht weiter
   unten, damit die Seite sich nicht selbst widerspricht.

   Beim Erscheinen öffnet sich das Band aus der Mitte nach oben und unten.
   Im Satzspiegel, nicht randlos: 21:9 über die volle Fensterbreite wäre bei
   1900 px ein 190-px-Streifen, und jedes Motiv sähe zerschnitten aus. */
.ab-lupe-halter{margin:clamp(30px,5vh,60px) 0 0}
.ab-lupe{position:relative;overflow:hidden;border-radius:2px;
  aspect-ratio:21/9;max-height:min(58svh,540px);
  cursor:crosshair;
  --ab-r:clamp(112px,12vw,200px);
  clip-path:inset(calc((1 - var(--ab-ein,1)) * 50%) 0)}
.ab-lupe-grund{position:absolute;inset:0;
  filter:saturate(.24) brightness(.94) contrast(1.05);
  transition:filter .5s var(--ease)}
.ab-lupe-klar{position:absolute;inset:0;display:block;pointer-events:none;
  background-image:var(--bild,none);background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat;
  opacity:var(--ab-an,0);transition:opacity .3s var(--ease);
  -webkit-mask-image:radial-gradient(circle var(--ab-r) at var(--lx,50%) var(--ly,50%),
    #000 0 64%,rgba(0,0,0,.45) 84%,transparent 100%);
  mask-image:radial-gradient(circle var(--ab-r) at var(--lx,50%) var(--ly,50%),
    #000 0 64%,rgba(0,0,0,.45) 84%,transparent 100%)}
/* Der Ring sitzt am Mittelpunkt der Maske und ist genau so groß wie sie. */
.ab-lupe-ring{position:absolute;top:0;left:0;pointer-events:none;z-index:3;
  width:calc(var(--ab-r) * 2);height:calc(var(--ab-r) * 2);
  margin:calc(var(--ab-r) * -1) 0 0 calc(var(--ab-r) * -1);
  translate:var(--lx,50%) var(--ly,50%);
  border:1px solid color-mix(in oklab,var(--acc) 62%,transparent);
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,
    0 16px 40px -20px rgba(3,5,10,.7);
  opacity:calc(var(--ab-an,0) * .9);transition:opacity .3s var(--ease)}

/* Die fünf Befunde. Ziffer im Kreis, Haarlinie, Wert in Monoschrift — genau
   die Auszeichnung des Musterberichts, nur auf dem Blatt statt darin. Die
   Marke steht mit dem Kreis auf ihrem Punkt; der Wert läuft nach der Seite,
   auf der noch Bild ist. */
.ab-befunde{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none;
  pointer-events:none}
.ab-befund{position:absolute;left:var(--px,50%);top:var(--py,50%);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  transform:translate(-11px,-50%) scale(.94);
  opacity:0;transition:opacity .34s var(--ease),transform .34s var(--ease)}
.ab-befund[data-seite="links"]{flex-direction:row-reverse;
  transform:translate(calc(-100% + 11px),-50%) scale(.94)}
.ab-befund > u{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:color-mix(in oklab,var(--acc) 88%,#02040A);color:#F4F7FB;
  font-family:var(--f-m);font-size:.56rem;letter-spacing:0;line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px rgba(255,252,244,.5),0 8px 18px -10px rgba(3,5,10,.8)}
.ab-befund > b{font-weight:400;font-family:var(--f-m);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:#101623;
  padding:5px 9px;border-radius:2px;
  background:rgba(253,251,245,.86);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 24px -16px rgba(3,5,10,.6)}
/* Gefunden bleibt gefunden: die Marke steht danach gedämpft weiter da, und
   das Blatt füllt sich, während man darüberfährt. */
.ab-befund[data-gefunden]{opacity:.42;transform:translate(-11px,-50%) scale(1)}
.ab-befund[data-gefunden][data-seite="links"]{transform:translate(calc(-100% + 11px),-50%) scale(1)}
.ab-befund[data-nah]{opacity:1}
.ab-zaehler{color:var(--acc);font-variant-numeric:tabular-nums}
.ab-zaehler:empty{display:none}
/* Der Hinweis bleibt stehen, wenn gezählt wird: er IST der Satz, der Zähler
   nur sein Ende. Vorher verschwand er, und das Skript musste den ganzen Satz
   neu erfinden — 60 Wörter, die im HTML nicht vorkamen. */

/* ══ B · Die Randspalte bei „Was in Ihrer Analyse steht" ══════════════════
   Die Liste behält ihre Satzbreite, das Blatt steht daneben und bleibt
   stehen. Es zieht von unten auf, der Ausschnitt wandert beim Rollen die
   Blätter hinab, und sobald der Zeiger irgendwo in der Liste liegt, kommt es
   in Farbe: die Angaben links und das Blatt rechts sind dieselbe Sache. */
.ab-02{display:grid;gap:clamp(26px,4vw,58px);align-items:start}
@media (min-width:1000px){
  .ab-02{grid-template-columns:minmax(0,1fr) clamp(226px,23vw,318px)}
}
.ab-blatt{position:sticky;top:calc(88px + clamp(18px,3vh,40px));
  width:100%;aspect-ratio:3/4;border-radius:2px;
  background-position:50% calc(50% + var(--ab-lauf,0) * 9%),0 0;
  filter:saturate(.3) brightness(.98);
  clip-path:inset(0 0 calc((1 - var(--ab-ein,1)) * 100%) 0);
  transition:filter .45s var(--ease);
  box-shadow:0 24px 54px -34px rgba(20,18,15,.5)}
.ab-02:has(.arc-gz:hover) .ab-blatt,
.ab-blatt:hover{filter:none}

/* ══ C · Die Tischplatte unter dem Musterbericht ═══════════════════════════
   Die Platte deckt die Fläche der beiden Papierseiten samt Rand. Sie liegt
   ganz hinten; Marke und Hinweis werden angehoben, damit sie darüber stehen.
   Beim Aufschlagen einer Seite tritt sie zurück — das ist der einzige Zweck
   des Bildes: der aufgeschlagene Bogen soll gewinnen. */
.arc-muster{isolation:isolate}
.arc-muster > .arc-mb-marke,
.arc-muster > .arc-mb-hinweis,
.arc-muster > .arc-mb-paar{position:relative;z-index:1}
.ab-tisch{position:absolute;z-index:0;pointer-events:none;border-radius:3px;
  --ab-deck:.52;
  top:calc(-1 * clamp(16px,3vh,38px));
  bottom:calc(-1 * clamp(18px,3.4vh,48px));
  left:calc(-1 * clamp(14px,3vw,52px));
  right:calc(-1 * clamp(14px,3vw,52px));
  filter:saturate(.42) brightness(1.02);
  opacity:calc(var(--ab-deck) * var(--ab-ein,1));
  transform:scale(calc(1 + (1 - var(--ab-ein,1)) * .05));
  transition:opacity .55s var(--ease),filter .55s var(--ease),transform .9s var(--ease)}
.arc-muster[data-offen="1"] .ab-tisch,
.arc-muster[data-offen="2"] .ab-tisch{--ab-deck:.2;
  filter:saturate(.18) brightness(.82) blur(3px)}

/* ══ D · Drei Fenster in den Blickwinkeln ══════════════════════════════════
   Das Bild sitzt in der Zeile, nicht darüber: erste Spalte des Rasters, in
   der Höhe an der Überschrift ausgerichtet. 4:5, weil ein Gegenstand auf dem
   Tisch in Hochkant besser steht als in Breite. */
.arc-blick--bild li{grid-template-columns:clamp(84px,8.4vw,118px) minmax(0,10em) minmax(0,1fr);
  gap:10px 26px;align-items:start}
.ab-fenster > i{font-size:.5rem;letter-spacing:.04em;padding:0 .5em;line-height:1.5}
.ab-fenster{width:100%;aspect-ratio:4/5;border-radius:2px;
  filter:saturate(.3) brightness(.98);
  clip-path:inset(0 0 calc((1 - var(--ab-ein,1)) * 100%) 0);
  transition:filter .4s var(--ease),transform .4s var(--ease)}
.arc-blick--bild li:hover .ab-fenster,
.arc-blick--bild li:focus-within .ab-fenster{filter:none;transform:translateY(-3px)}
/* Der Lichtstreifen läuft über den Gegenstand, nicht über die Fläche. */
.ab-fenster::after{content:"";position:absolute;top:0;bottom:0;left:0;width:52%;
  translate:-170% 0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,251,240,.3),transparent)}
.arc-blick--bild li:hover .ab-fenster::after{animation:ab-glanz .9s var(--ease) both}
@keyframes ab-glanz{from{translate:-170% 0}to{translate:270% 0}}
@media (max-width:620px){
  .arc-blick--bild li{grid-template-columns:minmax(0,1fr)}
  .ab-fenster{width:clamp(104px,32vw,148px)}
}

/* ══ E · Der Schnitt an der Grenze ═════════════════════════════════════════
   Das Band ist anfangs nicht da. Eine feine Linie in der Akzentfarbe läuft
   beim Rollen von links nach rechts durch und ZIEHT DAS BILD AUF; ein Stück
   dahinter kommt die Farbe nach. Erst leeres Papier, dann der Befund, dann
   die Arbeit — „Feststellen ist kostenlos. Beheben ist Arbeit." in einer
   Bewegung. */
.ab-schnitt{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:7/2;
  margin:clamp(28px,4.5vh,56px) 0 0;
  clip-path:inset(0 calc(100% - var(--ab-x,0%)) 0 0)}
.ab-schnitt-grund{position:absolute;inset:0;
  filter:saturate(.16) brightness(.86) contrast(1.06)}
.ab-schnitt-klar{position:absolute;inset:0;display:block;pointer-events:none;
  background-image:var(--bild,none);background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,#000 0 calc(var(--ab-x,0%) - 32%),
    rgba(0,0,0,.4) calc(var(--ab-x,0%) - 24%),transparent calc(var(--ab-x,0%) - 21%));
  mask-image:linear-gradient(to right,#000 0 calc(var(--ab-x,0%) - 32%),
    rgba(0,0,0,.4) calc(var(--ab-x,0%) - 24%),transparent calc(var(--ab-x,0%) - 21%))}
.ab-schnitt-kante{position:absolute;top:0;bottom:0;width:2px;
  left:calc(var(--ab-x,0%) - 2px);background:var(--acc);pointer-events:none;
  opacity:clamp(0,calc(var(--ab-ein,0) * 3),.85);
  box-shadow:0 0 14px 1px color-mix(in oklab,var(--acc) 45%,transparent)}
.ab-schnitt-kante[hidden]{display:none}

/* ══ Handy ════════════════════════════════════════════════════════════════
   Kein Effekt wird kleiner nachgebaut. Was von der Hand lebt, fällt weg;
   übrig bleibt das Bild, eine Spur weniger entsättigt, damit es ohne
   Zutun etwas zeigt. */
/* Unter der Spaltenschwelle fällt das Blatt weg. Seine Aufgabe war, neben der
   Liste stehen zu bleiben — unter der Liste ist es ein Bild ohne Anlass. */
@media (max-width:999px){
  .ab-blatt{display:none}
}
@media (max-width:900px){
  .ab-lupe{aspect-ratio:16/9;cursor:auto}
  .ab-lupe-grund{filter:saturate(.6) brightness(.97)}
  .ab-lupe-klar,.ab-lupe-ring{display:none}
  /* Ohne Zeiger keine Lupe: die fünf Befunde stehen einfach da, gestaffelt
     eingeblendet, sobald das Bild im Fenster steht. */
  .ab-befund{opacity:calc(var(--ab-ein,0) * .92)!important;
    transform:translate(-11px,-50%) scale(1)!important}
  .ab-befund[data-seite="links"]{transform:translate(calc(-100% + 11px),-50%) scale(1)!important}
  .ab-befund > b{font-size:.58rem;letter-spacing:.06em;padding:4px 7px}
  .ab-befund > u{width:21px;height:21px;font-size:.5rem}
  .ab-befund:nth-child(2){transition-delay:120ms}
  .ab-befund:nth-child(3){transition-delay:240ms}
  .ab-befund:nth-child(4){transition-delay:360ms}
  .ab-befund:nth-child(5){transition-delay:480ms}
  .ab-schnitt{display:none}
  .ab-fenster{filter:saturate(.55)}
}
@media (prefers-reduced-motion:reduce){
  .ab-lupe,.ab-blatt,.ab-fenster{clip-path:none!important}
  .ab-lupe-klar,.ab-lupe-ring{display:none}
  .ab-befund{opacity:.92!important;transition:none!important}
  .ab-tisch{transform:none!important;opacity:.5!important;filter:saturate(.4)!important}
  .ab-fenster::after{animation:none!important}
  .ab-schnitt{clip-path:none!important}
  .ab-schnitt-klar,.ab-schnitt-kante{display:none}
  .ab-schnitt-grund{filter:saturate(.5)}
}