/*
 * DATEI: public/css/vorwaerts-spin.css
 * PROJEKT: SockenWeltShop
 * ERSTELLT: 2026-10-15 (W-0029)
 *
 * 360-Eintrag der Produktgalerie und der Bildansicht. Liegt ausserhalb von
 * vorwaerts.css (dort size-limit 20 KB, Build ueber postcss) und wird nur
 * auf Artikelseiten mit Drehsatz eingebunden. Kein Build-Schritt.
 *
 * Zustaende (data-sw-spin-state, gesetzt von vorwaerts-spin.js) am
 * Galerie-Slide bzw. am Kasten .sw-lb-spin der Bildansicht:
 *   (leer)  Vorschau: 0-Grad-Bild mit 360-Knopf, wischt wie ein Bild
 *   laedt   Bilder laden, Ring mit Prozent mittig, 0-Grad-Bild bleibt
 *   aktiv   Viewer laeuft, Ziehen dreht
 *   ruht    nur Galerie: Viewer geschlossen, Neustart sofort
 */

/* ------------------------------------------------------------------ */
/* Galerie                                                             */
/* ------------------------------------------------------------------ */

.sw-spin {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.sw-spin-preview {
    position: absolute;
    inset: 0;
}

.sw-gallery-main .sw-spin-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Der Viewer liegt von Anfang an in voller Groesse unter der Vorschau,
   damit er beim Start echte Masse misst (responsiveBaseWidth 0).
   Bilder darin: basic.css setzt selbst max-width/max-height:none
   !important, die Groessen setzt der Viewer inline. */
.sw-spin-player {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.sw-spin-slide[data-sw-spin-state="aktiv"] .sw-spin-player { visibility: visible; }
.sw-spin-slide[data-sw-spin-state="aktiv"] .sw-spin-preview { display: none; }
.sw-spin-slide[data-sw-spin-state="aktiv"] .sw-spin { cursor: default; }
.sw-spin-slide[data-sw-spin-state="laedt"] .sw-spin-start,
.sw-spin-slide[data-sw-spin-state="aktiv"] .sw-spin-start { display: none; }

/* 360-Knopf ueber dem 0-Grad-Bild */
.sw-spin-start {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem 0.6rem 0.8rem;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.sw-spin-start:hover,
.sw-spin-start:focus-visible { background: rgba(20, 20, 20, 0.92); }
.sw-spin-start svg { width: 1.75rem; height: 1.75rem; flex: none; }

/* Ladeanzeige: Ring mit Prozent, mittig ueber dem 0-Grad-Bild */
.sw-spin-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 1.25rem 0.85rem;
    border-radius: 1rem;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    pointer-events: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}
[data-sw-spin-state="laedt"] > .sw-spin > .sw-spin-progress,
.sw-lb-spin[data-sw-spin-state="laedt"] > .sw-spin-progress { display: flex; }

.sw-spin-ring { width: 3.5rem; height: 3.5rem; transform: rotate(-90deg); }
.sw-spin-ring circle { fill: none; stroke-width: 4; }
.sw-spin-ring-bg { stroke: rgba(255, 255, 255, 0.25); }
.sw-spin-ring-fg { stroke: #fff; stroke-linecap: round; transition: stroke-dasharray 0.2s linear; }
.sw-spin-pct { font-size: 1.05rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sw-spin-progress-label { font-size: 0.8rem; opacity: 0.85; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
    .sw-spin-ring-fg { transition: none; }
}

/* Knoepfe im laufenden Viewer: X links oben, Vergroessern rechts oben */
.sw-spin-close,
.sw-spin-gross {
    position: absolute;
    top: 0.6rem;
    z-index: 5;
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.6);
    color: #fff;
    cursor: pointer;
}
.sw-spin-close { left: 0.6rem; }
.sw-spin-gross { right: 0.6rem; }
.sw-spin-close:hover,
.sw-spin-gross:hover,
.sw-spin-close:focus-visible,
.sw-spin-gross:focus-visible { background: rgba(20, 20, 20, 0.85); }
.sw-spin-close svg,
.sw-spin-gross svg { width: 1.25rem; height: 1.25rem; }
.sw-spin-slide[data-sw-spin-state="aktiv"] .sw-spin-close,
.sw-spin-slide[data-sw-spin-state="aktiv"] .sw-spin-gross { display: inline-flex; }

/* Hinweis oben mittig: was das ist und wie es geht. Steht beim Laden
   und im laufenden Viewer, bis zur ersten Beruehrung (is-benutzt). Oben,
   weil unten die Leiste von WebRotate sitzt. */
.sw-spin-hint {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 0.45rem;
    max-width: calc(100% - 6.5rem);
    padding: 0.45rem 0.85rem 0.45rem 0.6rem;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.sw-spin-hint svg { width: 1.4rem; height: 1.4rem; flex: none; }
.sw-spin-slide[data-sw-spin-state="laedt"] .sw-spin-hint,
.sw-spin-slide[data-sw-spin-state="aktiv"]:not(.is-benutzt) .sw-spin-hint,
.sw-lb-spin[data-sw-spin-state="laedt"] > .sw-spin-hint,
.sw-lb-spin[data-sw-spin-state="aktiv"]:not(.is-benutzt) > .sw-spin-hint { display: inline-flex; }

/* Vorschaubild in der Schiene mit 360-Plakette */
.sw-pdp-thumb-spin { position: relative; }
.sw-pdp-thumb-spin .sw-spin-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.3;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Bildansicht (pdp-lightbox.js): Drehsatz als eigener Viewer          */
/* ------------------------------------------------------------------ */

/* Das 0-Grad-Standbild der Bildansicht bleibt fuer ihre Rechnung im
   Layout (Klick daneben schliesst), ist aber unsichtbar. */
.sw-lb-slide-spin .sw-lb-zoom { visibility: hidden; }

/* Hoechstens Bildgroesse (Media liefert 1000 px), sonst so gross, wie
   Bildschirm und Bedienelemente zulassen. Quadratisch wie der Satz. */
.sw-lb-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1000px, calc(100vw - 1rem), calc(100vh - 7rem));
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    border-radius: 0.25rem;
}
@supports (height: 100dvh) {
    .sw-lb-spin { width: min(1000px, calc(100vw - 1rem), calc(100dvh - 7rem)); }
}
@media (min-width: 1024px) {
    /* Platz fuer die Pfeile links und rechts */
    .sw-lb-spin { width: min(1000px, calc(100vw - 11rem), calc(100vh - 6rem)); }
}

.sw-lb-spin-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sw-lb-spin[data-sw-spin-state="aktiv"] .sw-spin-player { visibility: visible; }
.sw-lb-spin[data-sw-spin-state="aktiv"] .sw-lb-spin-preview { display: none; }

/* ------------------------------------------------------------------ */
/* Galerie-Video (2026-10-15)                                          */
/* Zustaende am Slide bzw. am Kasten .sw-lb-video (data-sw-spin-state): */
/*   (leer) Posterbild mit Play-Knopf, noch nichts vom Video geladen   */
/*   laeuft Video spielt, stumm, in der Schleife                       */
/*   pause  angehalten, Play-Knopf wieder sichtbar                     */
/* ------------------------------------------------------------------ */

.sw-video {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}
.sw-gallery-main .sw-video-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sw-video-preview { position: absolute; inset: 0; }

.sw-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.sw-gallery-main video.sw-video-el { max-width: none; }

/* Play-Knopf mittig, klassisch: abgerundetes Feld mit Dreieck */
.sw-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 3.25rem;
    border: 0;
    border-radius: 0.9rem;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.sw-video-play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; }
.sw-video:hover .sw-video-play,
.sw-video-play:focus-visible,
.sw-lb-video:hover .sw-video-play { background: rgba(20, 20, 20, 0.92); transform: translate(-50%, -50%) scale(1.06); }

[data-sw-spin-state="laeuft"] .sw-video-play,
[data-sw-spin-state="laeuft"] .sw-video-preview { display: none; }
[data-sw-spin-state="pause"] .sw-video-preview { display: none; }

/* Vergroessern oben rechts, sobald das Video einmal gestartet ist */
.sw-video-gross {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 5;
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.6);
    color: #fff;
    cursor: pointer;
}
.sw-video-gross svg { width: 1.25rem; height: 1.25rem; }
.sw-video-gross:hover,
.sw-video-gross:focus-visible { background: rgba(20, 20, 20, 0.85); }
.sw-video-slide[data-sw-spin-state] .sw-video-gross { display: inline-flex; }

/* Vorschaubild in der Schiene mit Play-Plakette */
.sw-pdp-thumb-video { position: relative; }
.sw-pdp-thumb-video .sw-video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.2rem;
    border-radius: 0.35rem;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    pointer-events: none;
}
.sw-pdp-thumb-video .sw-video-badge svg { width: 0.7rem; height: 0.7rem; margin-left: 0.1rem; }

/* Bildansicht: Video hoechstens in seiner Groesse (Media liefert 1080) */
.sw-lb-slide-video .sw-lb-zoom { visibility: hidden; }
.sw-lb-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1080px, calc(100vw - 1rem), calc(100vh - 7rem));
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    border-radius: 0.25rem;
    cursor: pointer;
}
@supports (height: 100dvh) {
    .sw-lb-video { width: min(1080px, calc(100vw - 1rem), calc(100dvh - 7rem)); }
}
@media (min-width: 1024px) {
    .sw-lb-video { width: min(1080px, calc(100vw - 11rem), calc(100vh - 6rem)); }
}

/* DATEI: public/css/vorwaerts-spin.css */
/* PROJEKT: SockenWeltShop */
/* AKTUALISIERT: 2026-10-15 (Rueckmeldung Markus) - Ladeanzeige mittig */
/* (Ring mit Prozent), Knopf Vergroessern, Drehsatz in der Bildansicht, */
/* Hinweis "360 - zum Drehen ziehen" oben mittig bis zur ersten Beruehrung. */
/* AKTUALISIERT: 2026-10-15 - Galerie-Video: Posterbild mit Play-Knopf, */
/* Play-Plakette in der Schiene, Video in der Bildansicht. */