/* 360° image viewer — i2t3 component styles
 * A sequence of frames; drag horizontally to rotate. Only the active frame is
 * shown. A slider handle (faithful port of the Karma/CodyHouse product viewer)
 * shows the rotation progress and provides the "drag here" affordance.
 * Driven by the own script.
 */

.i2t3-image360 {
    text-align: center;
}
.i2t3-image360__stage {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    cursor: ew-resize;
    user-select: none;
    touch-action: pan-y;
    background: var(--i2t3-surface, #f5f5f5);
    border-radius: .5rem;
    overflow: hidden;
}
.i2t3-image360__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}
.i2t3-image360__frame.is-active { opacity: 1; }
.i2t3-image360__hint {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .25rem .65rem;
    border-radius: 50rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .85rem;
    pointer-events: none;
    transition: opacity .3s ease;
}
.i2t3-image360.is-dragging .i2t3-image360__hint { opacity: 0; }

/* Slider handle — rotation progress + drag affordance */
.i2t3-image360__handle {
    position: relative;
    z-index: 2;
    width: 60%;
    max-width: 300px;
    height: 4px;
    margin: 1.5em auto 1em;
    border-radius: 50em;
    background: rgba(0, 0, 0, .12);
    cursor: ew-resize;
    touch-action: none;
}
.i2t3-image360__fill {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--i2t3-image360-accent, var(--bs-primary, #0d6efd));
    transform: scaleX(0);
    transform-origin: left center;
    transition: ease transform 120ms;
}
.i2t3-image360__grip {
    position: absolute;
    z-index: 2;
    display: inline-block;
    height: 44px;
    width: 44px;
    left: 0;
    top: -20px;
    background: var(--i2t3-image360-accent, var(--bs-primary, #0d6efd));
    border-radius: 50%;
    transform: translateX(-50%) scale(0);
    transition: ease box-shadow 200ms, ease transform 120ms;
    animation: i2t3-image360-bounce 300ms 200ms both;
}
.i2t3-image360__grip:hover {
    box-shadow: 0 0 0 .35rem var(--i2t3-image360-accent-soft, rgba(13, 110, 253, .25));
}
.i2t3-image360__bars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 20px;
    background: #fff;
    transform: translate3d(-50%, -50%, 0);
}
.i2t3-image360__bars::before,
.i2t3-image360__bars::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 4px;
    height: 60%;
    background: #fff;
    transform: translate3d(0, -50%, 0);
}
.i2t3-image360__bars::before { left: -8px; }
.i2t3-image360__bars::after { right: -8px; }

@keyframes i2t3-image360-bounce {
    0%   { transform: translateX(-50%) scale(0); }
    60%  { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .i2t3-image360__grip { animation: none; transform: translateX(-50%) scale(1); }
    .i2t3-image360__fill,
    .i2t3-image360__grip { transition: none; }
}