/* Motion-Hero „Sucher + Licht · Grundriss 3D“ der Startseite – Stile. Grundstile der Lichtskizze: diagram.css.
   QUELLE: php/site/src/motion/ (versioniert) – ausgeliefert wird die Kopie in assets/motion/ (astro/tools/build-assets.sh) */

/* ── Motion-Hero: Rahmen exakt wie das bisherige Startbild ─────────────────── */
.mh-frame{position:relative;display:block;height:58vh;aspect-ratio:4/5;max-width:100%;overflow:hidden;
  background:#1d1d1d;container-type:size;color:#eaeaea;font-family:Inter,system-ui,sans-serif;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate}
@media (min-width:768px) and (orientation:landscape){.mh-frame{height:calc(100svh - 9rem);max-width:46vw}}
@media (min-width:768px) and (orientation:portrait){.mh-frame{height:auto;width:46vw;aspect-ratio:3/5}}
.mh-frame img{scale:1!important;max-width:none!important}
.mh-abs{position:absolute;inset:0}
.mh-zoom{position:absolute;inset:0;transform-origin:50% 30%}
.mh-img{position:absolute;display:block;user-select:none;-webkit-user-drag:none}
.mh-frame:focus-visible{outline:2px solid #7e9ab8;outline-offset:4px}
.mh-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}   /* Standbild, bis die Animation startet (Sicherheitsnetz) */
.mh-frame[hidden],.shine-card>picture[hidden]{display:none!important}   /* Umschalten Startbild ⇄ Animation (home.php) */


/* Szene */
.v4-dim{position:absolute;inset:0;background:#151515;opacity:0;pointer-events:none}
.v5-rig{pointer-events:none;overflow:visible;width:100%;height:100%}          /* Stative + Strahlen */
.v5-fx{pointer-events:none;width:100%;height:100%;overflow:visible;mix-blend-mode:screen}   /* Blitz – liegt UNTER der Blende, nur in der Öffnung sichtbar */
.v1-iris{pointer-events:none;width:100%;height:100%;display:block}

/* Sucher: Raster, Ecken, Augen-AF, Zähler */
.v1-grid{pointer-events:none}
.v1-grid i{position:absolute;background:rgba(255,255,255,.34);transform:scale(0)}
.v1-grid i.v{top:0;bottom:0;width:1px;transform-origin:50% 0}
.v1-grid i.h{left:0;right:0;height:1px;transform-origin:0 50%}
.v1-br{position:absolute;width:6.5cqw;height:6.5cqw;border:0 solid rgba(255,255,255,.9);opacity:0}
.v1-br.tl{left:4cqw;top:4cqw;border-left-width:2px;border-top-width:2px}
.v1-br.tr{right:4cqw;top:4cqw;border-right-width:2px;border-top-width:2px}
.v1-br.bl{left:4cqw;bottom:4cqw;border-left-width:2px;border-bottom-width:2px}
.v1-br.brr{right:4cqw;bottom:4cqw;border-right-width:2px;border-bottom-width:2px}
.v1-af{position:absolute;opacity:0;pointer-events:none}
.v1-af i{position:absolute;width:28%;height:28%;border:0 solid #fff;transition:border-color .2s}
.v1-af i:nth-child(1){left:0;top:0;border-left-width:2px;border-top-width:2px}
.v1-af i:nth-child(2){right:0;top:0;border-right-width:2px;border-top-width:2px}
.v1-af i:nth-child(3){left:0;bottom:0;border-left-width:2px;border-bottom-width:2px}
.v1-af i:nth-child(4){right:0;bottom:0;border-right-width:2px;border-bottom-width:2px}
.v1-af.lock i{border-color:#a9c4e3}
.v1-af b{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#a9c4e3;opacity:0;transition:opacity .2s}
.v1-af.lock b{opacity:1}
.v1-top{position:absolute;left:11cqw;top:5.2cqw;display:flex;flex-direction:column;gap:.9cqw;opacity:0}
.v1-count{font-size:max(10px,2.6cqw);font-variant-numeric:tabular-nums;letter-spacing:.12em;color:#fff;font-weight:600}
.v1-mode{font-size:max(8px,1.8cqw);letter-spacing:.18em;text-transform:uppercase;color:#cfd8e3;font-weight:500}

/* Ergebnis: Histogramm + Aufnahmedaten unten links, Lichtskizze ganz unten rechts – ohne Boxen */
.v5-row{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"hist slot" "info slot";align-items:end;column-gap:2.4cqw;row-gap:1.4cqw}
.v5-col{display:contents}
.v5-info,.v1-hist{--c:rgba(255,255,255,.85);--l:max(8px,2.2cqw);--b:1.5px;            /* Sucher-Ecken statt Box */
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--b),linear-gradient(var(--c),var(--c)) 0 0/var(--b) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--b),linear-gradient(var(--c),var(--c)) 100% 0/var(--b) var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--b),linear-gradient(var(--c),var(--c)) 0 100%/var(--b) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--b),linear-gradient(var(--c),var(--c)) 100% 100%/var(--b) var(--l);
  background-repeat:no-repeat}
.v1-hist{grid-area:hist;justify-self:start;position:relative;display:block;overflow:hidden;width:26cqw;height:10.5cqw;opacity:0;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.v1-hist path{stroke-width:1.6}
.v5-info{grid-area:info;align-self:stretch;min-width:0;padding:1.5cqw 2cqw;opacity:0}
.v1-exif{display:flex;flex-wrap:wrap;gap:.4cqw 2.6cqw;font-size:max(9.5px,3cqw);font-weight:600;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.01em}
.v1-exif b{font-weight:inherit}
.v1-gear{margin-top:.9cqw;font-size:max(8.5px,1.95cqw);font-weight:500;color:#d2d2d2;letter-spacing:.04em}
.v1-gear span{white-space:nowrap}                              /* Kamera / Objektiv nur am „·“ umbrechen, nie im Objektivnamen */
.v5-slot{grid-area:slot;align-self:end;width:max(104px,32cqw);aspect-ratio:1/1.17;position:relative;opacity:0}
.v5-cap{position:absolute;left:0;right:0;bottom:1.1cqw;text-align:center;font-size:max(7px,1.4cqw);font-weight:600;line-height:1.35;letter-spacing:.16em;text-transform:uppercase;color:#b9c6d4}
.v5-info,.v5-cap,.v1-top{text-shadow:0 0 1px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.4)}
/* nachbelichten: die Ecken unter Daten und Skizze wie in der Dunkelkammer (weiche Vignette aus der Bildecke, keine Kante) */
.v5-burn{position:absolute;bottom:0;opacity:0;pointer-events:none}
.v5-burn.l{left:0;width:92cqw;height:62cqw;background:radial-gradient(ellipse 92cqw 62cqw at 0 100%,rgba(12,12,12,.74),rgba(12,12,12,.5) 42%,rgba(12,12,12,0))}
.v5-burn.r{right:0;width:70cqw;height:88cqw;background:radial-gradient(ellipse 70cqw 88cqw at 100% 100%,rgba(12,12,12,.7),rgba(12,12,12,.46) 42%,rgba(12,12,12,0))}

/* Schriftfarbe passt sich dem Bild an: auf hellem Grund dunkle Schrift mit hellem Hof (je Ecke, gemessen in motion.js).
   Dort ist auch kein Nachbelichten nötig. */
.ink-data .v1-exif{color:#161616}
.ink-data .v1-gear{color:#3a3a3a}
.ink-data .v5-info{text-shadow:0 0 1px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.55)}
.ink-data .v5-info,.ink-data .v1-hist{--c:rgba(22,22,22,.8)}
.ink-data .v1-hist{filter:drop-shadow(0 0 2px rgba(255,255,255,.7))}
.ink-data .v1-hist path{fill:rgba(22,22,22,.45);stroke:#2c4058}
.ink-top .v1-count{color:#161616}
.ink-top .v1-mode{color:#3c4a58}
.ink-top .v1-top{text-shadow:0 0 1px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.55)}
.ink-slot .v5-cap{color:#3c4a58;text-shadow:0 0 1px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.55)}
.ink-data .v5-burn.l,.ink-slot .v5-burn.r{display:none}

/* Lichtskizze in der Animation (Grundstile: /assets/motion/diagram.css) */
.v5-diag{opacity:0}
.v5-diag .ln,.v5-diag .ray{transition:stroke-width .7s}
.v5-diag.inslot{filter:invert(0) hue-rotate(0deg) drop-shadow(0 0 1.5px rgba(0,0,0,.8));transition:filter .7s}
.v5-diag.inslot .ln{stroke-width:2.1}
.v5-diag.inslot .ray{stroke-width:1.7}
.ink-slot .v5-diag.inslot{filter:invert(1) hue-rotate(180deg) drop-shadow(0 0 1.5px rgba(255,255,255,.85))}

/* Grundriss 3D: Stative, Lampenköpfe, Strahlen */
.v5-rig .st{fill:none;stroke:#eaeaea;stroke-width:calc(var(--sw,1)*1.2px);stroke-dasharray:100;stroke-dashoffset:100}
.v5-rig .hd{fill:rgba(234,234,234,.22);stroke:#eaeaea;stroke-width:calc(var(--sw,1)*1.2px);opacity:0}
.v5-rig .hd.refl{fill:rgba(255,255,255,.5)}
.v5-rig .hd.sun{fill:rgba(233,207,149,.5);stroke:#e9cf95}
.v5-rig .bm{fill:none;stroke:#e9cf95;stroke-width:calc(var(--sw,1)*1.3px);stroke-dasharray:calc(var(--sw,1)*4px) calc(var(--sw,1)*6px);stroke-linecap:round;opacity:0}
.v5-rig .bm.wh{stroke:#fff}
.v5-rig text{font:600 calc(var(--sw,1)*8.5px) Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;fill:#eaeaea;opacity:0;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:calc(var(--sw,1)*2.5px)}