[data-v-6cd5e973]:root {
    --bar-height: 1vw;
}
.main-container[data-v-6cd5e973] {
    display: flex;
    width: 100%;
    background: transparent;
}
.container[data-v-6cd5e973] {
    flex: 1;
    /* Each container takes up 1/10th of the space */
    position: relative;
    height: 20vh;
    overflow: hidden;
}
.line[data-v-6cd5e973] {
    position: absolute;
    width: 100%;
    height: var(--bar-height);
    border-radius: 5px;
}
.line1[data-v-6cd5e973],
.line2[data-v-6cd5e973] {
    left: 0;
    right: 0;
    margin: auto;
    transition: .4s all;
}
.line1[data-v-6cd5e973] {
    top: calc(50% - (var(--bar-height) / 2));
    background: white;
    animation: rotateX-6cd5e973 4s infinite alternate;
    z-index: 4;
}
.line2[data-v-6cd5e973] {
    bottom: calc(50% - (var(--bar-height) / 2));
    background: linear-gradient(to right, #F95DC2 0%, #F95DC2 50%, transparent 50%, transparent 70%, #00BCDE 70%, #00BCDE 100%);
    animation: rotateY-6cd5e973 4s infinite alternate;
}
@keyframes rotateX-6cd5e973 {
0% {
        border-radius: 0px;
        transform: rotate(0deg);
}
5% {
        border-radius: 0px;
        transform: rotate(0deg);
}
100% {
        border-radius: 5px;
        transform: rotate(45deg);
}
}
@keyframes rotateY-6cd5e973 {
0% {
        border-radius: 0px;
        transform: rotate(0deg);
}
5% {
        border-radius: 0px;
        transform: rotate(0deg);
        filter: saturate(0%);
}
100% {
        border-radius: 5px;
        transform: rotate(-45deg);
}
}

.phone-container[data-v-1d0dd0ed] {
    width: 100%;
    padding-top: 216.67%; /* 13:6 aspect ratio */
    position: relative;
    overflow: hidden;
}
.phone-inner[data-v-1d0dd0ed] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.phone-video[data-v-1d0dd0ed] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 12% 6% 12% 6%;
    object-fit: cover;
    border-radius: 40px;
    z-index: 2;
}
.phone-frame[data-v-1d0dd0ed] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}
.loader[data-v-1d0dd0ed] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    height: 92%;
    background-color: #000;
    border-radius: 40px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader[data-v-1d0dd0ed]::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-top: 5px solid #f4009f;
    border-radius: 50%;
    animation: spin-1d0dd0ed 1s linear infinite;
}
@keyframes spin-1d0dd0ed {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}

/* Thumbnail styles */
.thumbnail-container[data-v-1d0dd0ed] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 12% 6% 12% 6%;
    z-index: 2;
    overflow: hidden;
    border-radius: 40px;
}
.phone-thumbnail[data-v-1d0dd0ed] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
}

/* Shimmer loading effect */
.shimmer-overlay[data-v-1d0dd0ed] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 40px;
}
.shimmer[data-v-1d0dd0ed] {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer-1d0dd0ed 2s infinite;
    transform: translateX(-100%);
}
@keyframes shimmer-1d0dd0ed {
0% {
        transform: translateX(-100%);
}
100% {
        transform: translateX(100%);
}
}

/* Fade transitions */
.fade-out-enter-active[data-v-1d0dd0ed],
.fade-out-leave-active[data-v-1d0dd0ed] {
    transition: opacity 0.4s ease-out;
}
.fade-out-enter-from[data-v-1d0dd0ed],
.fade-out-leave-to[data-v-1d0dd0ed] {
    opacity: 0;
}
.fade-in-enter-active[data-v-1d0dd0ed],
.fade-in-leave-active[data-v-1d0dd0ed] {
    transition: opacity 0.3s ease-in;
}
.fade-in-enter-from[data-v-1d0dd0ed],
.fade-in-leave-to[data-v-1d0dd0ed] {
    opacity: 0;
}
@media (max-width: 768px) {
.phone-container[data-v-1d0dd0ed] {
        padding-top: 220%; /* Slightly increased for mobile */
}
}